HTML5 表单新增元素与属性

image的input元素

<body>
    
    <form action="tes.jsp" method="post">
        姓名:<input type="text" name="name">
        <input type="image" src="" align="编辑" width="50" height="50"/>
    form>
body>

标签的control属性

<body>
<script>
    function setValue() {
        var label = document.getElementById("label");
        var textbox = label.control;
        textbox.value = "010010";
    }
script>
    
    <form>
        <label id="label">
            邮编:
            <input id="txt_zip" maxlength="6"/>
            <small>请输入六位数字small>
        label>
        <input type="button" value="设置默认值" onclick="setValue()"/>
    form>
body>

复选框的indeterminate属性

<body>
    
    
    <input type="checkbox" indeterminate id="cb"/>属性测试
    <script>
        var cb = document.getElementById("cb");
        cb.indeterminate = true;
    script>
body>

**

input新增属性

**
from元素属性



autofocus属性

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

required属性

<body>
    
    <form>
        <input type="text" required="required"/>
        <button type="submit">提交button>
    form>
body>

labels属性

<body>
<script>
    function Validate() {
        var txtName = document.getElementById("txt_name");
        var button = document.getElementById("btnValidate");
        var form = document.getElementById("testform");
        if(txtName.value.trim()=="") {
            var label = document.createElement("label");
            label.setAttribute("for","txt_name");
            form.insertBefore(label,button);
            txtName.labels[1].innerHTML = "请输入姓名";
            txtName.labels[1].setAttribute("style","font-size:9px; color:red");
        }

    }
script>
    
    <form id="testform">
        <label id="label" for="txt_name">姓名:label>
        <input id="txt_name"/>
        <input type="button" id="btnValidate" value="验证" onclick="Validate()"/>
    form>
body>

formtarget属性

<body>
    
    
    <form>
        <form id="testform">
            
            <input type="submit" name="s1" value="v1" formtarget="_blank"/>
            
            <input type="submit" name="s1" value="v1" formtarget="_self"/>
            
            <input type="submit" name="s1" value="v1" formtarget="_parent"/>
            
            <input type="submit" name="s1" value="v1" formtarget="_top"/>
            
            <input type="submit" name="s1" value="v1" formtarget="_framename"/>

        form>
    form>
body>

formmethod属性

<body>
    
    
    <form id="testform">
        <input type="submit" name="s1" value="v1" formmethod="post" formaction="xx.jsp" />提交
        <input type="submit" name="s1" value="v1" formmethod="get" formaction="xx.jsp" />提交
    form>
body>

formenctype属性

<body>
    
    

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

formaction属性

<body>
        
        <form id="testform">
            <input type="submit" name="s1" value="v1" formaction="xx.jsp"/>
        form>
body>

文本框新增属性

placeholder属性

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

文本框的pattern属性

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

文本框autocomplete属性

<body>
    
    
    
    
    <input type="text" name="greeting" autocomplete="on" list="greetings"/>
    <datalist id="greetings" style="display: none">
        <option value="HTML学习">HTML学习option>
        <option value="HTML学习1">HTML学习1option>
        <option value="HTML学习2">HTML学习2option>
    datalist>
body>

文本框SelectionDirection属性

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

文本框的list属性

<body>
    
    
    
    <form action="">
        <input type="text" name="greeting" list="greetings">
        <datalist id="greetings" style="display: none">
            <option value="HTML学习">HTML学习option>
            <option value="HTML学习1">HTML学习1option>
            <option value="HTML学习2">HTML学习2option>
        datalist>
    form>
body>

你可能感兴趣的:(HTML5)