HTML 5表单相关的元素和属性

1.HTML 5原有的表单及表单控件

form元素
用于生成输入表单，该元素不会生成可视化部分。在HTML 5规范以前，其他表单控件，如单行文本框、多行文本框、单选按钮、复选框等都需要放在form元素之内。该元素可指定id、style、class等核心属性，还可以指定onclick等事件属性。除此之外还可指定action、method、enctype、name、target。
其中的method属性非常重要，它指定了该表单提交请求的方式，表单默认以GET方式提交请求。
input元素
该元素是表单控件元素中功能最丰富的，如下几种输入元素都是通过input元素生成的。该元素可以指定id、style、class等核心属性，也可指定onclick等事件属性，还可指定onfocus、onblur等焦点事件属性。除此之外，还可指定checked、disabled、maxlength、readonly、size、src、width、height。
使用label定义标签
该元素用于在表单元素中定义标签，这些标签可以对其他可生成请求参数的表单控件元素（如单行文本框、密码框等）进行说明，label元素不需要生成请求参数，因此不要为label元素指定value属性值。
代码如下：

  <form action="http://www.crazyit.org" method="get"   border-top="20">
  单选文本框：<input type="text" id="username" name="username" placeholder="请输入用户名" /><br />
  不可编辑的文本框：<input type="text" id="username" name="username"  readonly="readonly" placeholder="请输入用户名" /><br />
  <label>密码：<input type="password"  name="password" id="password" placeholder="请输入密码" /></label><br />
  隐藏域：<input type="hidden" name="hiden" id="hiden" /><br />
  第一组单选框：<br />
  红：<input type="radio" name="color" id="color" value="red"/>
  绿：<input type="radio" name="color" id="color2" value="green"/>
  蓝：<input type="radio" name="color" id="color3" value="blue"/><br />
  第二组单选框：<br />
  男性：<input type="radio" name="gender" id="gender" value="male" />
  女性：<input type="radio" name="gender" id="gender1" value="female" /><br />
  两个复选框：<br />
  <input type="checkbox" name="website" id="website" value="leegang.org" />
  <input type="checkbox" name="website" id="website1" value="crazyit.org" /><br />
  文件上传域：<input type="file" name="file" id="file" /><br />
  图像域：<input type="image" src="前端/2.jpg" alt="感悟" width="27" height="31" /><br />
  下面是四个按钮：<br />
  <input type="submit"  name="ok" id="ok" value="提交" />
  <input type="submit"  name="dis" id="dis" value="提交"  disabled />
  <input type="reset"  name="cancel" id="cancel" value="重填" />
  <input type="button"  name="no" id="no" value="无动作" /><br />
  简单多行文本域：<br />
  <textarea name="tet1" cols="20" rows="2"></textarea><br />
  只读多行文本域：<br />
  <textarea name="tet2" cols="28" rows="4" readonly>

运行上述代码可得下图：------------------↓↓↓↓↓

让标签和表单控件关联有两种方式：
隐式使用for属性：指定label元素的for属性值为所关联表单控件的id属性值。
显式关联：将普通文本、表单控件一起放在label元素内部即可。
代码如下：

```
<form action ="http://www.crazyit.org" method="get">
      <label for="username">单行文本框：</label>
      <input id="username" name="username" type="text" /><br />
      <label>密码框:<input id="password" name="password" type="password" />
      </label><br />
      <input id='ok' type="submit" value="登录疯狂java联盟" />
 </form>

运行上述代码可得下图：------------------↓↓↓↓↓

2.使用button定义按钮

该元素用于定义一个按钮，在button元素的内部可以包含普通文本、文本格式化标签、图像等内容，这也是button按钮和input按钮的不同之处。该元素可以指定id、style、class等核心属性，还可指定onclick等实践响应属性。除此之外，还可指定disabled、name、type、value。

<form action ="" method="get">
          
          <button type="button"><b>提交</b><br>
          
          <button type="submit"><img="前端\2.jpg" alt="crazyit.org" /><button><br>
     </form>

3.select与option元素

select元素用于创建列表框或下拉菜单，该元素必须和option元素结合使用。每个哦option元素代表一个列表项或菜单项。该元素可以指定id、style、class等核心属性，该元素仅可以指定onchange事件属性——当该列表框或下拉列表内的选中项发生改变时，触发onchange事件。除此之外，select元素还可指定disabled、multiple、size。
在select元素里，只能包含如下两种子元素。
option标签：用于定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项的文本。
optgroup：用于定义列表项或菜单项组。该元素里只能包含option子元素，处于optgroup里的option就属于该组。

<form action="" method="post">
   下面是简单的下拉菜单：<br />
   <select id="skills" name="skills">
      <option value="java">java语言</option>
	  
	  <option value="c">c语言</option>
	  <option value="ruby">ruby语言</option>
	  </select><br /><br /><br />
	 下面是允许多选的列表框：<br />
	 <select id="books" name="books" multiple="multiple" size="4">
	 <option value="java">java语言</option>
	 <option value="android">疯狂Android讲义</option>
	 <option value="ee">轻量级 java EE企业应用实战</option>
	 </select><br />
	 下面是允许多选的列表框：<br />
	 <select id="leegang" name="leegang" multiple size="6">
	 <optgroup label="疯狂java体系图书">
	 <option value="java">java语言</option>
	 <option value="android">疯狂Android讲义</option>
	 <option value="ee">轻量级 java EE企业应用实战</option>
	 </optgroup>
	 <optgroup label="其他图书">
	 <option value="struts">Struts</option>
	 <option value="ror">ror</option>
	 </optgroup>
	 </select><br />
	 <button type="submit"><b>提交</b></button><br />
	 </form>

运行上述代码可得下图：------------------↓↓↓↓↓

4.HTML 5增强的textarea

  <form action="" method="post">
  简单多行文本域：<br />
  <textarea name="tet1" cols="20" rows="2"></textarea><br />
  只读多行文本域：<br />
  <textarea name="tet2" cols="28" rows="4" readonly>
  疯狂java讲义
  轻量级java EE企业应用实战
  </textarea><br />
  <button type="submit"><b>提交</b><button><br />
  </form>
  

运行上述代码可得下图：------------------↓↓↓↓↓

5.fieldset与legend元素

<form method="post" >
   <fieldset name="basic">
   <legend>基本信息</legend>
   用户名：<input type="text" name="username" id="username" /><p>
   密码:<input type="password" name="password" id="password" autofocus placeholder="密码" autocomplete="off" />
   </fieldset>
   <fieldset  name="axtra">
   <legend>附加信息</legend>
   身高：<input type="text" name="height" id="height" /><p>
   出生地：<input type="text" name="birth" id="birth" /><p>
   毕业学校：<input  type="text" name="school" id="school" />
   </fieldset>
   <input type="submit" name="ok" id="ok"  value="提交" /><br />
   </form>

运行上述代码可得下图：------------------↓↓↓↓↓

6.HTML 5新增的表单属性

form属性 formaction属性 formxxx属性 autofocus属性 placeholder属性
list属性 autocomplete属性 等等…

<form>
 <input type="color" name="color1" id="color1" value="color" onchange="a.value=this.value;" />
    <output name="a" for="color1"></output><p>
	<input name="range11" type="range" id="range11" min="0" max="100" step="5" onchange="b.value=this.value;" />
	<output name="b" for="range11"></output><p>
	<input type="submit" value="提交" /><br />
	
	
	type="color"的文本框：<br /><input name="color" type="color" /><p>
	type="date"的文本框：<br /><input name="date" type="date"  required pattern="/d(3)-/d(5)" /><p>
	type="time"的文本框：<br /><input name="time" type="time" /><p>
	type="datetime-local"的文本框：<br /><input name="datetimt-local" type="datetime-local" /><p>
	
	type="month"的文本框：<br /><input name="month" type="month" /><p>
	type="week"的文本框：<br /><input name="week" type="week" /><p>
	type="email"的文本框：<br /><input name="email" type="email"  multiple /><p>
	type="tel"的文本框：<br /><input name="tel" type="tel" /><p>
	
	type="url"的文本框：<br /><input name="url" type="url" /><p>
	type="number"的文本框：<br /><input name="number" type="number" min="0" max="100" step="5" /><p>
	type="range"的文本框：<br /><input name="range" type="range" min="0" max="100" step="5" /><p>
	type="search"的文本框：<br /><input name="search" type="search" /><p>
	
	<input type="submit" value="提交" /><br />
	</form>

运行上述代码可得下图：------------------↓↓↓↓↓

<form>
请输入图书：<input type="text" name="book" id="book" list="books" /><p>
   <input type="submit" value="购买" /><br />
   <label id="nameLb">姓名:
   <input type="text" name="name" /></label><p>
   <input type="submit" value="提交" />
   <input type="button" value="重设" onclick="document.getElementById('nameLb').control.value='crazyit';"/><br />
   
   <label>姓名：
   <input type="text" name="name" id="name" /></label>
   <label for="name"><small>请输入姓名</small></label><p>
   <input type="button" value="第一个" onclick="alert(document.getElementById('name').labels[0])"/>
   <input type="button" value="第二个" onclick="alert(document.getElementById('name').labels[1])"/><br />
   
   <label id="lb">姓名：
   <input type="text" name="name" /></label><p>
   <input type="button" value="获取" onclick="alert(document.getElementById('lb').control.selectionDirection);"/><br />
   
   
   <label id="colorlb">红色：
   <input type="checkbox" name="color" /></label><p>
   <input type="button" value="设置" onclick="document.getElementById('colorlb').control.indeterminate=true;"/>
   <input type="button" value="获取" onclick="alert(document.getElementById('colorlb').control.indeterminate);"/><br />
  


   <input type="color" name="color1" id="color1" value="color" onchange="a.value=this.value;" />
    <output name="a" for="color1"></output><p>
	<input name="range11" type="range" id="range11" min="0" max="100" step="5" onchange="b.value=this.value;" />
	<output name="b" for="range11"></output><p>
	<input type="submit" value="提交" /><br />
	</form>

运行上述代码可得下图：------------------↓↓↓↓↓

7.使用校检属性进行校验及关闭校验

<form action="add" method="post">
  图书名：<input name="name" type="text" required/><p>
  图书ISBN：<input name="isbn" type="text" required pattern="\d{3}-\d-\d{3}-\d{5}"   /><p>
  图书价格：<input name="price" type="number" min="20" max="150" step="5" /><p>
  <input type="submit" value="不校验提交" formnovalidate/>
   <input type="submit" value="校验提交" />
   </form>

运行上述代码可得下图：------------------↓↓↓↓↓