四、表单元素¶

TIP： HTML 表单用于收集不同类型的用户输入，如：登录、注册、发布、提交、编辑信息等。 ![[Pasted image 20260127174205.png]]

1、HTML 表单基本用法¶

TIP： 所有的 HTML 表单都是以一个 <form>元素包裹

action属性：提交表单时向何处发送表单数据

method属性：规定用于发送表单数据的 HTTP 方法

<h1>HTML的form表单</h1>
<form action="/user/login" method="get">......</form>

2、单行文本框¶

TIP： HTML 表单中的单行文本框用法

标签	属性	描述
`<input>`	`type="text"`	单行文本框，单标签
`<input>`	`value="艾编程"`	文本框的值
`<input>`	`placeholder="请输入用户名 ..."`	提示文本，以浅灰色显示在文本框中，并不是文本框中的值
`<input>`	`disabled`	表示用户不能与元素交互，即：禁用

<form action="/user" method="POST">
  <p>用户名：<input type="text" /></p>
  <p>真实姓名：<input type="text" placeholder="请输入您的真实姓名 ..." /></p>
  <p>所在城市：<input type="text" value="北京市海淀区" disabled /></p>
</form>

3、密码框¶

TIP： 与单行文本框类似，其属性为 type="password"显示内容为隐藏

请输入密码：<input type="password" />

![[Pasted image 20260127174237.png]]¶

4、单选按钮¶

TIP： HTML 表单中常用的单选按钮

标签	属性	描述
`<input>`	`type="radio"`	单选按钮
`<input>`	`name="自定义名称"`	设置互斥，需将多个 name 属性为相同的值
`<input>`	`value=""`	向服务器提交的值
`<input>`	`checked`	表示默认被选中

性别： 
<input type="radio" name="sex" /> 男 
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" checked /> 保密

![[Pasted image 20260127174318.png]] 注：以上代码，点击文字时，不能选中按钮，需要使用 label标签。

5、label 标签¶

TIP： label标签用来将文字和单选按钮进行绑定

HTML5 用法： 当用户单击文字时，等于点击了单选按钮，在 HTML5 中直接使用 label标签包裹单选按钮和文字即可。

性别：
<label> <input type="radio" name="sex" /> 男 </label>
<label> <input type="radio" name="sex" /> 女 </label>
<label> <input type="radio" name="sex" checked /> 保密 </label>

HTML4 用法：label标签是通过 for属性和单选按钮的 id属性进行绑定的。

所在城市：
<input type="radio" name="city" id="beijing" />
<label for="beijing">北京市</label>

<input type="radio" name="city" id="shanghai" />
<label for="shanghai">上海市</label>

<input type="radio" name="city" id="shenzhen" />
<label for="shenzhen">深圳市</label>

![[Pasted image 20260127174351.png]]

6、表单分组¶

TIP： 将需要分组的表单信息进行分组

<fieldset>：相关表单控件分组

<legend>：提供分组标题

<fieldset>
  <legend>个人信息</legend>
  <label for="fname">名：</label>
  <input type="text" id="fname" name="fname" /><br />
  <label for="lname">姓：</label>
  <input type="text" id="lname" name="lname" />
</fieldset>

![[Pasted image 20260127174415.png]]¶

7、复选框¶

标签	属性	描述
`<input>`	`type="checkbox"`	复选框
`<input>`	`name="自定义名称"`	同组复选框应该设置 name 为相同值
`<input>`	`value=""`	向服务器提交的值
`<input>`	`checked`	表示默认被选中

兴趣爱好：
<label>
  <input type="checkbox" name="hobby" checked value="篮球" /> 篮球
</label>
<label> <input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球 </label>
<label> <input type="checkbox" name="hobby" value="书法" /> 书法 </label>
<label>
  <input type="checkbox" name="hobby" value="跑步健身" /> 跑步健身
</label>

8、下拉菜单¶

TIP：

<select>标签，即下拉菜单

<option>是内部选项

请选择 省：
<select>
  <option value="湖北省">湖北省</option>
  <option value="湖南省">湖南省</option>
  <option value="安徽省">安徽省</option>
  <option value="陕西省">陕西省</option>
</select>
市：
<select>
  <option value="西安市">西安市</option>
</select>
区：
<select>
  <option value="雁塔区">高新区</option>
</select>

8.1、分组下拉列表¶

TIP： 在下拉列表中实现分组显示，最佳实践

第一项通常是提示项（禁用并选中）

考虑使用 <optgroup>分组

<label for="country">国家：</label>
<select id="country" name="country" required>
  <option value="" disabled selected>请选择国家</option>
  <optgroup label="亚洲">
    <option value="CN">中国</option>
    <option value="JP">日本</option>
  </optgroup>
  <optgroup label="欧洲">
    <option value="FR">法国</option>
    <option value="DE">德国</option>
  </optgroup>
</select>

![[Pasted image 20260127174450.png]]¶

9、多行文本框¶

TIP：

<textarea>表示多行文本框

有 rows和 cols属性，用于定义多行文本框的行数和列数

用户评论： <textarea cols="100" rows="10"></textarea>

10、按钮¶

标签	属性	描述
`<input>`	`type="button"`	普通按钮，也可以简写为 `<button></button>`
`<input>`	`type="submit"`	提交按钮
`<input>`	`type="reset"`	重置按钮

<button>我是一个button标签，是一个普通按钮</button>
<input type="button" value="我是一个普通按钮" />
<input type="submit" value="提交表单信息" />
<input type="reset" value="重 置" />

总结：常用表单控件¶

标签	type 属性	描述
`<input>`	`text`	单行文本框
`<input>`	`radio`	单选按钮
`<input>`	`checkbox`	复选框
`<input>`	`password`	密码框
`<input>`	`button`	普通按钮，也可以简写为 `<button></button>`
`<input>`	`submit`	提交按钮
`<input>`	`reset`	重置按钮
![[Pasted image 20260127174515.png]]