它可以表示為布林屬性,有時稱為必填項或開發人員友好的必填欄位。它應該由任何形式的控制項標記,以具有在網頁上提交任何表單之前不應保留為空的值。若要使字段成為必填字段,請在輸入字段的末尾添加屬性。客戶將收到彈出警報,提示應填寫必填字段;同時,它是 HTML5 的新功能,可以很好地處理複選框、單選按鈕、文字等輸入字段,這可能有助於前端驗證。
本文介紹了所需屬性的基本概念,並提供了在 Chrome 6、Firefox 和 Opera 等瀏覽器中啟動和使用的簡單範例,每個瀏覽器都有不同的預設行為。說起來,屬性是一個特殊的詞,它為 HTML 中的任何元素提供功能。與 HTML5 一樣,所需的屬性作為 UI 助理可見。當使用者提交表單時,無論請求是否包含數據,伺服器都會驗證請求。
文法
語法如下所示,您可以做的一個小小的更改是在表單中使用關鍵字「Attribute」建立文字輸入欄位。在提交表格之前,必須填寫必填欄位。為此,需要給出“必需”屬性。
一般語法:此處使用的可能值要麼為空,要麼為必填。
輸入元素的語法:
1 | < input type = " " required>
|
登入後複製
文字區域的語法:
1 | <text area rows = " " cols = " " name = " " required> < /text area>
|
登入後複製
選擇區域的語法:
1 2 3 | <select name = " " required>
<option value >
</option> </select>
|
登入後複製
什麼是 HTML 必需屬性?
您知道 HTML5 有可以表示為 true 或 false 值的屬性嗎?讓我進一步解釋一下。它們允許我們執行以下操作:
- 請確保在提交表格之前填寫所有字段,以避免任何問題。
- 在任何未選取的欄位上,提供通知訊息。
Html required 屬性應用於下面列出的最常用的三個元素:它們是
-
: 此屬性在 中指定。元素。此欄位包括電子郵件、文字、廣播、複選框和 URL 等輸入類型。
-
: 此元素顯示固定寬度大小的無限字元。文字區域由編號決定。 的和,同時顯示。使用 CSS 進行設計時,應利用高度和寬度屬性來指定物件的大小。 HTML5 文字區域具有自動對焦、佔位符、表單、最大長度、必填和換行等屬性。
-
Html select 元素提示使用者透過新增一個帶有空值的簡單模式「required」從清單中進行選擇。
HTML 必需屬性範例
讓我們嘗試 HTML 程式碼來了解 HTML 中的必要屬性。首先,我們將使用 屬性。
1. 屬性:必填欄位
將「required」屬性新增到輸入元素中以將欄位標記為簡單。當使用者填寫並提交所有必填欄位時,網頁瀏覽器將根據需要運行。讓我們看看是否在適當的地方添加必需的屬性。
範例#1
代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <html>
<head>
<h3>
Implementation of required attribute using input element
</h3>
<style>
div
{
padding: 12px 1;
}
</style>
<head>
<body>
<form>
<div>
<label> Full Name</label>
<input type= "text" placeholder= "Enter Full Name" name= "name" required>
</div>
<div>
<label> E-id </label>
<input type= "email" placeholder= "Enter E-ID" name= "email" required>
</div>
<div>
<label> Location </label>
<input type= "text" placeholder= "Enter the Location." name= "Loc" required>
</div>
<div>
<label>Password Pin</label>
<input type= "password" placeholder= "Enter PIN Password" name= "pwd" required>
<br>
</div>
<button type= "submit" VALUE= "SUBMIT" > Login </button>
</form>
</body>
</html>
|
登入後複製
輸出:

範例#2
我們將專注於偵測何時有人未選取單選按鈕。
代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html>
<html>
<head>
<h2>
Required Attribute
<h2>
<style>
h1,
h2 {
color: Orange;
font-style: Verdina;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>EDUCBA Tutorial</h1>
<h2>
HTML required Attribute with Input
</h2>
<form action= "" >
<label for = "name" > Full Name (5 to 9 characters): </label>
<input type= "text" id= "name" name= " Full name" required
minlength= "5" maxlength= "9" size= "14" >
Mandatory:
<input type= "radio"
name= "radiocheck"
required>
<br>
<input type= "submit" >
</form>
</body>
</html>
|
登入後複製
輸出:

2. 屬性
這個布林屬性指定文字區域元素在提交之前永遠不應該離開,並且還指定多行輸入控制。下面的範例說明了在表單之外使用此屬性。
代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE>
<html>
<head>
<title>Required Attribute implementation</title>
<style>
h1
{
color: brown;
font-style: Arial;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1> Text Area Required Attribute</h1>
<form action= "updates.jsp" id= "user idform" >
E-mail id: <input type= "text" name= "username" >
<input type= "submit" >
</form>
<br>
<textarea rows= "10" cols= "60" name= "comment" form= "user idform" >
Enter text here... </textarea>
|
登入後複製
輸出:

即使在上面的範例中,我們也可以使用最小和最大長度屬性來指定它。
3. 屬性
下面的範例示範了帶有
範例#1
代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html>
<html>
<body>
<form action= "/act_page.php" >
<select required>
<option value= "" >Select</option>
<option value= "Air India" >Hadoop</option>
<option value= "Emirates" > R programming</option>
<option value= "Doha" >PHP</option>
<option value= "Spice Jet" > Java</option>
</select>
<input type= "submit" >
</form>
</body>
</html>
|
登入後複製
輸出:

Note: Also, check their working without attempting the selection option in the