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 小时前
太牛了！这AI做出来的游戏，居然还能变现！
前端
hellice2 小时前
闪传 FlashDrop 实战：我用 300 行 Node 代码做了个「4 位取件码」临时文件中转站
前端·产品
用户0829773260052 小时前
RTX 5500 MIG 踩坑记录：切分之后模型跑不起来，排错整整一下午
前端
Lank_M2 小时前
AI 放大后的图更清楚，但它不能当原图入库
前端
Swot2 小时前
SvelteKit 数据流研究：`+page.js` 和 `+page.server.js` 到底谁在跑，数据又去了哪儿
前端·后端
用户4147679304152 小时前
Windows 触摸屏上 Swiper 轮播滑不动？可能是内部滚动容器抢走了你的手势
前端
张明君644512 小时前
从一个 Referer 引发的 403，到 SSR 服务失稳：Astro 流式渲染与缓存失效分析
前端
律宏阔2 小时前
微信小程序 + Taro + TDesign 去掉 [&&&]，让普通 Tailwind 类接管局部样式
前端·微信小程序·taro
费曼学习法2 小时前
把 3 个内部服务封装成 MCP Server 的工程复盘：进程模型、超时与错误契约
前端
Captaincc2 小时前
转译：《软件工程师现在该怎么办》
前端·后端·ai编程
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03如何新建文件夹？ 电脑新建文件夹的4种方法04几个好用的ip纯净度检测网站05昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07GitHub 镜像站点08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09苹果iPA游戏软件资源下载网站10Dify：一站式AI应用开发平台全解析与Windows部署指南