HTML 表单元素

本页内容
上一节: HTML_Form属性 下一节: HTML_表单Input类型


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:





<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>
上一节: HTML_Form属性 下一节: HTML_表单Input类型
此页面最后编辑于2022年8月14日 (星期日) 21:37。