首頁 > web前端 > html教學 > HTML 必需屬性

HTML 必需屬性

王林
發布: 2024-09-04 16:17:57
原創
996 人瀏覽過

它可以表示為布林屬性,有時稱為必填項或開發人員友好的必填欄位。它應該由任何形式的控制項標記,以具有在網頁上提交任何表單之前不應保留為空的值。若要使字段成為必填字段,請在輸入字段的末尾添加屬性。客戶將收到彈出警報,提示應填寫必填字段;同時,它是 HTML5 的新功能,可以很好地處理複選框、單選按鈕、文字等輸入字段,這可能有助於前端驗證。

本文介紹了所需屬性的基本概念,並提供了在 Chrome 6、Firefox 和 Opera 等瀏覽器中啟動和使用的簡單範例,每個瀏覽器都有不同的預設行為。說起來,屬性是一個特殊的詞,它為 HTML 中的任何元素提供功能。與 HTML5 一樣,所需的屬性作為 UI 助理可見。當使用者提交表單時,無論請求是否包含數據,伺服器都會驗證請求。

文法

語法如下所示,您可以做的一個小小的更改是在表單中使用關鍵字「Attribute」建立文字輸入欄位。在提交表格之前,必須填寫必填欄位。為此,需要給出“必需”屬性。

一般語法:此處使用的可能值要麼為空,要麼為必填。

1

<element required>

登入後複製

 輸入元素的語法:

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 屬性應用於下面列出的最常用的三個元素:它們是

  1. : 此屬性在 中指定。元素。此欄位包括電子郵件、文字、廣播、複選框和 URL 等輸入類型。
  2. : 此元素顯示固定寬度大小的無限字元。文字區域由編號決定。 的和,同時顯示。使用 CSS 進行設計時,應利用高度和寬度屬性來指定物件的大小。 HTML5 文字區域具有自動對焦、佔位符、表單、最大長度、必填和換行等屬性。
  3. 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>

登入後複製

輸出:

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>

登入後複製

輸出:

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>

登入後複製

輸出:

HTML 必需屬性

即使在上面的範例中,我們也可以使用最小和最大長度屬性來指定它。

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>

登入後複製

輸出:

HTML 必需屬性

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