• HTML5 新表单元素详解

    一、HTML5 新的 类型

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

    1.

    用于接收电子邮件地址，浏览器会自动进行格式验证。

    示例代码：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Input Exampletitle>
    <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>
        
        <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">Submitbutton>
    form>
body>
html>

    2.

    用于接收日期输入，浏览器会提供日期选择器。

    示例代码：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Input Exampletitle>
    <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>
        
        <div class="input-field">
            <label for="date">Date:label>
            <input type="date" id="date" name="date" required>
        div>
        <button type="submit">Submitbutton>
    form>
body>
html>

    3.

    用于接收 URL 地址，浏览器会自动进行格式验证。

    示例代码：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Input Exampletitle>
    <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>
        
        <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">Submitbutton>
    form>
body>
html>

    4. 其他新类型

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

    示例代码：
    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 Exampletitle>
    <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>
        
        <div class="input-field">
            <label for="color">Favorite Color:label>
            <input type="color" id="color" name="color">
        div>
        
        <div class="input-field">
            <label for="number">Age:label>
            <input type="number" id="number" name="number" min="1" max="100">
        div>
        
        <div class="input-field">
            <label for="range">Range:label>
            <input type="range" id="range" name="range" min="0" max="100">
        div>
        <button type="submit">Submitbutton>
    form>
body>
html>

    二、HTML5 新的表单元素

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

    1.

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

    示例代码：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datalist Exampletitle>
    <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>
        
        <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">Submitbutton>
    form>
body>
html>

    2.

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

    示例代码：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Output Exampletitle>
    <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>
        
        <div class="input-field">
            <label for="result">Sum:label>
            <output id="result" name="result">output>
        div>
        <button type="submit">Submitbutton>
    form>
body>
html>

    3.

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

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

>Progress Exampletitle>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        progress {
            width: 100%;
        }
    style>
head>
<body>
    <form>
        
        <div class="input-field">
            <label for="file">File upload progress:label>
            <progress id="file" value="32" max="100">32%progress>
        div>
        <button type="submit">Submitbutton>
    form>
body>
html>

    4.

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

    示例代码：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meter Exampletitle>
    <style>
        .input-field {
            display: block;
            margin-bottom: 10px;
        }
        meter {
            width: 100%;
        }
    style>
head>
<body>
    <form>
        
        <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">Submitbutton>
    form>
body>
html>

    三、表单验证和属性

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

    1. required

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

    示例代码：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Required Attribute Exampletitle>
    <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>
        
        <div class="input-field">
            <label for="username">Username:label>
            <input type="text" id="username" name="username" required>
        div>
        <button type="submit">Submitbutton>
    form>
body>
html>

    2. pattern

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

    示例代码：
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pattern Attribute Exampletitle>
    <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>
        
        <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">Submitbutton>
    form>
body>
html>

    3. min 和 max

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

    示例代码：
    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 Exampletitle>
    <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>
        
        <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">Submitbutton>
    form>
body>
html>
  • 相关阅读:
    2024年2月的TIOBE指数,go语言排名第8,JAVA趋势下降
    Centos - DHCP 服务器搭建
    定语从句练习题
    利用X6 制作一个简单的流程图工具
    python 将字节字符串转换成十六进制字符串
    linux安装mysql
    【C++】继承（定义、菱形继承、虚拟继承）
    SVM介绍以及实战
    自动驾驶技术综述1：自动驾驶算法软件架构介绍
    如何一眼看穿软件测试行业的高深？实现月薪上万不是梦，开发也得惊呼
  • 原文地址：https://blog.csdn.net/imdeity/article/details/139387105