跳到主要内容

HTML 表单元素

提示
  1. 表单元素种类：HTML表单元素包括文本框、复选框、下拉菜单、提交按钮等，用于存储用户输入。
  2. <input>和<label>标签：<input>定义数据输入字段，<label>为表单元素创建标题。
  3. 其他表单元素：包括<button>、<select>、<option>、<optgroup>、<textarea>、<fieldset>、<legend>、<datalist>和<output>标签，各有不同的用途和功能。

HTML 表单元素用于存储用户输入。有不同类型的表单元素，如文本框、复选框、下拉菜单、提交按钮等。例如，

<form>
  <label for="name">姓名：</label>
  <input type="text" name="name" /><br /><br />
  <label for="sex">性别：</label>
  <input type="radio" name="sex" id="male" value="male" />
  <label for="male">男</label>
  <input type="radio" name="sex" id="female" value="female" />
  <label for="female">女</label> <br /><br />
  <input type="submit" value="提交" />
</form>

浏览器输出

HTML 表单及其输入元素示例

这里，<input> 和 <label> 都是 HTML 表单元素。

HTML 表单元素​

HTML 提供了各种表单元素，用于不同类型的输入。HTML5 中可用的表单元素包括：

  • HTML <input> 标签
  • HTML <label> 标签
  • HTML <button> 标签
  • HTML <select>、<option> 和 <optgroup> 标签
  • HTML <textarea> 标签
  • HTML <fieldset> 标签
  • HTML <legend> 标签
  • HTML <datalist> 标签
  • HTML <output> 标签

HTML <input> 标签​

HTML <input> 标签定义了用户可以输入数据的字段。例如，

<input type="text" name="firstname" />

浏览器输出

HTML 输入标签

这里，

  • type - 决定了 <input> 标签接受的输入类型
  • name - 指定输入的名称

要了解更多关于 HTML 输入标签及其类型，请访问 HTML 输入标签。

HTML <label> 标签​

HTML label 标签用于为表单元素创建标题。<label> 标签内的文本显示给用户。

<label for="firstname">名字</label>
<input type="text" name="firstname" id="firstname" />

浏览器输出

带有 label 标签的 HTML 输入标签

for 属性用于将标签与表单元素关联。for 属性的值设置为表单元素的 id，在上面的示例中为 firstname。

HTML 表单元素

HTML Label 主要用于辅助功能，因为屏幕阅读器会读出与字段关联的标签，它还可以提升用户体验，因为点击标签也会聚焦到输入字段。

这在小屏幕上也非常有帮助，因为它使像聚焦输入、选择复选框、选择单选框等操作更容易进行。

HTML <button> 标签​

HTML 的 <button> 元素是一个交互式元素，用户可以通过鼠标、键盘、手指、语音命令或其他辅助技术激活它。 它执行可编程动作，例如提交表单或点击时打开对话框。例如，

<button type="button">点击我</button>

浏览器输出 HTML button 标签

type 属性决定点击按钮时执行的动作。它有 3 个可能的值：

  • submit

如果 type 的值是 submit，按钮点击动作将提交表单。例如，

<form>
  <label for="name">姓名：</label>
  <input type="text" name="name" /><br /><br />
  <button type="submit">提交</button>
</form>

浏览器输出 HTML button type submit

  • reset

如果 type 的值是 reset，按钮点击动作将重置所有表单元素的值为初始值。例如，

<form>
  <label for="name">姓名：</label>
  <input type="text" name="name" /><br /><br />
  <button type="reset">重置</button>
</form>

浏览器输出（重置前） HTML button type reset before

浏览器输出（重置后）

HTML button type reset

  • button

如果 type 的值是 button，按钮点击动作没有默认功能。通常使用 javascript 为这类按钮添加功能。例如，

<button type="button">点击我</button>

浏览器输出

HTML button type button

HTML <select>、<option> 和 <optgroup> 标签​

HTML 的 <select> 标签用于创建选项菜单。每个选项由 <option> 标签表示。例如，

<label for="pets">宠物：</label>
<select id="pets">
  <option value="dog">狗</option>
  <option value="cat">猫</option>
</select>

浏览器输出

HTML Select 标签

浏览器输出

HTML Select 标签打开

此外，我们还可以在 <optgroup> 标签内对选项元素进行分组，以创建选项组。例如，

<label for="pets">宠物：</label>
<select id="pets">
  <optgroup label="哺乳动物">
    <option value="dog">狗</option>
    <option value="cat">猫</option>
  </optgroup>
  <optgroup label="昆虫">
    <option value="spider">蜘蛛</option>
    <option value="ants">蚂蚁</option>
  </optgroup>
  <optgroup label="鱼">
    <option value="goldfish">金鱼</option>
  </optgroup>
</select>

浏览器输出

HTML Select 标签及选项分组

HTML <textarea> 标签​

HTML 的 <textarea> 标签用于定义可自定义的多行文本输入字段。例如，

<textarea rows="10" cols="30"> 输入一些内容…</textarea>

浏览器输出

![HTML textarea 标签](img/html-form-input

s-textarea.png)

这里，rows 和 cols 属性表示文本字段的行数和列数。

HTML <fieldset> 标签​

HTML 的 <fieldset> 标签用于对类似的表单元素进行分组。它是一个展示性标签，不会影响表单中的数据。例如，

<form>
  <fieldset>
    <label for="firstname">名：</label><br />
    <input type="text" id="firstname" name="fname" /><br />
    <label for="lastname">姓：</label><br />
    <input type="text" id="lastname" name="lname" /><br />
  </fieldset>
</form>

浏览器输出

HTML fieldset 标签

这里，边框来自 <fieldset> 元素。

HTML <legend> 标签​

HTML 的 <legend> 标签是另一个展示性标签，用于给 <fieldset> 元素添加标题。它的作用类似于 HTML 的 <label> 标签。例如，

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

浏览器输出

HTML legend 标签

HTML <datalist> 标签​

<datalist> 标签定义了 <input> 元素的预定义选项列表。它用于为表单元素提供自动完成选项，当用户填写表单时显示为推荐选项。例如，

<label for="country-choice">选择国家：</label>
<input list="country-options" id="country-choice" name="country-choice" />
<datalist id="country-options">
  <option value="Australia"></option>
  <option value="Austria"></option>
  <option value="America"></option>
  <option value="Nepal"></option>
</datalist>

浏览器输出

HTML Datalist 标签

这里，当用户输入 au 时，浏览器会向用户推荐以这些字母开头的选项。

HTML <output> 标签​

HTML <output> 标签是一个容器元素，用于存储通常使用 javascript 执行的计算结果。例如，

<form>
  <input type="number" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b"></output>
</form>
<script>
  const output = document.getElementsByName("result")[0];
  const inputA = document.getElementById("a");
  const inputB = document.getElementById("b");
  output.innerText = Number(inputA.value) + Number(inputB.value);
</script>

浏览器输出

HTML Output 标签

<output> 标签的 for 属性接受所有用于计算的输入的空格分隔值。你可以注意到我们在 for 中使用了 a b。这是为了表示 <output> 标签内的输出是使用输入 a 和 b 生成的。

<output> 内的值通常由 Javascript 生成并填充到元素内。这里，我们计算了两个输入的和，并将其插入到 <output> 元素内。

最后于 更新