HTML标记语言——表单

接下来我为你详细讲解HTML的表单。

一、表单简介

在网页中，表单常用来收集用户的输入信息，通过form控件向后台发送或存储数据。HTML表单的结构由起始标签<form>和结束标签</form>包裹，中间的内容用于输入数据。

二、表单元素

表单元素包括文本框、单选框、复选框、下拉框、提交按钮等。

1. 文本框

文本框用于输入文本信息。可通过<input>标签来实现，其中type属性值为"text"。

示例代码：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>
  <label for="password">密码：</label>
  <input type="text" id="password" name="password">
</form>

这段代码将生成两个文本框，一个用于输入用户名，一个用于输入密码。

2. 单选框

单选框用于选中一项。可通过<input>标签来实现，其中type属性值为"radio"。

示例代码：

<form>
  <label>性别：</label>
  <input type="radio" name="sex" value="male">男
  <input type="radio" name="sex" value="female">女
</form>

这段代码将生成两个单选框，男和女，同属于一个单选组。

3. 复选框

复选框用于选中多项。可通过<input>标签来实现，其中type属性值为"checkbox"。

示例代码：

<form>
  <label>爱好：</label>
  <input type="checkbox" name="hobby" value="reading">读书
  <input type="checkbox" name="hobby" value="music">听音乐
  <input type="checkbox" name="hobby" value="sports">运动
</form>

这段代码将生成三个复选框，包含读书、听音乐和运动，每个复选框互相独立。

4. 下拉框

下拉框用于选中一项。可通过<select>和<option>标签来实现。

示例代码：

<form>
  <label>城市：</label>
  <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select>
</form>

这段代码将生成一个下拉框，包含北京、上海、广州、深圳四个选项。

5. 提交按钮

提交按钮用于提交表单数据。可通过<input>标签来实现，其中type属性值为"submit"。

示例代码：

<form>
  <input type="submit" value="提交">
</form>

这段代码将生成一个提交按钮，点击后将提交表单数据。

三、表单属性

1. name属性

表单元素的name属性用于定义表单元素的名称，可以方便后台获取表单数据。

示例代码：

<input type="text" name="username">

2. value属性

表单元素的value属性用于定义表单元素的值。

示例代码：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

3. required属性

表单元素的required属性用于定义是否为必填项。

示例代码：

<input type="text" name="username" required>

这段代码将生成一个必填项的文本框。

以上就是HTML标记语言——表单的完整攻略，希望对你有所帮助！