6.1 required 属性
フォームにおけるデータのバリデーションは、正確で完全な情報を確認するために重要な要素だよ。HTMLには required, pattern, min, maxみたいなデータ入力を確認するための組み込み属性がたくさんあるんだ。 あとはplaceholderやvalueなんかの属性もあって、これらはフォームとユーザーのインタラクションを向上させるんだよ。
required 属性は入力フィールドが必須であることを示すよ。このフィールドが入力されていないと、ブラウザはフォームを送信しないんだ。
シンタックス
<input type="text" name="username" required>
使用例
<form action="/" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<button type="submit">送信</button>
</form>
説明
required 属性が指定されている場合、ユーザーはフォームを送信する前にフィールドを入力しなきゃならないよ。 フィールドが空の場合、ブラウザはエラーメッセージを表示してフォームを送信しないんだ。
6.2 pattern 属性
pattern 属性はデータ入力を確認するための正規表現を設定するのに使うよ。もし入力されたデータが指定されたパターンに合わないと、ブラウザはエラーメッセージを表示してフォームを送信しない。
シンタックス
<input type="text" name="username" pattern="[A-Za-z]{3,}">
使用例
pattern 属性は入力されたデータが従うべき正規表現を設定するんだ。 この例では、ユーザー名は3文字以上の英字のみで構成されている必要があるよ。
<form action="/" method="post">
<label for="username">ユーザー名 (英字のみ、最低3文字):</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<button type="submit">送信</button>
</form>
6.3 min と max 属性
min と max 属性は、数値や日付フィールドに許容される最小値と最大値を設定するために使うよ。
シンタックス
<input type="number" name="age" min="18" max="99">
使用例
数値フィールド
min: 最小許容値を設定する。この例では、最小年齢は18歳max: 最大許容値を設定する。この例では、最大年齢は99歳
<form action="/" method="post">
<label for="birthday">生年月日 (1900-01-01から2024-12-31まで):</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
<button type="submit">送信</button>
</form>
6.4 placeholder 属性
placeholder 属性は、ユーザーがデータを入力し始めるまで入力フィールド内に表示されるテキストを設定するんだ。この属性は、ユーザーにそのフィールドにどんなデータが期待されているかを理解させる助けになるよ。
シンタックス
<input type="text" name="username" placeholder="ユーザー名を入力">
使用例
placeholder 属性は、ユーザーがデータを入力し始めるまで入力フィールド内にテキストを表示するんだ。この例では、プレースホルダーテキストは「ユーザー名を入力」だよ。
<form action="/" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" placeholder="ユーザー名を入力" required>
<button type="submit">送信</button>
</form>
6.5 value 属性
value 属性は入力要素の初期値を設定するんだ。この値はページの読み込みやフォームのリセット時にフィールドに表示されるよ。
シンタックス
<input type="text" name="username" value="default user">
使用例
value 属性は入力フィールドの初期値を設定するんだ。この例では、デフォルトのユーザー名は「default user」だよ。
<form action="/" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" value="default user" required>
<button type="submit">送信</button>
</form>
GO TO FULL VERSION