HTML表单的简单了解

  本文来源于饥人谷相关资料以及W3C教程，内容主要选择常用html表单内容

简介及引言：

HTML表单是一个包含表单元素的区域，用来收集用户输入的内容并提交。
表单使用标签<form>来设置

HTML 表单包含表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
脉络逻辑：
表单--->重要元素--->次级重要属性

重要元素:

1. input元素:

  语法：
      <input type="xxxx" name="xxx" 其他属性>
     type 属性的常用选择：
                   —text
                   —password
                   —submit
                   —radio
                   —checkbox
                   —button

2. select元素和嵌套的option元素:

  <select name="number">
   <option value="123">1</option>
   <option value="456">2</option>
   <option value="879">3</option>
   <option value="000">4</option>
   </select>

3. button元素:

  <button type="button" onclick="alert('Hello World!')">Click Me!</button>

---

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

常见input标签及其作用：

   <input type="text">:定义用于文本输入的单行输入字段（默认宽度为20个字符）
   <input type="password">:定义密码字段
   <input type="radio">:定义单选按钮，允许用户在有限数量的选项中选择一个
   <input type="checkbox">:定义复选框
   <input type="submit">:定义用于向表单处理程序提交表单的按钮。
   <input type="button">:定义按钮
   <input type="number">:用于应该包含数字值的输入字段
   <input type="date">:用于应该包含日期的输入字段
   <input type="color">:用于应该包含颜色的输入字段，根据浏览器支持，颜色选择器会出现输入字段中。

特别注意的一个类型：

type=hidden 
通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。 
总之，你在页面中是看不到hidden在哪里。最有用的是hidden的值。 
<form name="form1"> 
your hidden info here: 
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com"> 
</form> 
<script> 
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value) 
</script> 

（举例:这个属性常常被用在表单提交时生成一个随机的码，服务器可以根据这个码验证请求是否过期，用于防止恶意的多次请求发送。）