HTML 表单元素

这章描述了HTML表单的全部元素.

<input>元素

表单最重要的元素是<input>元素.

<input>元素有许多变化,取决于type属性.

所有input的type属性会在下一章讲解..

<select>元素(下拉列表)

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

例子

<select name="cars">
  <option value="tableTennis">乒乓球</option>
  <option value="basketball">篮球</option>
  <option value="football">足球</option>
  <option value="rugby">橄榄球</option>
</select>

<option>元素定义下拉框的选项.

默认情况下显示第一项.

你也可以用selected属性来指定哪一项作为默认选项.

例子

<select name="cars">
  <option value="tableTennis">乒乓球</option>
  <option value="basketball" selected>篮球</option>
  <option value="football" >足球</option>
  <option value="rugby">橄榄球</option>
</select>

<textarea>元素

<textarea>元素定义多行文本框:

例子

<textarea name="message" rows="10" cols="30">
猫在花园里玩.
</textarea>

下面是显示结果:

<button>元素

<button>一个可点击的按钮:

例子

<button type="button" onclick="alert('你好啊!')">单击我!</button>

下面是解析结果:

HTML5表单元素

HTML5里新增加了些表单元素:

<datalist>
<keygen>
<output>

默认情况下,浏览器不会显示未知元素.新的元素不会破坏你的页面.

HTML5 <datalist>元素

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

当用户输入数据时将看见预定义好的下拉列表项.

<input>元素的list属性,必须指定到<datalist>元素的id属性.

例子

<input>元素和<datalist>使用例子:

<form action="action_page.php">
  <input list="fruit">
  <datalist id="fruit">
    <option value="苹果">
    <option value="香蕉">
    <option value="葡萄">
    <option value="火龙果">
    <option value="橘子">
  </datalist> 
</form>

HTML5 <keygen>元素

<keygen>元素的目的在于提供一个验证用户的安全方法.

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

当表单提交时,将会生成两把钥匙,一把是私钥,一把是公钥.

私钥会存储在本地,公钥会发送给服务器.

公钥可以在以后用来生成一个客户端证书来验证用户.

例子

带有keygen域的表单:

<form action="action_page.php">
  用户名: <input type="text" name="user">
  加密: <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>

HTML 表单元素

=在HTML5里的新元素.

标签名	描述
<form>	定义HTML表单给用户录入信息
<input>	定义输入元素
<textarea>	定义多行文本输入域
<label>	定义<input>元素的标签
<fieldset>	对表单相关元素进行分组
<legend>	给<fieldset>标签定义标题
<select>	定义下拉列表
<optgroup>	给下拉列表框里的选项进行分组
<option>	定义下拉列表框中的选项
<button>	定义一个可单击的按钮
<datalist>	给input输入框指定一个预定义好的选项列表
<keygen>	给表单定义一对秘钥生成器字段
<output>	给计算定义结果

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索