HTML5表单与文件学习笔记

1、新增元素

　　form属性：指定表单，使表单内的丛书元素可以写在任何位置

<form id="testform">
    <input type="text">
</form>
<textarea form="testform"></textarea>

　　formaction属性：点击不同按钮，可以将表单提交到不同页面

<form id="textform" action="sever.jsp">
    <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
    <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
    <input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到s3
    <input type="submit">
</form>

　　formmethod属性：指定提交方法

<form id="teatform" action="serve.jsp">
    <input type="submit" name="s1" value="v1" formaction="s1.jsp" formmethod="post">提交到s1
    <input type="submit" name="s2" value="v2" formaction="s2.jsp" formmethod="get">提交到s2
    <input type="submit">
</form>

　　placeholder属性：显示输入提示

<input type="text" placeholder="input me">

　　autofocus属性：自动获得焦点

<input type="text" autofocus>

　　list属性：获得焦点后以提示的方式显示列表

text:<input type="text" name="greeting" list="greetings">
<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" autocomplete="on" list="greeting">

2、input元素
　　url类型：专门用来输入url地址的文本框。

<input name="url" type="url" value="http://www.microsoft.com">

　　email类型：专门用来输入email地址的文本框

<input type="email" name="email" value="[email protected]">

　　date类型：以日历形式方便输入

<input type="date" name="date1" value="2010-10-02">

　　time类型：专门用来输入时间

<input type="time" name="time1" value="10:00">

　　datetime类型：专门用来输入UTC时间的文本框，提交自动进行有效性检查。

<input type="datetime" name="datetime1">

　　datetime-local类型：专门用来输入本地时间的文本框

<input type="datetime-local" name="datetime-local1">

　　month类型：专门用来输入月份

<input type="month" name="month1" value="2010-10">

　　week类型：专门输入周号的文本框

<input type="week" name="week1" value="2010-w40">

　　number类型：专门用来输入数字的文本框

<input type="number" name="number1" value="25" min="10" max="100" step="5">

　　range类型；范围

<input type="range" name="range1" value="25" min="10" max="100" step="5">

　　search类型：专门输入搜索关键词

input[type="search"] {-website-appearance:textfield;}

　　tel类型：专门输入电话号码

　　color类型：专门选取颜色的