HTML 表单元素

表单元素是HTML中用于收集用户输入的各种控件。了解每种元素的特点和用法是创建交互式表单的基础。

<input> 元素

最重要的表单元素，用于创建各种类型的输入控件。

<input type="text" name="username" placeholder="请输入用户名">

<label> 元素

为输入元素定义标签，提高可访问性。

<!-- 方式1：label包含input -->
<label>
    <input type="checkbox" name="agree"> 同意协议
</label>

<!-- 方式2：通过for属性关联 -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

为什么需要label？

点击label时，关联的input会自动获得焦点
屏幕阅读器会正确朗读表单
符合可访问性标准

<select> 元素

创建下拉选择框。

<label for="country">国家：</label>
<select id="country" name="country">
    <option value="cn">中国</option>
    <option value="us">美国</option>
    <option value="jp">日本</option>
</select>

<textarea> 元素

创建多行文本输入区域。

<label for="message">留言：</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

<button> 元素

创建可点击的按钮。

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

<fieldset> 和 <legend>

对表单元素进行分组。

<fieldset>
    <legend>个人信息</legend>
    <label>姓名：<input type="text" name="name"></label>
    <label>邮箱：<input type="email" name="email"></label>
</fieldset>