zoukankan      html  css  js  c++  java
  • html5: 新特性(表单)

    表单:

    在html4中,表单内的从属元素必须写在表单内部。在html5中,可以吧他们书写在页面任何位置,然后指定form属性,属性值为表单ID,这样就指定表单了。

    formaction,formmethod,formentype

    <body>
        <form id="taskForm">
            <input 
            type="text" 
            value="v1" 
            formnovalidate
            formtarget="_blank|_self|_parent|_top|framename"
            formenctype="application/x-www-form-urlencoded" 
            formmethod="POST" formaction="http://localhost:8080/test01.jsp">submit
        </form>
        <footer>
                <button form="taskForm">submit</button>
        </footer>
    </body>

     表单required and labels:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form id="taskForm">
            <label for="txt_name">name:</label>
            <input id="txt_name" type="text" name="txt_name">
            <input id="btn_validate" type="button" value="validate" onclick="validateName()">
        </form>
        <script>
            function validateName() {
                var txtName = document.getElementById('txt_name');
                var button = document.getElementById('btn_validate');
                var form = document.getElementById('taskForm');
                if (txtName.value.trim() == '') {
                    var label = document.createElement("label");
                    label.setAttribute("for", "txt_name");
                    form.insertBefore(label, button);
                    txtName.labels[1].innerHTML="please input txt_name";
                    txtName.labels[1].setAttribute('style', 'color:red')
                }
            }
        </script>
    </body>
    </html>

    control属性

    <form id="taskForm">
            <label id="label_zip">
                name:
                <input id="txt_zip" type="text" name="txt_zip" maxlength="6">
                <small>请输入6位数字</small>
            </label>
            <input id="btn_validate" type="button" value="设置默认值" onclick="setDefault()">
        </form>
        <script>
            function setDefault() {
                var labelZip = document.getElementById('label_zip');
                var labelbox = labelZip.control;
                labelbox.value = "123465";
            }
        </script>

    dataList元素:

    <input type="text" name="greeting" list="greeting" autocomplete>
            <datalist id="greeting" style="display: none">
                <option value="1">test1</option>
                <option value="2">test2</option>
                <option value="3">test3</option>
            </datalist>

     image的width,height属性:

    <input type="image" src="jkxy.png" width="20" height="20">
    
  • 相关阅读:
    C#获取指定日期为一年中的第几周
    Javascript arguments详解
    select2 插件
    [转]oracle存储过程中update不成功的一个原因
    [转]Oracle存储过程给变量赋值的方法
    [转]cron表达式详解
    [转]ssh中如何实现定时任务(spring对quartz的支持)
    [转]Oracle存储过程总结
    [转]Oracle 树操作(select…start with…connect by…prior)
    [转]oracle在删除表表空间用户时,如何释放磁盘空间
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/10704082.html
Copyright © 2011-2022 走看看