HTML表单元素



<input> 元素

最重要的表单元素 <input> 元素。

<input>元素可以以多种方式显示,这取决于类型属性。

所有不同的输入类型都包含在下一章中。


<select> 元素

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

<form action="action_page.php">
  <select name="cars">
    <option value="volvo">沃尔沃</option>
    <option value="bmw">宝马</option>
    <option selected value="benz">奔驰</option>
    <option value="audi">奥迪</option>
  </select>
  <br><br>
  <input type="submit">
</form>

让我试试

<option> 元素定义可选择的选项。

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

若要定义预选选项,请将所选属性添加到选项中:

<form action="action_page.php">
  <select name="cars">
    <option value="volvo">沃尔沃</option>
    <option value="bmw">宝马</option>
    <option value="benz">奔驰</option>
    <option selected value="audi">奥迪</option>
  </select>
  <br><br>
  <input type="submit">
</form>

让我试试


<textarea> 元素

<textarea> 元素定义多行输入字段(文本区域):

<form action="action_page.php">
  <textarea name="message" rows="10" cols="30">这只猫正在花园里玩.</textarea>
  <br>
  <input type="submit">
</form>

让我试试

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

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


<button> 元素

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

<button type="button"
  onclick="alert('Hello World!')">点击我!</button>

让我试试


HTML5 表单元素

HTML5 添加以下表单元素:

  • <datalist>
  • <keygen>
  • <output>

注意:浏览器不显示未知元素。旧浏览器不支持的新元素不会“破坏”您的网页。


HTML5 <datalist> 元素

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

用户将看到一个下拉列表的预定义选项,作为他们输入数据。

<input>元素的列表属性,必须参照<datalist>元素的ID属性。

<form action="action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

让我试试


HTML5 <keygen> 元素

<keygen> 元素的目的是提供一个安全的方式来验证用户。

<keygen> 元素指定表单中的密钥对生成器字段。

提交表单时,生成两个密钥,一个是私有的,另一个是公共的.。

私钥存储在本地,公钥被发送到服务器。

公钥可用于生成客户端证书以在将来对用户进行身份验证。

<form action="action_page.php">
  用户名: <input type="text" name="user">
  <br><br>
  加密: <keygen name="security">
  <br><br>
  <input type="submit">
</form>

让我试试


HTML5 <output> 元素

<output> 元素表示计算的结果(如由脚本执行的计算结果)。

<form action="action_page.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> 定义一个输入控件
<textarea> 定义一个多行输入控件(文本区)
<label> 定义了一个标签为 <input> 元素
<fieldset> 分组表单中的相关元素
<select> 定义一个下拉列表
<optgroup> 在下拉列表中定义一组相关选项.
<option> 定义一个下拉列表中的选项
<button> 定义一个可点击的按钮
<datalist> 指定输入控件的预定义选项列表.
<keygen> 定义密钥对生成器字段(用于表单)
<output> 定义计算的结果