HTML表单元素

HTML表单元素

网页上的HTML表单允许用户输入发送到处理服务器数据。 表格可以像纸或数据库的形式，因为网络用户填写使用复选框，单选按钮或文本字段的形式。

例如，形式可以用于进入运输或信用卡数据订购产品，或可用于检索的搜索引擎的搜索结果。

本章将介绍HTML表单元素。

所述<input>元

最重要的形式的元素是<input>元素。

所述<input>元件可以以多种方式变化，这取决于该type属性。

所述<select>元素(Drop-Down List)

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

所述<option>元素定义来选择的选项。

作为选择的列表将正常显示的第一个项目。

您可以添加一个选择属性来定义一个预定义的选项。

所述<textarea>元素

所述<textarea>元素定义了多行输入字段( a text area ) ：

这是怎样的HTML代码中会在浏览器中显示：

猫在花园里玩。

所述<button>元

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

这是怎样的HTML代码中会在浏览器中显示：

点击查看！

HTML5表单元素

HTML5加入下列形式元素：

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

HTML5 <datalist>元

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

用户将看到预先定义的选项，因为他们输入数据的下拉列表。

的list的属性<input>元素，必须参照id的属性<datalist>元素。

例

一个<input>在一个元件与预定义值<datalist> ：

<form action="action_page.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>

试一试»

HTML5 <keygen>元

所述的目的<keygen>元件是提供来验证用户的安全方式。

所述<keygen>元素指定的形式的密钥对发生器字段。

当提交表单时，会生成两个密钥，一个私钥，一个公钥。

私钥存储在本地，而公钥发送给服务器。

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

例

甲形式与密钥生成字段：

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

试一试»

HTML5 <output>元

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

例

执行计算并显示结果在<output>元素：

<form action="action_page.asp"
  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>

试一试»

测试自己与练习！

练习1» 练习2» 练习3»

HTML表单元素

=新的HTML5。