html5: 新特性（表单）

时间：2023-05-01 13:47:26

表单：

在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">

相关文章