Html5与Css3知识点拾遗（八）

css5新增的元素与属性

表单内元素的属性

1. form属性

之前必须书写在表单内部。而在Html5中，可以放在任何位置，为元素指定一个form属性，属性值为该表单的id，就可以声明该元素属于指定表单

//原来用法
<form id="textform">
    <input type="text">
    <textarea form="textform"></textarea>
</form>

//Html5新增，好处：容易添加样式
<form id="textform">
    <input type="text">
</form>
<textarea form="textform"></textarea>

2.formaction属性

之前只能通过表单action属性被统一提交到另一个页面。而在Html5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮可以将表单提交到不同的页面

<form id="textform">
    <input type="submit" name="n1" value="v1" formaction="01.jsp">提交到xx.jsp页面
    <input type="submit" name="n2" value="v2" formaction="02.jsp">提交到xx.jsp页面
    <input type="submit" name="n3" value="v3" formaction="03.jsp">提交到xx.jsp页面
</form>

3.formmethod属性（待补充）

所以只有一个method属性来统一指定提交方法。Html5中，可以用formmethod对每个表单元素分别指定不同的提交方法

<form id="textform">
    <input type="submit" name="n1" value="v1" formmethod="post" formaction="01.jsp">
    <input type="submit" name="n2" value="v2" formmethod="get" formaction="02.jsp">
</form>

4.formenctype属性（待补充）

之前表单元素具有一个enctype用于指定在表单发送到服务器之前应该如何对表单内数据进行编码。

在Html5中，可以用formenctype属性分别指定不同的编码方法

<form>
    <input type="submit" formenctype="text/plain">
    <input type="submit" formenctype="text/form-data">
    <input type="submit" formenctype="application/x-www-form-urlencoded">
</form>

5.formtarget属性

之前表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在Html5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

<form id="textform">
    <input type="submit" name="n1" value="v1" formtarget="_blank" formaction="01.jsp">//新窗口
    <input type="submit" name="n2" value="v2" formtarget="_self" formaction="02.jsp">//在相同的框架frame打开
    <input type="submit" name="n3" value="v3" formtarget="_parent" formaction="03.jsp">//当前的父窗口
    <input type="submit" name="n4" value="v4" formtarget="_top" formaction="04.jsp">//当前窗口打开
    <input type="submit" name="n5" value="v5" formtarget="framname" formaction="05.jsp">//在指定框架打开
</form>

6.autofucus属性

为文本框、选择框过按钮控件添加autofucus属性，当画面打开，该控件将自动获得光标焦点

<form>
    <input type="text" >
    <input type="text" autofocus>
</form>

6.required属性

在提交时，如果元素内容空白，则不允许提交，同时显示提交信息文字

<form action="01.jsp">
    <input type="text" required="required">
    <button type="submit">提交</button>
</form>

7.labels属性

为可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合

<script>
    function Validate(){
        var txtName=document.getElementById("txt_name");
        var button=document.getElementById("btnValidate");
        var form=document.getElementById("textform");

        if(txt Name.value.trim==""){
            var label=document.createElement("label");
            label.setAttribute("for","txt_name");
            form.insertBefore(label,button);
            tetName.labels[1].innerHTML="请输入姓名";
            txtName.labels[1].setAttribute("style","font-size:14px;color：#ccc;");
        }
    }
</script>

<form id="textform">
    <label id="label" for="txt_name">姓名：</label>
    <input id="txt_name">
    <input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>

8.标签的control属性

可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素

<script>
    function setValue(){
        var label=document.getElementById("label");
        var textbox=label.control;
        text.value="310018";
    }
</script>

<form id="textform">
    <label id="label">
        邮编：
        <input id="txt_zip" maxlength="6">
        <small>请输入六位数字：</small>
    </label>
    <input type="button" value="设置默认值" onclick="setValue()">
</form>

9.placehoder属性

当文本框处于未输入状态时显示的输入提示。未输入未获取光标焦点时，模糊显示输入提示文字

<input type="text" placeholder="输入用户名">

文本框属性

9.list属性

为单行文本增加，属性值为某个datalist元素的id。datalist元素类似于选择框，但是当用户想要设定的值不再列表之内，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示

<form>
    <input type="text" name="greeting" list="greetings">
    <datalist id="greetings" style="display:none">
        <option value="Html5">Html5</option>
        <option value="Css3">Css3</option>
    </datalist>
</form>

10.autocomplete属性

帮助输入所用的自动完成功能，控制安全性

<input type="text" name="greeting" autocomplete="off" list="greetings">
    <datalist id="greetings" style="display:none">
        <option value="Html5">Html5</option>
        <option value="Css3">Css3</option>
    </datalist>

11.pattern属性

属性值设为某个格式的正则表达式，在提交时会进行检查，是否符合给定样式。不符合给定格式则不允许提交，同时在浏览器显示信息提示，必须符合给定格式

<form action="01.jsp">
请输入内容
    <input pattern="[A-Z]{3}" name="part">
    <input type="submit">
</form>

11.SelectionDirection属性

对input和textarea元素，用鼠标选取部分文字，来获取选取方向,属性值有“forward”（默认）、“backward”

<script>
    function AD(){
        var control=ducument.forms[0]['text'];
        var Direction=control.selectionDirection;
        alert(Direction);
}
</script>
<form>
    <input type="text" name="text">
    <input type="button" value="点击" onclick="AD()">
</form>

复选框属性

12.indeterminate属性

过去只是选取和非选取两种状态。Html5新增indeterminate，说明复选框处于“尚未明确选取”状态

<input type="checkbox" interminate id ="cb">属性测试
script>
    function AD(){
        var cb=ducument.getElementById("cb");
        cb.interminate=true;
}
</script>

image提交按钮的属性

height和width

<form action="01.jsp" method="post">
    姓名：<input type="image" src="x.png" width="20" height="20">
</form>