HTML 表单元素
内容摘要
本章写的所有 HTML 表单元素。
文章正文
本章写的所有 HTML 表单元素。
以上 HTML 代码在浏览器中显示为：
<input> 元素
最重要的表单元素是 <input> 元素。
<input> 元素根据不同的 type 属性，可以变化为多种形态。
注释：下一章讲解所有 HTML 输入类型。
<select> 元素（下拉列表）
<select> 元素定义下拉列表：
实例
1 2 3 4 5 6 | <select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select> |
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。
实例
1 | <option value="fiat" selected>Fiat</option> |
<textarea> 元素
<textarea> 元素定义多行输入字段（文本域）：
实例
1 2 3 | <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea> |
1 | The cat was playing in the garden. |
<button> 元素
<button> 元素定义可点击的按钮：
实例
1 | <button type="button" onclick="alert('Hello World!')">Click Me!</button> |
以上 HTML 代码在浏览器中显示为：
HTML5 表单元素
HTML5 增加了如下表单元素：
- <datalist>
- <keygen>
- <output>
注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。
HTML5 <datalist> 元素
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
实例
通过 <datalist> 设置预定义值的 <input> 元素：
1 2 3 4 5 6 7 8 9 10 | <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> |
代码注释
作者：喵哥笔记
