HTML5用於建立表單的輸入小工具資料綁定以及資料驗證-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5用於建立表單的輸入小工具資料綁定以及資料驗證

高洛峰

Nov 18, 2016 am 11:15 AM

html5

1. 輸入類型和輸入屬性

　　菜鳥教程上給出了HTML5新增加的input輸入類型，可以在上面嘗試一下不同類型的樣子，基本上可以滿足日常開發需求了。類型不同會照成什麼內在差異呢？主要有三點，首先，瀏覽器會根據輸入類型進行基本的資料校驗，例如type="email"，如果使用者輸入的內容不包括@符號，那麼這就是不合法的輸入，瀏覽器會給出相應的提示。不同類型的第二點影響就是在行動端上，在瀏覽器上瀏覽頁面時，如果輸入項類型不同，裝置給出的虛擬鍵盤就會根據該類型的不同而不同，例如如果type="email" ，輸入時在蘋果手機上給出的鍵盤類型就增加了@符號。第三點則是帶來的便捷了，你輸入值如果是顏色類型，那麼瀏覽器會給你一個顏色選擇的面板，從而選擇或者輸入相應的顏色，如果單獨實現一個這種顏色選擇器方便用戶輸入的話就顯得有些麻煩了；。

　　[輸入屬性控制了一些特殊的內容，介紹三個輸入屬性：

　　placeholder: 相信大家最常用的就是這個屬性了，126郵箱的帳戶和密碼都用了這個placeholder，placeholder其實就是文字佔位符，當使用者輸入了內容佔位符自動消失，起到了提示的作用。

　　autofocus: 看例子就明白了，它用來定義在頁面載入時應該取得焦點的輸入元素。

　　required: 設定這個屬性就說明該輸入時必填項，如果使用者沒有填如該內容就提交表單，瀏覽器會給予對應的提示。

2. min max data-*輸入屬性

　　max min 屬性定義了number, range輸入的最大值與最小值。

　　data-*的作用是將鍵值對資料綁定到一些元素上。透過dom元素的dataset物件獲得：

<input type="number" data-price="21" >
js代码：
let element = document.getElementById(&#39;testid&#39;);
let price = element.dataset.price

　　元素的作用是將結果顯示給使用者：

<body>
    <output id=&#39;test&#39;>122</output>
</body>
<script type="text/javascript">
    let ss = document.getElementById(&#39;test&#39;)
    ss.value = 888;
</script>

這個小例子就實現了將output的值設為888;

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。