HTML 表单元素

HTML <form> 元素可以包含以下一个或多个表单元素：

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

<input> 元素

最常用的表单元素之一是 <input> 元素。

元素可以通过 <input> 多种方式显示，具体取决于 type 属性。

示例

<form action="/third/http.php" method="GET">
  <label for="fname">名字：</label>
<input type="text" id="fname" name="fname"> 
  <input type="submit" value="提交">
</form>尝试一下一键复制

<label> 元素

<label> 元素定义了几个表单元素的标签。

<label> 元素对屏幕阅读器用户很有用，因为当用户关注输入元素时，屏幕阅读器会大声读出标签。

<label> 元素还可以帮助难以单击非常小的区域（例如单选按钮或复选框）的用户 - 因为当用户单击 <label> 元素内的文本时，它会切换单选按钮/复选框。

标签的 for 属性 <label> 应该等于元素的 id 属性 <input> 才能将它们绑定在一起。

<select> 元素

该 <select> 元素定义了一个下拉列表：

示例

<label for="cars">选择一辆车：</label>
<select id="汽车" name="汽车">
  <option value="volvo">沃尔沃</option>
 
 <option value="saab">萨博</option>
  <option value="fiat">法币</option>
  
 <option value="audi">奥迪</option>
</select>尝试一下一键复制

这些 <option> 元素定义了一个可以选择的选项。

默认情况下，下拉列表中的第一项被选中。

要定义预选选项，请将 selected 属性添加到选项：

示例

<option value="fiat" selected>菲亚特</option>尝试一下一键复制

有效值：

使用 size 属性指定可见值的数量：

示例

<label for="cars">选择一辆车：</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">沃尔沃</option>

  
 <option value="saab">萨博</option>
  <option value="fiat">法币</option>

  
 <option value="audi">奥迪</option>
</select>尝试一下一键复制

允许多选：

使用该 multiple 属性允许用户选择多个值：

示例

<label for="cars">选择一辆车：</label>
<select id="cars" name="cars" size="4" 多个>
  <option value="volvo">沃尔沃</option>

  
 <option value="saab">萨博</option>
  <option value="fiat">法币</option>

  
 <option value="audi">奥迪</option>
</select>尝试一下一键复制

<textarea> 元素

该 <textarea> 元素定义了一个多行输入字段（一个文本区域）：

示例

<textarea name="message" rows="10" cols="30">
猫在花园里玩耍。
</textarea>尝试一下一键复制

该 rows 属性指定文本区域中可见的行数。

该 cols 属性指定文本区域的可见宽度。

这就是上面的 HTML 代码在浏览器中的显示方式：

猫在花园里玩耍。

您还可以使用 CSS 定义文本区域的大小：

示例

<textarea name="message" 
  style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>尝试一下一键复制

<button> 元素

该 <button> 元素定义了一个可点击的按钮：

示例

<button type="button" 
 onclick="alert('Hello World!')">Click Me!</button>尝试一下一键复制

这就是上面的 HTML 代码在浏览器中的显示方式：

<button type="button"

onclick="alert('Hello World!')">Click Me!</button> 

始终指定 type 按钮元素的属性。不同的浏览器可能对按钮元素使用不同的默认类型。

<fieldset> 和 <legend> 元素

<fieldset> 元素用于对表单中的相关数据进行分组。

<legend> 元素定义了该元素的标题 <fieldset> 。

示例

<form action="/third/http.php">
  <fieldset>
    
  <legend>Personalia:</legend>
    <label for="fname">First 
  name:</label><br>
    <input type="text" id="fname" name="fname" 
  value="John"><br>
    <label for="lname">Last name:</label><br>
    
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
    
  <input type="submit" value="Submit">
  </fieldset>
</form>尝试一下一键复制

这就是上面的 HTML 代码在浏览器中的显示方式：

Personalia:

First name:

Last name:

<datalist> 元素

<datalist> 元素指定元素的预定义选项列表 <input> 。

用户在输入数据时将看到预定义选项的下拉列表。

元素的 list 属性 <input> ，必须引用元素的 id 属性 <datalist> 。

示例

<form action="/third/http.php">
  <input list="browsers">
  <datalist id="browsers">
     <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
  <option value="Opera">
   <option value="Safari">
 </datalist> 
</form>尝试一下一键复制

<output> 元素

<output> 元素表示计算的结果（如脚本执行的计算）。

示例

执行计算并将结果显示在输出元素中:

<form action="/third/http.php"  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0

     
    <input type="range"  id="a" name="a" value="50">
  100 +

     
    <input type="number" id="b" name="b" value="50">
  =

     
    <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">

 </form>尝试一下一键复制