HTML 表单元素

HTML 表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的元素,最主要的作用就是收集信息。表单元素是页面中不可缺少的元素,本章来讲解这些表单用用法。


<input> 元素

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

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


<select> 元素(下拉列表)

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <form action="/example/html/html_form.aspx">
  5. <select name="cars">
  6. <option value="volvo">沃尔沃</option>
  7. <option value="saab">萨博</option>
  8. <option value="fiat">菲亚特</option>
  9. <option value="audi">奥迪</option>
  10. </select>
  11. <br><br>
  12. <input type="submit">
  13. </form>
  14. </body>
  15. </html>

<option> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。您能够通过添加 selected 属性来定义预定义选项。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>您可以通过 selected 属性预选择某些选项。</p>
  5. <form action="/example/html/html_form.aspx">
  6. <select name="cars">
  7. <option value="volvo">沃尔沃</option>
  8. <option value="saab">萨博</option>
  9. <option value="fiat" selected>菲亚特</option>
  10. <option value="audi">奥迪</option>
  11. </select>
  12. <br><br>
  13. <input type="submit">
  14. </form>
  15. </body>
  16. </html>

<textarea> 元素

<textarea> 元素定义多行输入字段(文本域):

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <textarea name="message" rows="10" cols="30">
  5. 猫在花园里玩。
  6. </textarea>
  7. </body>
  8. </html>

<button> 元素

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <button type="button" onclick="alert('Hello World!')">点击我!</button>
  5. </body>
  6. </html>

HTML5 表单元素

HTML5 增加了如下表单元素:<datalist><keygen><output>注释:默认地,浏览器不会显示未知元素。新元素不会破坏您的页面。


HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。

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

实例

通过 <datalist> 设置预定义值的 <input> 元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <form action="/example/html/html_form.aspx">
  5. <input list="browsers" name="browser">
  6. <datalist id="browsers">
  7. <option value="Internet Explorer">
  8. <option value="Firefox">
  9. <option value="Chrome">
  10. <option value="Opera">
  11. <option value="Safari">
  12. </datalist>
  13. <input type="submit">
  14. </form>
  15. <p><b>注释:</b>Safari 或 IE9(以及更早的版本)不支持 datalist 标签。</p>
  16. </body>
  17. </html>