html5簡介、選項(xiàng)輸入框、表單元素分組、input新增屬性及屬性值

HTML5簡介:

定義：HTML5號(hào)稱下一代HTML，html的最新版本，定義了新的標(biāo)簽、css、JavaScript，html5新標(biāo)簽IE9以上版本瀏覽器才兼容，因此在實(shí)際開發(fā)中要問老板是否兼容低版本瀏覽器。

擴(kuò)展內(nèi)容：語義化標(biāo)簽、本地儲(chǔ)存、兼容特性、2D 3D、動(dòng)畫過渡、CSS3新特性、性能與集成

HTML5常用新標(biāo)簽：

HTML5標(biāo)簽多為語義化標(biāo)簽，主要是針對(duì)瀏覽器搜索引擎，IE9瀏覽器中主要將所有語義化標(biāo)簽都轉(zhuǎn)化為塊級(jí)元素，語義化標(biāo)簽在移動(dòng)端支持比較好，后面會(huì)有更多語義化標(biāo)簽學(xué)習(xí)。

HTML5常用新標(biāo)簽：

datalist選項(xiàng)輸入框:

此標(biāo)簽和input標(biāo)簽搭配可以實(shí)現(xiàn)input輸入提示，注意：input標(biāo)簽中必須要有l(wèi)ist屬性，其值綁定的是datalist的id值，option標(biāo)簽中的value值不能為空，否則此功能失效。

    <body>
        <input type="text" value="輸入科目" list="lis" >
        <datalist id='lis'>
        <option value="科目1"></option>
        <option value="科目2"></option>
        <option value="科目3"></option>
        <option value="科目4"></option>
        </datalist>
    </body>

fieldset表單元素分組:

此標(biāo)簽和legend標(biāo)簽搭配可以將表單內(nèi)相關(guān)元素分組（外部用一個(gè)矩形的方框包裹）


    <body>
      <fieldset>
        <legend>用戶信息</legend>    <!-- 矩形框邊插入的文本信息,去掉此標(biāo)簽則為 封閉的矩形 -->
        <input type="text" value="user"><br>
        <input type="password" value="password">
      </fieldset>
    </body>

html5中input標(biāo)簽的type屬性新增屬性值：

input中新增屬性：

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan

、表單標(biāo)簽Form

1. 什么是表單

表單在網(wǎng)頁中負(fù)責(zé)數(shù)據(jù)采集功能的。表單是有3部分組成：

（1）表單標(biāo)簽 <form></form>

（2）表單域

（3）表單按鈕

2. Form標(biāo)簽、

語法格式：

</form>

TML5 為前端開發(fā)者帶來了許多表單增強(qiáng)功能，這些功能使得創(chuàng)建交互式和用戶友好的表單變得更加容易。在本文中，我們將介紹幾種 HTML5 新增的表單功能，并提供完整的 HTML 示例，以幫助你了解如何在實(shí)際項(xiàng)目中應(yīng)用這些功能。

1. 新的輸入類型

HTML5 引入了一系列新的 input 類型，以支持更多種類的數(shù)據(jù)輸入，比如電子郵件、日期等。

例子：電子郵件和網(wǎng)址輸入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>電子郵件和網(wǎng)址輸入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設(shè)置字體 */
            padding: 20px; /* 頁面內(nèi)邊距 */
        }

        form {
            max-width: 400px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內(nèi)邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標(biāo)簽獨(dú)占一行 */
            margin-bottom: 5px; /* 標(biāo)簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 輸入框?qū)挾?*/
            padding: 8px; /* 內(nèi)邊距 */
            margin-bottom: 20px; /* 與下一個(gè)元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內(nèi)邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標(biāo)樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標(biāo)懸停時(shí)的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">電子郵件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">個(gè)人網(wǎng)站:</label>
    <input type="url" id="url" name="url">

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個(gè)示例中，我們使用了 type="email" 和 type="url" 來要求用戶輸入有效的電子郵件地址和網(wǎng)址。如果用戶輸入的不符合格式，瀏覽器會(huì)在提交表單前顯示一個(gè)警告。

2. 占位符屬性

placeholder 屬性允許我們?cè)谳斎胱侄沃性O(shè)置一個(gè)提示文本，當(dāng)輸入字段為空時(shí)顯示，一旦開始輸入，提示文本就會(huì)消失。

例子：帶占位符的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>帶占位符的輸入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設(shè)置字體 */
            padding: 20px; /* 頁面內(nèi)邊距 */
        }

        form {
            max-width: 300px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內(nèi)邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標(biāo)簽獨(dú)占一行 */
            margin-bottom: 10px; /* 標(biāo)簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 輸入框?qū)挾?，減去內(nèi)邊距和邊框的寬度 */
            padding: 10px; /* 內(nèi)邊距 */
            margin-bottom: 20px; /* 與下一個(gè)元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
            box-sizing: border-box; /* 盒子模型，使寬度包含邊框和內(nèi)邊距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內(nèi)邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標(biāo)樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標(biāo)懸停時(shí)的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="請(qǐng)輸入搜索關(guān)鍵字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

這里的 placeholder="請(qǐng)輸入搜索關(guān)鍵字" 就是一個(gè)占位符，它會(huì)在用戶輸入之前顯示在搜索框中。

3. 自動(dòng)聚焦屬性

autofocus 屬性可以讓頁面加載時(shí)自動(dòng)將焦點(diǎn)放到某個(gè)表單元素上。

例子：自動(dòng)聚焦的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自動(dòng)聚焦的輸入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個(gè)示例中，當(dāng)頁面加載完成后，姓名輸入框?qū)⒆詣?dòng)獲得焦點(diǎn)。

4. 表單驗(yàn)證

HTML5 為表單驗(yàn)證提供了內(nèi)置支持，通過簡單的屬性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情況下進(jìn)行基本的驗(yàn)證。

例子：表單驗(yàn)證

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表單驗(yàn)證示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括邊框和內(nèi)邊距在內(nèi)的寬度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年齡:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">郵編:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="請(qǐng)輸入5位數(shù)字的郵編" required>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個(gè)示例中，年齡字段要求用戶輸入一個(gè)介于 18 到 99 之間的數(shù)字，而郵編字段要求用戶輸入一個(gè)符合特定模式（5位數(shù)字）的文本。

結(jié)語

HTML5 的表單增強(qiáng)功能大大簡化了表單處理和驗(yàn)證的工作，使得開發(fā)更加高效，同時(shí)也提高了用戶體驗(yàn)。通過上述示例，我們可以看到，利用 HTML5 的新特性，可以創(chuàng)建功能強(qiáng)大且易于使用的表單。隨著技術(shù)的不斷進(jìn)步，我們作為開發(fā)者應(yīng)該不斷學(xué)習(xí)和實(shí)踐，以便更好地利用這些新工具來構(gòu)建更好的網(wǎng)頁。

在線咨詢

上一篇：從零之057 網(wǎng)頁代碼中提取文字（刪除多余空行）
下一篇：HTML 之簡介

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html5簡介、選項(xiàng)輸入框、表單元素分組、input新增屬性及屬性值