html5 表单 Amy

一、新增表单属性

　　1.1 form属性：声明带有该属性的元素从属于指定的表单（只有opera10支持）

<form id="my_form">
    <input type="text">
</form>
<textarea form="my_form"></textarea><!--该textarea元素虽然没有位于my_form表单中，但是form属性为其指定了从属的表单-->

　　1.2 formaction属性和formmethod属性：该属性覆盖 form 元素的 action 属性，适用于type="submit" 和 type="image"，可以将同一表单以不同的方式提交到不同的页面(尚且没有浏览器支持该属性)

<form id="my_form" action="s_01.asp">
    <input type="submit" name="s_02" value="s_02" formaction="s_02.asp" formmethod="post">将该表单提交给s_02
    <input type="image" name="s_03" value="s_03" formaction="s_03.asp" formmethod="get">将该表单提交给s_03
    <button type="submit" name="s_04" value="s_04" formaction="s_04.asp" formmethod="post"/>将该表单提交给s_04
</form>

1.3 placeholder属性：文本框处于未输入状态未获取光标焦点前显示的输入提示，适用于<input type="text"><textarea>(safari4、chrome3、firefox4支持)

 <input type="text" placeholder="请输入姓名">

1.4 autofocus属性：当页面打开，该控件自动获取光标焦点，一个页面只有一个控件使用该属性（safari4、chrome3、firefox4支持）

<form>    
    <input type="text" placeholder="请输入姓名" autofocus>
</form>

1.5 list属性：为单行文本增添的list属性，该属性的值为某一个datalist元素的id，以提示输入的方式显示，类似于select元素，如果需要输入的值不在datalist中，也可自行输入

    <input type="text" placeholder="请输入姓名" autofocus list="my_data">
    <datalist id="my_data" style="display:none;"><!--为了避免不支持datalist元素的浏览器显示出来，我们用CSS将其设置为不显示-->
        <option value="Jim">Jim</option>
        <option value="Sam">Sam</option>
        <option value="Willim">Willim</option>
    </datalist>

1.6 autocomplete属性：规定表单是否应该启用自动完成功能

二、新增input种类

　　2.1 url类型：专门用来输入url地址的文本框，输入值不是url地址格式，不允许提交，但不保证是确实存在的url，只保证格式正确，IE和Safari不支持

　　2.2 email类型：检查输入的文本的格式是否是email格式，并不检查该email地址是否存在，还有multiple属性，可以输入多个以逗号分隔的email地址

　　2.3 date类型：以日历的形式方便用户输入

　　2.4 time类型：外观取决于浏览器，在。，。。。浏览器中，它正常的文本框，仅在提交时检查输入的是否是有效的时间，在浏览器，，，，中，以时钟形式出现，携带时区

　　2.5 datetime类型：专门用来输入UTC日期和时间的输入框，并在提交时对输入进行有效性的检查

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

　　2.6 month类型：输入月份的文本框

　　2.7 week类型：专门用来输入周号的

　　2.8 number类型：专门用来输入数字的，有属性min、max、step属性，带有数值控制按钮，根据step进行增减，不超过最值

　　2.9 range类型：有min、max和step属性，只允许输入一段范围内的数值，用滑动条的形式进行值的设定

　　2.10 search类型：输入搜索关键词的文本框，外观可用css进行重新定义

　　2.11 tel类型：没有特殊的校验规则，不强制输入数字，有pattern属性来指定输入值的验证

　　2.12 color类型：提供一个颜色选取器，仅opera支持

　　

    <form id="my_form">
        <label for="url">个人主页：</label>
        <input type="url" id="url" name="url">
        <p></p>
        <label for="email">个人邮箱：</label>
        <input type="email" id="email" name="email">
        <p></p>
        <label for="date">日期：</label>
        <input type="date" name="date" id="name">
        <p></p>
        <label for="time">时间：</label>
        <input type="time" name="time" id="time">
        <p></p>
        <label for="datetime">utc时间：</label>
        <input type="datetime" name="datetime" id="datetime">
        <p></p>
        <label for="datetime-local">本地时间：</label>
        <input type="datetime-local" name="datetime-local" id="datetime-local">
        <p></p>
        <label for="month">月份：</label>
        <input type="month" id="month" name="month">
        <p></p>
        <label for="week">第几周：</label>
        <input type="week" name="week" id="week">
        <p></p>
        <label for="number">数字：</label>
        <input type="number" min="0" max="100" step="5" name="number" id="number">
        <p></p>
        <label for="range">范围：</label>
        <input type="range" min="0" max="100" step="5" id="range" name="range">
        <p></p>
        <label for="search">搜索：</label>
        <input type="search" name="search" id="name">
        <p></p>
        <label for="tel">电话：</label>
        <input type="tel" name="tel" id="tel">
        <p></p>
        <label for="color">颜色：</label>
        <input type="color" name="color" id="color">
        <p></p>
    </form>

三、表单的验证

　　3.1 自动验证：required属性(必填项);pattern属性(自定义验证规则);min与max属性;step属性

　　3.2 显式验证：checkValidity方法，调用该方法可以显式地对表单元素进行验证；form和input元素都存在一个validity属性，该属性返回一个ValidityState对象，该对象的valid属性表示表单内所有元素内容是否有效，或者单个input元素的输入是否有效

var e=document.getElementById("email");
if(e.checkValidity()){
    alert("输入的email有效");
}

        var e=document.getElementById("email");
        if(e.validity.valid){
            alert(1243);
        }else{
            alert(11);
        }

　3.3 取消验证：form的novalidate属性和input或者form的formnovalidate属性

　　form的novalidate属性可以关闭整个表单的验证；input的formnovalidate是对单个input元素不进行验证；submit按钮的formnovalidate属性是对整个表单验证失效

<input type="submit" formnovalidate="formnovalidate" value="提交">

　　3.4 自定义错误信息：setCustomValidity方法,只对没有默认提示的错误信息有效

pass2.setCustomValidity("密码不一致，请确认！");

四、figure元素：页面上一块独立的流内容，可以是图片、代码、统计图等，也可以是音频插件、视频插件，与主内容相关，移除的话，对文档流没有影响。figcaption是figure元素的标题，从属于figure元素一个figure元素最多只能有一个figcaption元素，必须放在figure元素内部，前后都可以

 　　<figure>
        <figcaption>烧烤</figcaption>
        <img src="xxx.jpg" width="100" height="100">
    </figure>

五、details元素：将区域展开或者收缩(chrome浏览器支持)

    <details open><!--open属性，当页面加载时，处于展开状态-->
        <summary>疯狂原始人</summary>
        <p>《疯狂原始人》是讲述一个原始人家庭冒险旅行的3D喜剧。。。。。。。。。</p>
    </details>

六、mark元素：页面中需要突出显示或者高亮显示的，对用户有参考作用的文字，例如对全文检索某个关键字

 <p><mark>《疯狂原始人》</mark>是讲述一个原始人家庭冒险旅行的3D喜剧。。。。。。。。。</p>

mark元素一般用于引用，并非原作者强调的，而是引用者为了引起用户的注意，strong是原作者强调的一段文字的重要性，例如警告、错误等，而em是原作者为了突出文章的重点而使用的

七、progress元素：一个任务的完成进度，value属性表示已经完成多少，max表示总的工作量

    <p>进度：<progress id="progress" max="100"><span></span>%</progress></p>
    <input type="button" onClick="btn_click();" value="请加载"/>

function btn_click(){
    var p=document.getElementById("progress");
    p.getElementsByTagName("span")[0].textContent="0";
    for(var i=0;i<=100;i++){
        update(p,i);
    }
}
function update(p,new_value){
    p.value=new_value;
    p.getElementsByTagName("span")[0].textContent=new_value;
    
}

八、meter元素：规定范围内的数量值，例如磁盘的使用情况，某投票情况等

value属性：实际值；min：允许的最小值；max：允许的最大值；low：下限值；high：上限值；

optimum：最佳值，如果该值高于 "high" 属性，则意味着值越高越好，如果该值低于 "low" 属性的值，则意味着值越低越好。

<meter value="10" max="100" min="0"></meter>

九、menu元素：相当于其他语言开发工具中的菜单，command元素表示其他开发语言工具中的菜单项，

十、改良的ol元素：增加了start和reversed属性，可以自定义编号的起始值或者对列表进行反序排列

    <ol start="9" reversed>
        <li>列表9</li>
        <li>列表10</li>
        <li>列表11</li>
        <li>列表12</li>
    </ol>