HTMLの必須属性

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

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

構文

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

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

<element required></element>

Input 要素の構文:

テキスト領域の構文:

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

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

領域の選択の構文:

HTML の必須属性とは何ですか?
HTML5 には true または false の値として表すことができる属性があることをご存知ですか?これについてさらに説明しましょう。これらにより、次のことが許可されます:

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

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

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

:

HTML の select 要素は、空の値を持つ単純なパターン「必須」を追加することで、ユーザーがリストから選択するよう求めます。

HTML 必須属性の例

HTML コードを試して、HTML 内の必須属性を学習してみましょう。まず、 を使用します。属性。

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

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

<h3>
Implementation of required attribute using input element
</h3>
<style>
div
{
padding: 12px 1;
}
</style>

Full Name

E-id

Location

Password Pin

Login

コード:

出力:

例 #2 誰かがラジオ ボタンをチェックしなかったときの検出に重点を置きます。

<h2>
Required Attribute
<h2>
<style>
h1,
h2 {
color: Orange;
font-style: Verdina;
}
body {
text-align: center;
}
</style>


<h1>EDUCBA Tutorial</h1>
<h2>
HTML required Attribute with Input
</h2>
</h2>
</h2>

Full Name (5 to 9 characters): Mandatory:

コード:

出力:

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

<title>Required Attribute implementation</title>
<style>
h1
{
color: brown;
font-style: Arial;
}
body {
text-align: center;
}
</style>


<h1> Text Area Required Attribute</h1>

E-mail id:

Enter text here...

コード:

出力:

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

3. 属性

以下の例は、 を使用した必須属性を示しています。使用法。これにより、ブラウザがフォーム コントロールから選択して送信できるようになります。 例 #1

Select Hadoop R programming PHP Java

コード:

出力:

Note: Also, check their working without attempting the selection option in the 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

choose. To make the code valid, make Choose.

Code:

Country name

Choose Canada Denmark Ethiopia New Zealand Spain India Sri lanka Italy