HTML5智能表單的詳細(xì)介紹

這篇文章主要介紹“HTML5智能表單的詳細(xì)介紹”，在日常操作中，相信很多人在HTML5智能表單的詳細(xì)介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5智能表單的詳細(xì)介紹”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

HTML5 智能表單

新增輸入型

Type=“email” 限制用戶必須輸入email類型
Type=“url” 限制用戶必須輸入url類型
Type=“range” 產(chǎn)生一個滑動條表單
Type=“search” 產(chǎn)生一個搜索意義的表單
Type=“color” 生成一個顏色選擇的表單
Type=“time” 限制用戶必須輸入時間類型
Type=“month” 限制用戶必須輸入月類型
Type=“week” 限制用戶必須輸入周類型
Type=“datetime-local” 選取本地時間

input類型設(shè)置email：專門用來輸入email地址的文本框,如果該文本框中內(nèi)容不是email地址格式的，則不允許提交。但它不檢查email地址是否存在。提交時可以為空，除非加上了required屬性。
具有multiple屬性，它允許在該文本框中輸入一串以逗號分隔的email地址。

url類型專門用來輸入URL地址的文本框。如果該文本框中內(nèi)容不是URL地址格式的，則不允許提交。mail地址。
例：<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>

Number類型專門用來輸入數(shù)字的文本框。在提交時會檢查其中的內(nèi)容是否為數(shù)字，具有min、max、step的屬性。 
例：<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />

range類型是用來只允許輸入一段范圍內(nèi)數(shù)值的文本框，它具有min屬性與max屬性，及step屬性，可以指定每次拖動的步幅。
例： <input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” /> 
min 最小值
max 最大值
step 數(shù)字間隔

(date, month, week, time, datetime,datetime-local)擁有多個可供選取日期和時間的新輸入類型。
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間（小時和分鐘）
datetime - 選取時間、日、月、年（UTC 時間）
datetime-local - 選取時間、日、月、年（本地時間）
例：<input type=“month” &gr;
Search：輸入的是搜索的關(guān)鍵字，與type=“text” 基本上一樣。
Color：用來選取顏色。

output：定義不同類型的輸出，如計算結(jié)果的輸出，或腳本的輸出。
注：必須從屬于某個表單。即，必須將它書寫在表單內(nèi)部
Output標(biāo)簽IE不支持

對新元素樣式的使用：
注意，跟 input 標(biāo)簽設(shè)置樣式一樣，但是要設(shè)置標(biāo)簽中局部的樣式不能實現(xiàn)。如改變?nèi)諝v的背景色，顏色框的按鈕效果，等，這些都不可以實現(xiàn)。

表單新屬性

1）、Datalist ：選項列表例： <input type="url" list="url_list" name="link" />
<datalist id="url_list"> 
  <option label="W3School" value="http://www.W3School.com.cn" />
  <option label="Google" value="http://www.google.com" />
  <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
提示：option 元素永遠(yuǎn)都要設(shè)置 value 屬性。

2.屬性placeholder屬性：文本框處于未輸入狀態(tài)時文本框中顯示的輸入提示。autofocus屬性：給文本框、選擇框、或者按鈕控件加上該屬性，當(dāng)打開頁面時，該控件自動獲得國標(biāo)焦點(diǎn)，一個頁面只能有一個。required屬性：驗證輸入不能為空list屬性：結(jié)合datalist元素使用autocomplete屬性：輸入富足和所用的自動完成功能，是一個節(jié)省輸入時間，同時也十分方便的功能。只有三種：on/off/""。on可是顯示指定候補(bǔ)輸入的數(shù)據(jù)列表，使用datalist元素與list屬性提供候補(bǔ)輸入的數(shù)據(jù)列表，自動完成時，可以講該datalist元素中的數(shù)據(jù)作為候補(bǔ)輸入的數(shù)據(jù)在文本框中顯示： <input type="text" name="greeting" autoconplete="on" list ="greeting">

3.自動驗證1）、required可以應(yīng)用在大多數(shù)輸入元素上（除了隱藏元素和圖片），在提交時如果元素內(nèi)容為空白，則不允許提交，同時顯示提示文字。2）、pattern將屬性值設(shè)為某個格式的正則表達(dá)式，在提交時會檢查其內(nèi)容是否符合給定格式。
例：<input pattern = “[0-9][A-Z]{3}” title="輸入內(nèi)容：一個數(shù)與三個大寫字母" placeholder=‘輸入內(nèi)容：一個數(shù)與三個大寫字母’>3）、 min、max、step：為包含數(shù)字或日期的 input 類型規(guī)定限定（約束）
max: 最大值
min: 最小值
step: 數(shù)字間隔 
例：<input type="number“ min="0" max="10" step="3" />4、取消驗證可以對form表單添加novalidate屬性，即使form表單中的input添加了required，也將不進(jìn)行驗證5.Multiple:可以輸入一個或多個值，每個值之間用逗號分開
例：<input type=“email” multiple/>
還可以應(yīng)用于file

到此，關(guān)于“HTML5智能表單的詳細(xì)介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>