41.HTML5 表單增強(qiáng)

TML5 為前端開發(fā)者帶來了許多表單增強(qiáng)功能，這些功能使得創(chuàng)建交互式和用戶友好的表單變得更加容易。在本文中，我們將介紹幾種 HTML5 新增的表單功能，并提供完整的 HTML 示例，以幫助你了解如何在實際項目中應(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)簽獨占一行 */
            margin-bottom: 5px; /* 標(biāo)簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 輸入框?qū)挾?*/
            padding: 8px; /* 內(nèi)邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            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)懸停時的背景顏色 */
        }
    </style>
</head>
<body>

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

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

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

</body>
</html>

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

2. 占位符屬性

placeholder 屬性允許我們在輸入字段中設(shè)置一個提示文本，當(dāng)輸入字段為空時顯示，一旦開始輸入，提示文本就會消失。

例子：帶占位符的輸入框

<!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)簽獨占一行 */
            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; /* 與下一個元素的間距 */
            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)懸停時的背景顏色 */
        }
    </style>
</head>
<body>

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

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

</body>
</html>

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

3. 自動聚焦屬性

autofocus 屬性可以讓頁面加載時自動將焦點放到某個表單元素上。

例子：自動聚焦的輸入框

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

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

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

</body>
</html>

在這個示例中，當(dāng)頁面加載完成后，姓名輸入框?qū)⒆詣荧@得焦點。

4. 表單驗證

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

例子：表單驗證

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表單驗證示例</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="請輸入5位數(shù)字的郵編" required>

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

</body>
</html>

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

結(jié)語

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

小白，你最近看CSS的時候碰到position屬性了么？"

“碰到了，通過position可以改變?nèi)萜鞯亩ㄎ?，我記得官方描述是這樣的：這個屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。”

“恩，不錯，今天咱說一下position里面的fixed類型吧，這個屬性值是讓容器基于瀏覽器窗口的絕對定位，在我們平時的制作中經(jīng)常會碰到。”

老朱接著說：“給一個容器設(shè)定position為fixed以后，可以通過left、right、bottom、top進(jìn)行四個方向的距離定位。現(xiàn)在我們在頁面中寫一個fixed容器，看一下代碼片段?！?/p>

“你看，這里我在body里面加了一個標(biāo)識為foot的div，然后他的css里面把position設(shè)置成了fixed，并且bottom（距離底部）為0，這里的bottom是基于瀏覽器窗口的距離進(jìn)行計算的，foot的寬和高也進(jìn)行了設(shè)定。現(xiàn)在我們看一下效果！”

“你可以看到，拖動滾動條往下滾動網(wǎng)頁的時候，foot的位置并不會隨著滾動條的滾動發(fā)生改變，它就像是漂浮在那里一樣。這里的foot是一個div容器，所以它的內(nèi)部我們還可以放任何你希望布局的內(nèi)容，比如放一個圖片，或者其他的容器?！?/p>

“這里插入的圖片要想跟foot容器寬度一致，根據(jù)我們之前說過的對圖片css的操作，把圖片的寬度（width）設(shè)定為100%，圖片就會自動與父容器寬度一致了?！?/p>

小白突然想到了很多手機(jī)HTML5頁面下方都有導(dǎo)航條，問道：“很多手機(jī)的HTML5頁面里面下方的導(dǎo)航條不會隨著頁面的滾動而滾動，這種導(dǎo)航條是不是也通過fixed來設(shè)定的?！?/p>

“是的，跟這里的foot一樣，我們只需要把導(dǎo)航條的父容器設(shè)定為fixed就可以了。有個需要注意的地方是導(dǎo)航條會根據(jù)手機(jī)屏幕的分辨率自動占用屏幕寬度，所以我們在給foot設(shè)定css樣式的時候就不能設(shè)定寬度了?！?/p>

小白問道：“那應(yīng)該怎么設(shè)定呢？”

老朱說：“你忘了我們剛說了fiex可以通過top、right、bottom、left設(shè)定四個方向的距離么？如果要讓一個fixed容器左右靠邊，我們只需要left為0，right為0，它就會自動匹配窗口的寬度?，F(xiàn)在我們把之前的foot容器改一下?！?/p>

“通過設(shè)定bottom、left、right可以讓foot靠近底部并且保持與窗口寬度一致。然后我們在foot里面放了一個ul-li容器，讓li容器向左浮動并且寬度為父容器的25%，布局就會變成這樣?！?/p>

“網(wǎng)頁上的底部導(dǎo)航通常都會放入透明的png圖片，現(xiàn)在我們插入png圖，再進(jìn)行一下css的調(diào)整?！?/p>

“網(wǎng)頁底部導(dǎo)航條，上面還會牽扯到鼠標(biāo)事件，焦點樣式變化，這些知識我們隨后也會一一展開討論，今天先這樣吧！你先練習(xí)練習(xí)今天說的這些內(nèi)容，然后試著做一個居中漂浮的層，看看能不能做出來！”

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長之路》的動力！

網(wǎng)頁設(shè)計過程中，我們會經(jīng)常用到一些HTML5特效代碼，下面就是為大家整理分享的一些好看炫酷且實用的HTML5特效代碼，可以放心在您的應(yīng)用程序中使用。

一、Canvas跟隨鼠標(biāo)光標(biāo)動畫特效

演示、下載地址：http://www.php.cn/xiazai/js/845

二、HTML5 Canvas泡泡懸浮鼠標(biāo)特效

演示、下載地址：http://www.php.cn/xiazai/js/1599

三、HTML5卡通可愛風(fēng)格網(wǎng)頁找不到404錯誤頁面網(wǎng)頁模板

演示、下載地址：http://www.php.cn/xiazai/js/2987

四、HTML5-Canvas線條背景動畫

演示、下載地址：http://www.php.cn/xiazai/js/2930

五、HTML5-Canvas線條背景動畫

演示、下載地址：http://www.php.cn/xiazai/js/2919

六、HTML5-Canvas五彩紙屑飄落動畫特效

演示、下載地址：http://www.php.cn/xiazai/js/2917

更多炫酷html5、javascript特效代碼，盡在：js特效大全

以上就是html5精選特效代碼分享（收藏）的詳細(xì)內(nèi)容，更多請關(guān)注其它相關(guān)文章！

更多技巧請《轉(zhuǎn)發(fā) + 關(guān)注》哦！

在線咨詢

上一篇：一個優(yōu)秀的 HTML5 視頻播放器插件，支持字幕、彈幕、直播
下一篇：CSS自動換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號

您的項目需求

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

整合營銷服務(wù)商