html5新增的表單控制項和表單屬性有哪些

HTML5是網路的下一代標準，是建構以及呈現網路內容的語言方式．被認為是互聯網的核心技術之一。

HTML5是Web中核心語言HTML的規​​範，使用者使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中透過一些技術處理將其轉換成為了可識別的訊息。 HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發過程中可能不會將這些新技術投入應用，但是對於該種技術的新特性，網站開發技術人員是必須要有所了解的。

新的輸入性表單控制項：

•   email：電子郵件信箱文字方塊,跟普通的沒什麼差異

•      -當輸入不是郵箱的時候,驗證不通過

•      - 行動裝置的鍵盤會改變

• ##  tel：電話號碼

•   url：網頁的URL

•   search：搜尋引擎

•     - chrome下輸入文字後，會多出一個關閉的X

•   range：特定範圍內的數值選擇器

•     - min、max、step(步數)

•     - 範例： 用js來顯示目前數值

•   number：只能包含數字的輸入方塊

• ## - 輸入框末端有兩個箭頭上為加下為減

•   color：顏色選擇器

•    - 點選顯示顏色版

•   datetime：顯示完整日期

•    - 類似select選擇樣式

•   datetime-local：顯示完整日期， 不包含時區

•   time：顯示時間，不含時區

• #  mouth：顯示月{年月}

• （免費影片教學：

  html影片教學

  ）

<form>
  <input type="email" />
  <input type="tel" />
  <input type="url" />
  <input type="search" />
  <!--一个滑块加一根长条 min最小表示数 max最大表示数 step 划一格跳几个数字-->
  <input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" />
  <input type="submit" />
</form>

登入後複製
• 新的表單特性與函數

•   placeholder：輸入方塊提示資訊

•     - 範例：微博的密碼方塊提示

•   autocomplete

##    - 預設為on，關閉提示選擇off
  autofocus：指定表單取得輸入焦點
  list和datalist：為輸入方塊建構一個選擇清單
#    - list值為datalist標籤的id
#  required：此選項必填， 不能為空白
#  Pattern：正規驗證

    - pattern=“\d{1,5}”

<input type="text"
  placeholder="请输入4-16个字符" // 输入框内显示
  autocomplete="off" // 是否记录输入的值
  autofocus // 聚焦
  required // 输入框不能为空
  pattern="\d{1,5}" // 必须输入1到5个数字
 />
//  required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验

// 如果用户在某个页面输入相当多的数据，临时有事需要离开一段时间，此时数据应该保存至草稿箱，那么同一个form表单下，将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
<form action="https://www.baidu.com">
  <input type="text">
  <input type="submit" value="提交" />
  <input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
</form>

以上是html5新增的表單控制項和表單屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！