html5學(xué)習(xí)筆記(5)

html5表單的新增元素和屬性

成都創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為東山等服務(wù)建站，東山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為東山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

formaction:

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

    <form id="testform2">
        <input type="submit" name="s1" value="v1" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
        <input type="submit" name="s2" value="v2" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
        <input type="submit" name="s3" value="v3" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
    </form>
</body>

formmethod:

<form id="testform3">
    <input type="submit" name="s1" value="v1" formmethod="post" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
    <input type="submit" name="s2" value="v2" formmethod="get" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
    <input type="submit" name="s3" value="v3" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
</form>

formenctype

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

formtarget

<form id="testform2">
    <input type="submit" name="s1" value="v1" formtarget="_blank" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
    <input type="submit" name="s2" value="v2" formtarget="_self" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
    <input type="submit" name="s3" value="v3" formtarget="_parent" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
    <input type="submit" name="s2" value="v2" formtarget="_top" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp
    <input type="submit" name="s3" value="v3" formtarget="_framename" formaction="http://localhost:8080/hellojsp/test01.jsp">提交到xx.jsp

</form>

autofocus

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

required

<form action="http://localhost:8080/hellojsp/test01.jsp">
    <input type="text" required="required">
    <button type="submit">sign in</button>
</form>

labels

<script>
    function validate(){
        var txtName=document.getElementById("txt_name");
        var button=document.getElementById("btnvalue");
        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="input name";
            txtName.labels[1].setAttribute("style", "font-size:9px;color:red");
        }
    }
</script>
<form id="testform">
    <label id="label" for="txt_name">name</label>
    <input type="text" id="txt_name">
    <input type="button" id="btnvalue" value="驗(yàn)證" onclick="validate()">
</form>

control

<body>
    <script>
        function setValue(){
            var label = document.getElementById("label");
            var textbox = label.control;
            textbox.value = "001000"

        }
    </script>
    <form>
        <label id="label" >郵編
            <input id="txt_zip" maxlength="6">
            <small>輸入六位數(shù)字</small>
        </label>
        <input type="button" value="默認(rèn)值" onclick="setValue()">
    </form>
</body>

placeholder

<body>
    <input type="text" placeholder="user name">
</body>

list的AutoComplete

<form>
    <input type="text" name="greeting" autocomplete="on" list="greetings" >
    <datalist id="greetings" >
        <option value="html">html</option>
        <option value="jsp">jsp</option>
        <option value="java">java</option>
        <option value="c">c</option>
    </datalist>
</form>

pattern正則驗(yàn)證

<form action="http://localhost:8080/hellojsp/test01.jsp">
    
    <input pattern="[A-Z]{3}" name="part">
    <input type="submit">
</form>

SelectionDirection

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

復(fù)選框的indeterminate

<body>
    <input type="checkbox" indeterminate id="cb">屬性測試
    <script>
        var cb = document.getElementById("cb");
        cb.indeterminate = true;
    </script>
</body>

p_w_picpath提交按鈕的height,width屬性

<body>
    <form action="test.jsp" method="post">
        name<input type="text" name="name">
        <input type="p_w_picpath" src="img/qi.png" alt="編輯" width="50" height="50">
    </form>
</body>

html改良的Input元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- url類型-->
    <form>
        <input name="url" type="url" value="http://www.baidu.com">
        <input type="submit" value="sign in">
    </form>
    <!-- email類型-->
    <form>
        <input name="email" type="email" value="thystar@163.com">
        <input type="submit" value="sign in">
    </form>
    <!-- date類型-->
    <form>
        <input type="date" name="date" value="">
        <input type="submit" value="sign in">
    </form>
    <!-- time類型-->
    <form>
        <input type="time" name="time" value="">
        <input type="submit" value="sign in">
    </form>
    <!-- datetime類型-->
    <form>
        <input type="datetime" name="datetime" value="">
        <input type="submit" value="sign in">
    </form>
    <!-- datetime-local類型-->
    <form>
        <input type="datetime-local" name="datetime-local" value="">
        <input type="submit" value="sign in">
    </form>
    <!-- month元素-->
    <form>
        <input type="month" name="month" value="">
        <input type="submit" value="sign in">
    </form>
    <!-- week-->
    <form>
        <input type="week" name="week" value="">
        <input type="submit" value="sign in">
    </form>
    <!-- number-->
    <script>
        function sum(){
            var n1 = document.getElementById("num1").valueAsNumber;
            var n2 = document.getElementById("num2").valueAsNumber;
            document.getElementById("res").valueAsNumber = n1+n2;

        }
    </script>
    <form>
        <input type="number" name="number" value="0" min="0" max="100" step="5">
        <input type="submit" value="sign in">
        <!-- jisuanqi-->
        <input type="number" id="num1">
        +
        <input type="number" id="num2">
        =
        <input type="number" id="res" readonly>
        <input type="button" value="計(jì)算" onclick="sum()">
    </form>
    <!-- range元素-->
    <input name="range" type="range" value="25" min="0" max="100" step="5">
    <!-- search-->
    <input type="search">
    <!-- tel-->
    <input type="tel">
    <!-- color-->
    <input type="color" onchange="document.body.style.backgroundColor=document.getElementById('curColor').textContent=this.value;">
    <span id="curColor"></span>
    <!-- output元素的追加-->
    <script>
        function vc(){
            var num = document.getElementById("range").value;
            document.getElementById("output").value = num;
        }
    </script>
    <form id="textform">
        <input id="range" type="range" value="25" min="0" max="100" step="5" onchange="vc()">
        <output id="output">10</output>
    </form>

    <!-- 表單驗(yàn)證-->
    <script>
        function check(){
            var email=document.getElementById("email0");
            if(email.value==""){
                alert("input email");
                return false
            }else if(!email.checkValidity()){
                alert("email is wrong");
                return false;
            }
        }
    </script>
    <form id="tv" onsubmit="check()" novalidate="true">
        <label for="email0">Email</label>
        <input name="email0" type="email" id="email0">
        <input type="submit">
    </form>
</body>
</html>

j極客學(xué)院：http://www.jikexueyuan.com/course/772.html

當(dāng)前題目：html5學(xué)習(xí)筆記(5)
標(biāo)題鏈接：http://muchs.cn/article44/pppehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、商城網(wǎng)站、微信公眾號、品牌網(wǎng)站設(shè)計(jì)、Google、定制開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容