表单元素系列一

表单元素系列一

labels

事例：在文本框中不输入文本时，会动态添加一个标签元素。输入内容后，该标签被删除

 

<form id="testForm">
    <label for="txt_name" id="label">
        姓名：
    </label>
    <input type="text" id="txt_name"/>
    <input type="button" id="btnValidate" value="验证" onclick="Validate()"/>
</form>
<script>
    function Validate(){
        var txtName = document.getElementById("txt_name"),button = document.getElementById("btnValidate"),form=document.getElementById("testForm");
        if(txtName.value.trim() ==""){//trim() 返回 去掉首尾空格后的字符串。
            if(txtName.labels.length ==1){//labels是H5中表单内的元素
                var label = document.createElement("label");//创建一个元素label
                label.setAttribute("for","txt_name");//设置label的for属性为txt_name就是指定为这个id="txt_name"的input
                form.insertBefore(label,button);//将label放入button的前面
                txtName.labels[1].innerHTML="请输入姓名";
                console.log(txtName.labels);
                txtName.labels[1].setAttribute("style","font-size:9px;color:red;")
            }
        }
        else if(txtName.labels.length > 1){//要是有文字的话，就去掉这个元素
            form.removeChild(txtName.labels[1]);
        }
    }
</script>

 

 

当console.log(txtName.labels); 原因：H5中，为所有的可使用标签的表单元素定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合

文本框的list属性

为某个单行文本框增加了一个list属性，该属性值为该datalist元素的id（类似于select） ,input 的属性autocomplete 默认为on,其含义代表是否让浏览器自动记录之前输入的值,很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到,可以在input中加入autocomplete="off" 来关闭记录,系统需要保密的情况下可以使用此参数

 

 

<input type="text" name="greeting" autocomplete="on" list="greetings"/>
    <datalist id="greetings" style="display: none">
        <option value="nihao">nihao</option>
        <option value="zpj">zpj</option>
        <option value="adg">adg</option>
    </datalist>