表单的基本结构-编程入门课：HTML(5)从入门到实战

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

表单是Web页面中最常用的用户交互元素之一，用于收集用户输入的数据并将其提交到后台处理。在HTML中，表单的基本结构由<form>标签定义，其中包含一组表单元素，包括输入框、单选框、复选框、下拉列表、文本域等。

`一、<form>标签`

`<form>`标签用于定义一个表单，其基本语法如下：
```asp
<form action="URL" method="HTTP_METHOD">
  
</form>

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

二、文本框

文本框用于接收用户输入的单行文本，其基本语法如下：
```asp
<input type="text" name="username" value="default value">

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

三、密码框

密码框用于接收用户输入的密码，其基本语法如下：
```asp
<input type="password" name="password">

```
其中，type属性指定密码框类型为"password"，name属性指定密码框的名称。

四、单选框

单选框用于让用户从多个选项中选择一个，其基本语法如下：
```asp
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

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

五、复选框

复选框用于让用户从多个选项中选择多个，其基本语法如下：
```asp
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sports">运动

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

六、下拉列表

下拉列表用于让用户从多个选项中选择一个，其基本语法如下：
```asp
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

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

七、文本域

文本域用于接收用户输入的多行文本，其基本语法如下：
```asp
<textarea name="content"></textarea>

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

八、提交按钮

提交按钮用于提交表单数据，其基本语法如下：
```asp
<input type="submit" value="提交">

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

九、重置按钮

重置按钮用于重置表单数据，将表单元素的值恢复为默认值，其基本语法如下：
```asp
<input type="reset" value="重置">

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

下面是一个完整的表单示例，包括文本框、密码框、单选框、复选框、下拉列表、文本域和提交按钮：
```asp
<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" value="admin"><br>

```

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

编程入门课：CSS(3)从入门到实战