HTML5表单单元测试验

作者：System 时间：2024年08月08日分类：所有,html5 字数：798

HTML5引入了几种新的表单输入类型和属性，可以帮助进行表单验证。以下是一个简单的HTML5表单，包含了一个必填字段和一个电子邮件验证：




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Form Validation Example</title>
</head>
<body>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <input type="submit" value="Submit">
    </form>
    <script>
        document.getElementById('myForm').onsubmit = function(e) {
            // 可以在这里添加额外的验证逻辑
            // 如果需要阻止表单提交，可以设置 event.preventDefault()
        };
    </script>
</body>
</html>

在这个例子中，required 属性确保字段在提交前必须填写。email 输入类型自动验证输入的文本是否为有效的电子邮件格式。如果用户尝试提交空白的必填字段或无效的电子邮件地址，浏览器将显示一个警告，并阻止表单的提交。

HTML5表单单元测试验

评论已关闭

推荐阅读