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>
相关推荐
Myli_ing25 分钟前
HTML的自动定义倒计时，这个配色存一下
前端·javascript·html
dr李四维42 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~1 小时前
网页F12：缓存的使用（设值、取值、删除）
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶（cosbrowser）
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five2 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序2 小时前
vue3 封装request请求
java·前端·typescript·vue
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10量化方法怎么选？如何评估量化后的大模型LLM？