html5表单和文件

1、新增元素和属性      form属性 在HTML4中，表单内的从属元素必须书写在表单内部，但是在HTML5中，可以把它们书写在页面上任何地方，然后给该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。 <form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea>      formaction属性 在HTML4中，一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页面，而在HTML5中可以给所有的提交按钮，诸如<input type="submit">、 <input type="image">、<button type="submit">都增加不同的formaction属性 <form id="testform" action="serve.jsp">      <input type="submit" name="s1" value="v1" formation="s1.jsp">提交到S1      <input type="submit" name="s2" value="v2" formation="s2.jsp">提交到S2      <input type="submit" name="s3" value="v3" formation="s3.jsp">提交到S3      <input type="submit"> </form> PS: 目前尚没有浏览器支持这一属性      placeholder属性 placeholder是指当文本框(input、textarea)处于未输入状态时文本框中显示的输入提示。 <input type="text" placeholder="input me"/>      autofocus属性 给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点 <input type="text" autofocus/>      list属性 在HTML5中，为单行文本框(<input type="text">) 增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5新增的元素，改元素类似于选择框，但是当用户 想要设定的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器 显示，可以用CSS将其隐藏。 <input type="text" name="greeting" list="greetings"/> <!--使用style="display:none;" 将datalist元素设定为不显示--> <datalist id="greetings" style="display:none;">      <option value="Good Morning">Good Morning</option>      <option value="Hello">Hello</option>      <option value="Good Afternoon">Good Afternoon</option> </datalist>      autocomplete属性 辅助输入所用的自动完成 <input type="text" name="greeting" list="greetings" autocomplete="on"/>  PS： chrome20不支持 大幅度地增加与改良了input元素的种类 search、tel、url、email等，可参照： http://www.w3school.com.cn/html5/html_5_form_input_types.asp      output元素 output元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或者对它添加form属性 <form id="testform"> 请选择一个值 <input name="range1" type=range min=0 max=100 step=5/> <output onforminput="value=range1.value">50</output> </form> PS: 目前只有Opera支持得比较好 2、表单验证 2.1、自动验证 require属性、pattern属性 <form method="post">      <input name="text" type="text" required pattern="^\w.*$"/>      <input type="submit"/> </form> min属性与max属性 min与max这两个属性是数值类型或日期类型的input元素的专用属性 step属性 step属性控制input元素中的值增加或减少时的步幅 2.2、显示验证      form元素与input元素(包括select元素与textarea元素)都具有一个checkValidity方法。调用该方法，可以显示地对表 单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法以boolean的形式返回验证结果。 <script language="javascript"> function check(){      var email = document.getElementById("email");      if(email.value==""){           alert("请输入Email地址");           return false;      }... } </script> <form id="testform" onsubmit="return check();">      Email:       <input name="email" type="email" id="email"/><br/>      <input type="submit"/> </form>