演習課題「入力必須項目を指定しよう」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されています。
「プロジェクト名」「クライアント名」「希望納期」のinput要素にrequired属性を追加して、これらを入力必須項目として指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃10:入力を必須にする(required)
このチャプターでは、required属性について学習します。
required属性は、フォームの入力項目を必須項目にするための属性です。この属性が指定されたフォームコントロールは、値が入力されない限りフォームを送信できなくなります。
この属性は、input要素、select要素、textarea要素などの多くのフォームコントロールに適用できます。ユーザーが必須項目を空のまま送信しようとすると、ブラウザが標準のエラーメッセージを表示して入力を促します。
<p>チェックボックス</p>
<label><input type="checkbox" name="checkbox" value="A">選択肢A</label>
<label><input type="checkbox" name="checkbox" value="B">選択肢B</label>
<label><input type="checkbox" name="checkbox" value="C">選択肢C</label>
<p>ラジオボタン</p>
<label><input type="radio" name="checkbox" value="A">選択肢A</label>
<label><input type="radio" name="checkbox" value="B">選択肢B</label>
<label><input type="radio" name="checkbox" value="C">選択肢C</label>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力を必須にする</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style01.css">
</head>
<body>
<form action="">
<p>
名前<br>
<input type="text" name="name" required>
</p>
<p><button type="submit">送信</button></p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力を必須にする</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style01.css">
</head>
<body>
<form action="">
<p>チェックボックス</p>
<label><input type="checkbox" name="checkbox" value="A" required>選択肢A</label>
<label><input type="checkbox" name="checkbox" value="B">選択肢B</label>
<label><input type="checkbox" name="checkbox" value="C">選択肢C</label>
<p>ラジオボタン</p>
<label><input type="radio" name="checkbox" value="A" required>選択肢A</label>
<label><input type="radio" name="checkbox" value="B">選択肢B</label>
<label><input type="radio" name="checkbox" value="C">選択肢C</label>
<p><button type="submit">送信</button></p>
</form>
</body>
</html>
MDN web docs - HTML 属性: required
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/required