ホームページ > 記事 > ウェブフロントエンド > HTMLの必須属性
HTMLの必須属性
- 王林オリジナル
- 2024-09-04 16:17:57870ブラウズ
これはブール属性として記述することができ、開発者にとってわかりやすい必須フィールドまたは必須フィールドと呼ばれることもあります。 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 の必須属性とは何ですか?
- HTML5 には true または false の値として表すことができる属性があることをご存知ですか?これについてさらに説明しましょう。これらにより、次のことが許可されます:
チェックされていないフィールドに通知メッセージを入力します。
- HTML の必須属性は、以下にリストされている最も頻繁に使用される 3 つの要素に適用されます。
- : この属性は で指定されます。要素。このフィールドには、電子メール、テキスト、ラジオ、チェックボックス、URL などの入力タイプが含まれます。
-
<テキストエリア>: この要素は、固定幅サイズで無制限の文字を表示します。そして、テキストエリアは番号によって決まります。 個と
が同時に表示されます。 CSS を使用してデザインする場合は、高さと幅のプロパティを利用してオブジェクトのサイズを指定する必要があります。 HTML5 テキスト領域には、オートフォーカス、プレースホルダー、フォーム、最大長、必須、ラップなどの属性があります。
HTML 必須属性の例
HTML コードを試して、HTML 内の必須属性を学習してみましょう。まず、 を使用します。属性。
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>
コード:
出力:
例 #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>
コード:
出力:
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>
コード:
出力:
上記の例でも、min 属性と max length 属性を使用して指定できます。
3. 属性
以下の例は、
<!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>
コード:
出力: