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>

让我试试