HTML5表单元素

最新推荐文章于 2022-09-16 14:59:18 发布

原创最新推荐文章于 2022-09-16 14:59:18 发布 · 660 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#form元素 #input元素 #select元素 #textarea元素 #button元素

HTML学习笔记专栏收录该内容

19 篇文章

订阅专栏

--表单是HTML中获取用户输入的手段，对于web应用系统及其重要，但是HTML定义的功能落后于表单的使用方式已经有很多年了。

--HTML5中，整个表单已经彻底改变过了，标准的步伐已经跟上表单的应用实践。

HTML表单用于收集不同类型的用户输入。

像下图这些都是表单。

<form>元素

HTML表单用于收集用户输入

<form>元素定义HTML表单，用于为用户输入创建HTML表单：

<form>
 .
form element;
 .
</form>

<form>元素的两个属性action属性和method属性

action属性

action属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到web服务器上的网页。

<!-- 指定某个服务器脚本来处理被提交表单 -->
<form action="action_page.php">

如果省略action属性，则action会被设置为当前页面。

method属性

method属性规定在提交表单时所用的HTTP方法（GET或POST）：

<form action="action_page.php" method="GET">
<!-- 或 -->
<form action="action_page.php" method="POST">

何时使用get

我们可以使用get（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当使用get时，表单数据在页面地址栏是可见的：

注释：get最适合少量数据的提交。浏览器会设定容量限制。

何时使用post

我们应该使用post：

如果表单正在更新数据，或者包含敏感信息（例如密码）

post的安全性更强，因为页面地址栏中被提交的数据是不可见的。

HTML表单包含表单元素

表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等

<input>元素

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

<input>元素根据不同的type属性，可以变化为多钟形态。

<input>元素用于收集用户信息

<input>元素的两个属性name属性和type属性

name属性

name属性规定input元素的名称。

name属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过JavaScript引用表单数据。

注释：只有设置了name属性的表单元素才能在提交表单时传递它们的值。因此如果要正确的被提交，每个输入字段必须设置一个name属性值。

<!-- 带有两个文本字段和一个提交按钮的 HTML 表单 -->
<form action="http://www.w3school.com.cn/form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" /></p>
  <p>Email: <input type="text" name="email" /></p>
  <input type="submit" value="Submit" />
</form>

type属性

type属性规定input元素的类型。

详见下一篇博文。

<select>元素（下拉列表）

<select>元素定义下拉列表

<form action="http://www.w3school.com.cn/demo/demo_form.asp">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br /><br />
  <input type="submit">
</form>

<option>元素

<option>元素定义待选择的选项

列表通常会把首个选项显示为被选选项

我们可以通过添加selected属性来定义预定义选项

<form action="http://www.w3school.com.cn/demo/demo_form.asp">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>  <!-- 此处添加selected属性 -->
    <option value="audi">Audi</option>
  </select>
  <br /><br />
  <input type="submit">
</form>

<textarea>元素

<textarea>元素定义多行输入字段（文本域）

<form>
  <textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
  </textarea>
</form>

<button>元素

<button>元素定义可点击的按钮

注释：如果在表单中使用button元素，不同的浏览器会提交不同的按钮值（Internet Explorer会提交<button>与</button>之间的文本，而其他浏览器将提交value属性的内容）。所以应该使用input元素在HTML表单中创建按钮

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

HTML5表单元素

HTML5增加了如下表单元素：

--<datalist>

--<keygen>

--<output>

HTML5 <datalist>元素

<datalist>元素为<input>元素规定预定义选项列表

用户会在他们输入数据时看到预定义选项的下拉列表

<input>元素的list属性必须引用<datalist>元素的id属性

<form>
  <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>
</form>