html5: 新特性（表单）-优快云博客

本文深入探讨HTML5表单的创新特性，包括表单元素的灵活布局、验证功能的增强、数据列表的使用、图像输入的尺寸控制等。通过实例展示了如何利用这些特性提升用户体验和数据收集效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单：

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

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/10704082.html