これはブール屬性として記述することができ、開発者にとってわかりやすい必須フィールドまたは必須フィールドと呼ばれることもあります。 Web ページ上でフォームを送信する前に、空白のままにしてはならない値を持つように、任意の形式のコントロールでマークする必要があります。フィールドを必須にするには、入力フィールドの最後に屬性を追加します。クライアントには、必須フィールドを入力する必要があることを示すポップアップ アラートが通知されます。一方、これは HTML5 の新機能であり、チェックボックス、ラジオ ボタン、テキストなどの入力フィールドとうまく連攜し、おそらくフロントエンドの検証に役立ちます。
この記事では、Chrome 6、Firefox、Opera などのブラウザで起動して動作させるための簡単な例を使用して、必須屬性の基本概念を説明します。ブラウザごとにデフォルトの動作が異なります。屬性は特別な言葉であり、HTML 內(nèi)のあらゆる要素に機能を提供します。 HTML5 と同様に、必要な屬性は UI ヘルパーとして表示されます。ユーザーがフォームを送信すると、データが含まれているかどうかに関係なく、サーバーはリクエストを検証します。
構(gòu)文
構(gòu)文を以下に示します。少しの変更は、フォーム內(nèi)でキーワード「屬性」を使用してテキスト入力フィールドを作成することです。フォームを送信する前に、必須フィールドに入力する必要があります。そのためには、「必須」屬性が指定されます。
一般的な構(gòu)文: ここで使用できる値は null または必須です。
<element required>
Input 要素の構(gòu)文:
< input type =" " required>
テキスト領(lǐng)域の構(gòu)文:
<text area rows ="? ?" cols = " " name =" " required> < /text area>
<select name =" "required> <option value > </option> </select>
領(lǐng)域の選択の構(gòu)文:
- HTML の必須屬性とは何ですか?
- HTML5 には true または false の値として表すことができる屬性があることをご存知ですか?これについてさらに説明しましょう。これらにより、次のことが許可されます:
チェックされていないフィールドに通知メッセージを入力します。
- HTML の必須屬性は、以下にリストされている最も頻繁に使用される 3 つの要素に適用されます。
- : この屬性は で指定されます。要素。このフィールドには、電子メール、テキスト、ラジオ、チェックボックス、URL などの入力タイプが含まれます。
-
<テキストエリア>: この要素は、固定幅サイズで無制限の文字を表示します。そして、テキストエリアは番號によって決まります。 個と
が同時に表示されます。 CSS を使用してデザインする場合は、高さと幅のプロパティを利用してオブジェクトのサイズを指定する必要があります。 HTML5 テキスト領(lǐng)域には、オートフォーカス、プレースホルダー、フォーム、最大長、必須、ラップなどの屬性があります。
HTML 必須屬性の例
HTML コードを試して、HTML 內(nèi)の必須屬性を?qū)W習(xí)してみましょう。まず、 を使用します。屬性。
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. ＜テキストエリア＞屬性 このブール屬性は、テキスト領(lǐng)域要素を送信前に決して放置しないことを指定し、複數(shù)行の入力制御も指定します。以下の例は、フォーム外でのこの屬性の使用を示しています。
<!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>
コード:
出力:
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
なぜ私の畫像がHTMLに表示されないのですか？
Jul 28, 2025 am 02:08 AM
表示されていない畫像は、通常、ファイルパスの間違ったパス、ファイル名または拡張機能、HTML構(gòu)文の問題、またはブラウザキャッシュによって引き起こされます。 1. SRCパスがファイルの実際の位置と一致していることを確認し、正しい相対パスを使用します。 2.ファイル名のケースと拡張機能が正確に一致するかどうかを確認し、URLに直接入力して畫像をロードできるかどうかを確認します。 3.IMGタグ構(gòu)文が正しいかどうかを確認し、冗長文字がなく、ALT屬性値が適切であることを確認してください。 4.ページを強制的に更新するか、キャッシュをクリアするか、Incognitoモードを使用してキャッシュ干渉を排除してください。この順序でのトラブルシューティングは、ほとんどのHTML畫像表示の問題を解決できます。
別のタグ內(nèi)にタグを入れることはできますか？
Jul 27, 2025 am 04:15 AM
youcannotnesttagsinsisideantagbecuseit’sinvalidhtml; browsersautomatelycloseThefirsteforeopeningthenext、spedinginselementsied、useinlineelements like like like、orforstylingwithinaparagraph、またはblockainerslikegoriveparagragh
HTMLで順序付けられていないリストを作成する方法は？
Jul 30, 2025 am 04:50 AM
HTML Unoderedリストを作成するには、タグを使用してリストコンテナを定義する必要があります。各リストアイテムはタグで包まれており、ブラウザは自動的に弾丸を追加します。 1.タグを使用してリストを作成します。 2。各リスト項目はタグで定義されています。 3.ブラウザは、デフォルトのドットシンボルを自動的に生成します。 4。サブリストはネスティングを通じて実裝できます。 5。CSSのリストスタイルタイプの屬性を使用して、ディスク、サークル、スクエア、またはなしなどのシンボルスタイルを変更します。これらのタグを正しく使用して、標(biāo)準(zhǔn)の非秩序化リストを生成します。
コンテンツ誘導(dǎo)性の屬性を使用する方法は？
Jul 28, 2025 am 02:24 AM
thecontentEdentedItedItableattributemakesanyhtmlementedabledaitbyaddingcontenteditable = "true"、avainusErstodirectlymodifyContentinthebrowser.2.ItiscommonlyLichTexteditors、note-takingApps、およびin-place-placeditingintingintingintingintingintingtintingtintingtediv
SEOとアクセシビリティのセマンティックHTMLの重要性
Jul 30, 2025 am 05:05 AM
semantichtmlimprovesbothseoandaccessibilityを使用することはできません
html5 schema.orgマークアップを使用してカスタム語彙を定義します。
Jul 31, 2025 am 10:50 AM
Schema.orgタグは、セマンティックタグ（アイテムスコープ、アイテムタイプ、アイテムプロップなど）を使用して、検索エンジンがWebページコンテンツの構(gòu)造化データ形式を理解するのに役立ちます。カスタム語彙を定義するために使用できます。方法には、既存のタイプの拡張や追加のタイプを使用して新しいタイプの導(dǎo)入が含まれます。実際のアプリケーションでは、構(gòu)造を明確に保ち、公式の屬性の使用を優(yōu)先し、コードの妥當(dāng)性をテストし、カスタムタイプにアクセスできるようにします。予防策には、部分的なサポートの受け入れ、綴りエラーの回避、JSON-LDなどの適切な形式の選択が含まれます。
HTMLフォームで検索入力フィールドを作成する方法
Aug 02, 2025 pm 04:44 PM
usetheelementwithinatagtocreateasemanticsearchfield.2.includeaforAccessibility、settheform'sactionandmethod = "astributesenddatatoaseandpointwitharaibleableurl.3.addname =" q "dodefinethequeryparameter、umeplyholdertoguideuse
HTMLのリンクタグのREL屬性の目的は何ですか？
Aug 03, 2025 pm 04:50 PM
rel = "styleSheet" linkscssfilesforstylingthepage; 2.Rel = "preoad" hintstopreloadcriticalResourcesforPerformance; 3.REL = "ICON" setSthewebsite’sfavicon;
