HTMLの必須属性-htmlチュートリアル-php.cn

構文

領域の選択の構文:

<select>:

HTML 必須属性の例

1. 属性: 必須フィールド

3. 属性

Example #2

Conclusion

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLの必須属性

王林

Sep 04, 2024 pm 04:17 PM

html html5 HTML Tutorial HTML Properties HTML tags

これはブール属性として記述することができ、開発者にとってわかりやすい必須フィールドまたは必須フィールドと呼ばれることもあります。 Web ページ上でフォームを送信する前に、空白のままにしてはならない値を持つように、任意の形式のコントロールでマークする必要があります。フィールドを必須にするには、入力フィールドの最後に属性を追加します。クライアントには、必須フィールドを入力する必要があることを示すポップアップアラートが通知されます。一方、これは HTML5 の新機能であり、チェックボックス、ラジオボタン、テキストなどの入力フィールドとうまく連携し、おそらくフロントエンドの検証に役立ちます。

この記事では、Chrome 6、Firefox、Opera などのブラウザで起動して動作させるための簡単な例を使用して、必須属性の基本概念を説明します。ブラウザごとにデフォルトの動作が異なります。属性は特別な言葉であり、HTML 内のあらゆる要素に機能を提供します。 HTML5 と同様に、必要な属性は UI ヘルパーとして表示されます。ユーザーがフォームを送信すると、データが含まれているかどうかに関係なく、サーバーはリクエストを検証します。

構文

構文を以下に示します。少しの変更は、フォーム内でキーワード「属性」を使用してテキスト入力フィールドを作成することです。フォームを送信する前に、必須フィールドに入力する必要があります。そのためには、「必須」属性が指定されます。

一般的な構文: ここで使用できる値は null または必須です。

<element required>

ログイン後にコピー

Input 要素の構文:

< input type =" " required>

ログイン後にコピー

テキスト領域の構文:

<text area rows ="   " cols = " " name =" " required> < /text area>

ログイン後にコピー

<select name =" "required>
<option value >
</option> </select>

ログイン後にコピー

領域の選択の構文:

問題を避けるため、フォームを送信する前に必ずすべてのフィールドに入力してください。

チェックされていないフィールドに通知メッセージを入力します。

HTML の必須属性は、以下にリストされている最も頻繁に使用される 3 つの要素に適用されます。
: この属性はで指定されます。要素。このフィールドには、電子メール、テキスト、ラジオ、チェックボックス、URL などの入力タイプが含まれます。
<テキストエリア>: この要素は、固定幅サイズで無制限の文字を表示します。そして、テキストエリアは番号によって決まります。個とが同時に表示されます。 CSS を使用してデザインする場合は、高さと幅のプロパティを利用してオブジェクトのサイズを指定する必要があります。 HTML5 テキスト領域には、オートフォーカス、プレースホルダー、フォーム、最大長、必須、ラップなどの属性があります。

を使用します。属性。

1. 属性: 必須フィールド

入力要素に「required」属性を追加して、フィールドを単純としてマークします。ユーザーが必要なフィールドをすべて入力して送信すると、Web ブラウザは必要に応じて機能します。必要な属性を適切な場所に追加するかどうかを確認してみましょう。例 #1

<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 誰かがラジオボタンをチェックしなかったときの検出に重点を置きます。

<!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. ＜テキストエリア＞属性このブール属性は、テキスト領域要素を送信前に決して放置しないことを指定し、複数行の入力制御も指定します。以下の例は、フォーム外でのこの属性の使用を示しています。

<!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の必須属性出力:

上記の例でも、min 属性と max length 属性を使用して指定できます。

3. 属性

以下の例は、 list while submitting the form.

Example #2

The example below is invalid, as the first child element got an empty value attribute. In line 5, I have mentioned .

Code:

<form action="#" method="post">
<div>
<label for="Country">Country name</label>
<select required aria-required="true" id="Country" name="Country">
<option>Choose</option>
<option value=" CN"> Canada</option>
<option value="DM">Denmark</option>
<option value="ETH">Ethiopia</option>
<option value="NZ">New Zealand</option>
<option value="sa">Spain</option>
<option value="IND">India</option>
<option value="SL">Sri lanka</option>
<option value="It">Italy</option>
</select>
</div>
</form>

ログイン後にコピー

Output:

HTMLの必須属性

Conclusion

It helps define the input field’s state and seeks the browser to validate the client-side input field. Being a fantastic element in HTML5 makes client-side form validation easy and provides better user enhancements. Their instant methods with just one piece of validation improve user – interaction.

以上がHTMLの必須属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。