HTML5 新表单元素详解

日里安2024-06-06 19:22

一、HTML5 新的 <input> 类型

HTML5 引入了多种新的 <input> 类型，使得表单的输入更加语义化和用户友好。

1. <input type="email">

<input type="email"> 用于接收电子邮件地址，浏览器会自动进行格式验证。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Input Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        .input-field input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- email 类型的 input，用于接收电子邮件地址 -->
        <div class="input-field">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="example@example.com" required>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

2. <input type="date">

<input type="date"> 用于接收日期输入，浏览器会提供日期选择器。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Input Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        .input-field input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- date 类型的 input，用于接收日期输入 -->
        <div class="input-field">
            <label for="date">Date:</label>
            <input type="date" id="date" name="date" required>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

3. <input type="url">

<input type="url"> 用于接收 URL 地址，浏览器会自动进行格式验证。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Input Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        .input-field input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- url 类型的 input，用于接收 URL 地址 -->
        <div class="input-field">
            <label for="url">Website:</label>
            <input type="url" id="url" name="url" placeholder="https://example.com" required>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

4. 其他新类型

除了 email、date、url 之外，HTML5 还引入了其他新类型，如 color、number、range 等。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Other Input Types Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        .input-field input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- color 类型的 input，用于选择颜色 -->
        <div class="input-field">
            <label for="color">Favorite Color:</label>
            <input type="color" id="color" name="color">
        </div>
        <!-- number 类型的 input，用于接收数值 -->
        <div class="input-field">
            <label for="number">Age:</label>
            <input type="number" id="number" name="number" min="1" max="100">
        </div>
        <!-- range 类型的 input，用于选择范围 -->
        <div class="input-field">
            <label for="range">Range:</label>
            <input type="range" id="range" name="range" min="0" max="100">
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

二、HTML5 新的表单元素

HTML5 引入了一些新的表单元素，使表单功能更加丰富。

1. <datalist>

<datalist> 元素用于提供一个预定义的选项列表供其他控件使用。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datalist Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        .input-field input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- datalist 提供预定义选项 -->
        <div class="input-field">
            <label for="browser">Choose your browser:</label>
            <input list="browsers" id="browser" name="browser" placeholder="Type to search...">
            <datalist id="browsers">
                <option value="Chrome">
                <option value="Firefox">
                <option value="Safari">
                <option value="Opera">
                <option value="Edge">
            </datalist>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

2. <output>

<output> 元素用于表示计算或用户操作的结果。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Output Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        .input-field input, .input-field output {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }
    </style>
    <script>
        // 计算两个数的和，并将结果显示在 output 元素中
        function calculateSum() {
            var num1 = parseFloat(document.getElementById('num1').value);
            var num2 = parseFloat(document.getElementById('num2').value);
            var sum = num1 + num2;
            document.getElementById('result').value = sum;
        }
    </script>
</head>
<body>
    <form oninput="calculateSum()">
        <div class="input-field">
            <label for="num1">Number 1:</label>
            <input type="number" id="num1" name="num1">
        </div>
        <div class="input-field">
            <label for="num2">Number 2:</label>
            <input type="number" id="num2" name="num2">
        </div>
        <!-- output 元素显示计算结果 -->
        <div class="input-field">
            <label for="result">Sum:</label>
            <output id="result" name="result"></output>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

3. <progress>

<progress> 元素表示任务的完成进度。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title

>Progress Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        progress {
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- progress 元素显示任务进度 -->
        <div class="input-field">
            <label for="file">File upload progress:</label>
            <progress id="file" value="32" max="100">32%</progress>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

4. <meter>

<meter> 元素表示标量测量值或分数值范围内的度量。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meter Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        meter {
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- meter 元素显示测量值 -->
        <div class="input-field">
            <label for="disk">Disk usage:</label>
            <meter id="disk" value="0.6" min="0" max="1" low="0.3" high="0.7" optimum="0.5">60%</meter>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

三、表单验证和属性

HTML5 为表单引入了更强大的验证功能，使用新的属性可以方便地进行客户端验证。

1. required

required 属性用于指定输入字段为必填项。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Required Attribute Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        .input-field input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- required 属性指定此字段为必填项 -->
        <div class="input-field">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

2. pattern

pattern 属性用于指定输入字段的正则表达式模式，浏览器会自动进行格式验证。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pattern Attribute Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        .input-field input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- pattern 属性指定输入的正则表达式模式 -->
        <div class="input-field">
            <label for="phone">Phone Number (XXX-XXX-XXXX):</label>
            <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

3. min 和 max

min 和 max 属性用于指定输入字段的最小值和最大值，适用于 number、range、date 等类型。

示例代码：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min and Max Attributes Example</title>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        .input-field input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <!-- min 和 max 属性指定输入的最小值和最大值 -->
        <div class="input-field">
            <label for="age">Age (1-100):</label>
            <input type="number" id="age" name="age" min="1" max="100" required>
        </div>
        <div class="input-field">
            <label for="start">Start date:</label>
            <input type="date" id="start" name="start" min="2024-01-01" max="2024-12-31" required>
        </div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>
相关推荐
一颗松鼠1 分钟前
JavaScript 闭包是什么？简单到看完就理解！
开发语言·前端·javascript·ecmascript
小远yyds21 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云3 小时前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解