App下載

如何使用html5表單中的required屬性?案例詳解!

猿友 2021-07-29 11:25:08 瀏覽數 (4860)
反饋

今天來為大家介紹個有關于:“如何使用html5表單中的required屬性?”這方面的相關問題,希望對于剛入門的小伙伴們有所幫助!

描述

今天無意之中發(fā)現form有自帶非空判斷功能,查了資料發(fā)現,required 屬性是 HTML5 中的新屬性

定義和用法

required 屬性是一個布爾屬性
required 屬性規(guī)定必需在提交之前填寫輸入字段。
如果使用該屬性,則字段是必填(或必選)的。
注釋:required 屬性適用于以下 類型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
 

語法使用

<input required="required">
 <form method="post" action="">
       用戶名<input type="text" id="username" required="required"><br>
       密碼<input type="password" id="password" required><br>
       <input type="submit" value="登錄" >
   </form>

注意:
1:required和required="required"效果是一樣的,只不過前者是簡寫
2:必須要用form標簽把代碼包裹起來才有效
3:點擊的按鈕必須要是submit類型,類型為button無效

效果

就是一個簡單的提示要輸入改文本框

在這里插入圖片描述

如何自定義提示文字

用戶名
<input type="text" id="username" required oninvalid="setCustomValidity('請輸入您的姓名');" oninput="setCustomValidity('');">

如何讓required失效

1:把按鈕類型變成button而不是submit。
2:提交按鈕添加formnovalidate屬性。

 <form method="post" action="">
		   用戶名<input type="text" id="username" required="required"><br>
		   密碼<input type="password" id="password" required><br>
		   <input type="submit" value="登錄" formnovalidate >
	   </form>

3:在元素中添加novalidate屬性,禁用整個表單的驗證功能。

  <form method="post" action="" novalidate>
		   用戶名<input type="text" id="username" required="required"><br>
		   密碼<input type="password" id="password" required><br>
		   <input type="submit" value="登錄" >
	   </form>

4,pattern屬性 - 使用正則表達式驗證
(1)不必使用^和$字符表示要匹配字段值得開頭和結尾。
(2)只設置pattern的話,空值也會通過。如果不允許空,則還要加上required屬性。

到這邊我們今天有關于:“如何使用html5表單中的required屬性? ”這方面的相關內容分享就到這里了!更多有關于html5這方面的使用和學習內容我們都可以在W3Cschool中進行學習! 


0 人點贊