当前位置:  首页>> 技术小册>> 编程入门课:HTML(5)从入门到实战

表单是Web页面中最常用的用户交互元素之一,用于收集用户输入的数据并将其提交到后台处理。在HTML中,表单的基本结构由

标签定义,其中包含一组表单元素,包括输入框、单选框、复选框、下拉列表、文本域等。

一、<form>标签

<form>标签用于定义一个表单,其基本语法如下:

  1. <form action="URL" method="HTTP_METHOD">
  2. <!-- 表单元素 -->
  3. </form>

其中,action属性指定表单提交的URL地址,method属性指定表单提交的HTTP方法,常用的有GET和POST两种方式。表单元素包括文本框、密码框、单选框、复选框、下拉列表和文本域等。

二、文本框

文本框用于接收用户输入的单行文本,其基本语法如下:

  1. <input type="text" name="username" value="default value">

其中,type属性指定文本框类型为”text”,name属性指定文本框的名称,value属性指定文本框的默认值。

三、密码框

密码框用于接收用户输入的密码,其基本语法如下:

  1. <input type="password" name="password">

其中,type属性指定密码框类型为”password”,name属性指定密码框的名称。

四、单选框

单选框用于让用户从多个选项中选择一个,其基本语法如下:

  1. <input type="radio" name="gender" value="male">
  2. <input type="radio" name="gender" value="female">

其中,type属性指定单选框类型为”radio”,name属性指定单选框所属的组名,value属性指定单选框的值,同时,单选框也需要设置一个显示文本。

五、复选框

复选框用于让用户从多个选项中选择多个,其基本语法如下:

  1. <input type="checkbox" name="hobby" value="reading">阅读
  2. <input type="checkbox" name="hobby" value="music">音乐
  3. <input type="checkbox" name="hobby" value="sports">运动

其中,type属性指定复选框类型为”checkbox”,name属性指定复选框所属的组名,value属性指定复选框的值,同时,复选框也需要设置一个显示文本。

六、下拉列表

下拉列表用于让用户从多个选项中选择一个,其基本语法如下:

  1. <select name="city">
  2. <option value="beijing">北京</option>
  3. <option value="shanghai">上海</option>
  4. <option value="guangzhou">广州</option>
  5. </select>

其中,name属性指定下拉列表的名称,<option>标签用于定义下拉列表中的选项,value属性指定选项的值,同时,<option>标签也需要设置一个显示文本。

七、文本域

文本域用于接收用户输入的多行文本,其基本语法如下:

  1. <textarea name="content"></textarea>

其中,name属性指定文本域的名称。

八、提交按钮

提交按钮用于提交表单数据,其基本语法如下:

  1. <input type="submit" value="提交">

其中,type属性指定按钮类型为”submit”,value属性指定按钮显示的文本。

九、重置按钮

重置按钮用于重置表单数据,将表单元素的值恢复为默认值,其基本语法如下:

  1. <input type="reset" value="重置">

其中,type属性指定按钮类型为”reset”,value属性指定按钮显示的文本。

下面是一个完整的表单示例,包括文本框、密码框、单选框、复选框、下拉列表、文本域和提交按钮:

  1. <form action="/submit" method="post">
  2. <label for="username">用户名:</label>
  3. <input type="text" id="username" name="username" value="admin"><br>
  4. <label for="password">密码:</label>
  5. <input type="password" id="password" name="password"><br>
  6. <label>性别:</label>
  7. <input type="radio" name="gender" value="male" id="male"><label for="male"></label>
  8. <input type="radio" name="gender" value="female" id="female"><label for="female"></label><br>
  9. <label>爱好:</label>
  10. <input type="checkbox" name="hobby" value="reading" id="reading"><label for="reading">阅读</label>
  11. <input type="checkbox" name="hobby" value="music" id="music"><label for="music">音乐</label>
  12. <input type="checkbox" name="hobby" value="sports" id="sports"><label for="sports">运动</label><br>
  13. <label for="city">城市:</label>
  14. <select id="city" name="city">
  15. <option value="beijing">北京</option>
  16. <option value="shanghai">上海</option>
  17. <option value="guangzhou">广州</option>
  18. </select><br>
  19. <label for="content">内容:</label>
  20. <textarea id="content" name="content"></textarea><br>
  21. <input type="submit" value="提交">
  22. <input type="reset" value="重置">
  23. </form>

该分类下的相关小册推荐: