整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

          HTML5簡介:

          定義:HTML5號稱下一代HTML,html的最新版本,定義了新的標簽、css、JavaScript,html5新標簽IE9以上版本瀏覽器才兼容,因此在實際開發中要問老板是否兼容低版本瀏覽器。

          擴展內容:語義化標簽、本地儲存、兼容特性、2D 3D、動畫 過渡、CSS3新特性、性能與集成

          HTML5常用新標簽:

          HTML5標簽多為語義化標簽,主要是針對瀏覽器搜索引擎,IE9瀏覽器中主要將所有語義化標簽都轉化為塊級元素,語義化標簽在移動端支持比較好,后面會有更多語義化標簽學習。

          HTML5常用新標簽:



          datalist選項輸入框:

          此標簽和input標簽搭配可以實現input輸入提示,注意:input標簽中必須要有list屬性,其值綁定的是datalist的id值,option標簽中的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表單元素分組:

          此標簽和legend標簽搭配可以將表單內相關元素分組(外部用一個矩形的方框包裹)

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

          html5中input標簽的type屬性新增屬性值:



          input中新增屬性:



          提示:本文圖片等素材來源于網絡,若有侵權,請發郵件至郵箱:810665436@qq.com聯系筆者 刪除。

          筆者:苦海123

          其它問題可通過以下方式聯系本人咨詢:

          QQ:810665436

          微信:ConstancyMan

          、表單標簽Form

          1. 什么是表單

          表單在網頁中負責數據采集功能的。表單是有3部分組成:

          (1)表單標簽 <form></form>

          (2)表單域

          (3)表單按鈕

          2. Form標簽、

          語法格式:

          <form action=”url” method=”get|post”>

          </form>

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

          1. 新的輸入類型

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

          例子:電子郵件和網址輸入

          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
              <meta charset="UTF-8">
              <title>電子郵件和網址輸入示例</title>
              <style>
                  body {
                      font-family: Arial, sans-serif; /* 設置字體 */
                      padding: 20px; /* 頁面內邊距 */
                  }
          
                  form {
                      max-width: 400px; /* 表單最大寬度 */
                      margin: 0 auto; /* 居中顯示 */
                      padding: 20px; /* 表單內邊距 */
                      border: 1px solid #ccc; /* 邊框樣式 */
                      border-radius: 5px; /* 邊框圓角 */
                      background-color: #f9f9f9; /* 背景顏色 */
                  }
          
                  label {
                      display: block; /* 使標簽獨占一行 */
                      margin-bottom: 5px; /* 標簽下方間距 */
                      font-weight: bold; /* 字體加粗 */
                  }
          
                  input[type="email"],
                  input[type="url"] {
                      width: 100%; /* 輸入框寬度 */
                      padding: 8px; /* 內邊距 */
                      margin-bottom: 20px; /* 與下一個元素的間距 */
                      border: 1px solid #ccc; /* 邊框樣式 */
                      border-radius: 4px; /* 邊框圓角 */
                  }
          
                  input[type="submit"] {
                      background-color: #007bff; /* 背景顏色 */
                      color: white; /* 字體顏色 */
                      padding: 10px 20px; /* 內邊距 */
                      border: none; /* 無邊框 */
                      border-radius: 4px; /* 邊框圓角 */
                      cursor: pointer; /* 鼠標樣式 */
                      font-size: 16px; /* 字體大小 */
                  }
          
                  input[type="submit"]:hover {
                      background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
                  }
              </style>
          </head>
          <body>
          
          <form>
              <label for="email">電子郵件:</label>
              <input type="email" id="email" name="email" required>
          
              <label for="url">個人網站:</label>
              <input type="url" id="url" name="url">
          
              <input type="submit" value="提交">
          </form>
          
          </body>
          </html>
          

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

          2. 占位符屬性

          placeholder 屬性允許我們在輸入字段中設置一個提示文本,當輸入字段為空時顯示,一旦開始輸入,提示文本就會消失。

          例子:帶占位符的輸入框

          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
              <meta charset="UTF-8">
              <title>帶占位符的輸入框示例</title>
              <style>
                  body {
                      font-family: Arial, sans-serif; /* 設置字體 */
                      padding: 20px; /* 頁面內邊距 */
                  }
          
                  form {
                      max-width: 300px; /* 表單最大寬度 */
                      margin: 0 auto; /* 居中顯示 */
                      padding: 20px; /* 表單內邊距 */
                      border: 1px solid #ccc; /* 邊框樣式 */
                      border-radius: 5px; /* 邊框圓角 */
                      background-color: #f9f9f9; /* 背景顏色 */
                  }
          
                  label {
                      display: block; /* 使標簽獨占一行 */
                      margin-bottom: 10px; /* 標簽下方間距 */
                      font-weight: bold; /* 字體加粗 */
                  }
          
                  input[type="search"] {
                      width: calc(100% - 22px); /* 輸入框寬度,減去內邊距和邊框的寬度 */
                      padding: 10px; /* 內邊距 */
                      margin-bottom: 20px; /* 與下一個元素的間距 */
                      border: 1px solid #ccc; /* 邊框樣式 */
                      border-radius: 4px; /* 邊框圓角 */
                      box-sizing: border-box; /* 盒子模型,使寬度包含邊框和內邊距 */
                  }
          
                  input[type="submit"] {
                      background-color: #007bff; /* 背景顏色 */
                      color: white; /* 字體顏色 */
                      padding: 10px 20px; /* 內邊距 */
                      border: none; /* 無邊框 */
                      border-radius: 4px; /* 邊框圓角 */
                      cursor: pointer; /* 鼠標樣式 */
                      font-size: 16px; /* 字體大小 */
                  }
          
                  input[type="submit"]:hover {
                      background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
                  }
              </style>
          </head>
          <body>
          
          <form>
              <label for="search">搜索:</label>
              <input type="search" id="search" name="search" placeholder="請輸入搜索關鍵字">
          
              <input type="submit" value="搜索">
          </form>
          
          </body>
          </html>
          

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

          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>
          

          在這個示例中,當頁面加載完成后,姓名輸入框將自動獲得焦點。

          4. 表單驗證

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

          例子:表單驗證

          <!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; /* 包括邊框和內邊距在內的寬度 */
                  }
          
                  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位數字的郵編" required>
          
              <input type="submit" value="提交">
          </form>
          
          </body>
          </html>
          

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

          結語

          HTML5 的表單增強功能大大簡化了表單處理和驗證的工作,使得開發更加高效,同時也提高了用戶體驗。通過上述示例,我們可以看到,利用 HTML5 的新特性,可以創建功能強大且易于使用的表單。隨著技術的不斷進步,我們作為開發者應該不斷學習和實踐,以便更好地利用這些新工具來構建更好的網頁。


          主站蜘蛛池模板: 精品国产一区二区三区免费看| 日韩美一区二区三区| 精品无码一区二区三区亚洲桃色| 无码国产精品一区二区免费 | 丰满人妻一区二区三区免费视频 | 日韩一区精品视频一区二区| 在线观看精品视频一区二区三区 | 冲田杏梨AV一区二区三区 | 亚洲国产专区一区| 乱码人妻一区二区三区| 国产成人精品久久一区二区三区| 亚洲综合国产一区二区三区| 亚洲日韩国产一区二区三区| 国产嫖妓一区二区三区无码| 天堂一区二区三区在线观看| 国产成人综合一区精品| 在线欧美精品一区二区三区| 乱精品一区字幕二区| 久久精品无码一区二区三区不卡| 国产一区二区电影| 国产精品美女一区二区视频 | 国产日韩精品一区二区三区在线 | 国产精品女同一区二区久久| 成人在线一区二区| 国产精品亚洲高清一区二区| 精品国产一区二区三区在线观看| 四虎一区二区成人免费影院网址 | 亚洲国产成人久久综合一区77 | 狠狠综合久久AV一区二区三区| 亚洲av无码天堂一区二区三区| 一区二区三区在线视频播放| av在线亚洲欧洲日产一区二区| 中日av乱码一区二区三区乱码| 国产一区二区在线观看app| 国产午夜精品一区二区三区| 麻豆一区二区在我观看| 无码人妻精品一区二区蜜桃| 精品国产一区二区三区久久影院| 丰满人妻一区二区三区视频 | 国产精品免费视频一区| 亚洲成av人片一区二区三区|