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 代码在浏览器中的显示方式：

</pre>