• required属性を使う方法
• フォームのバリデーションと動作
• カスタムエラーメッセージの設定
• JavaScriptを使った必須入力チェック
• さまざまな入力フィールドの必須設定例
• まとめ

required属性を使う方法

HTMLでは、フォームの入力フィールドを必須にするために required 属性を使用できます。この属性を指定すると、ユーザーが入力しない限りフォームを送信できません。

基本的な例

以下のコードでは、名前の入力を必須にしています。

<form>
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">送信</button>
</form>
    

適用可能な入力タイプ

required 属性は、以下の入力タイプで使用できます。

• text（テキスト入力）
• email（メールアドレス）
• password（パスワード）
• checkbox（チェックボックス）
• radio（ラジオボタン）
• file（ファイルアップロード）

フォームのバリデーションと動作

ブラウザは required を持つ入力フィールドが未入力の状態で送信ボタンを押すと、フォームの送信を防ぎます。また、エラーメッセージが表示されます。

デフォルトのブラウザのエラーメッセージ

たとえば、以下のようなフォームを試すと、入力がない場合にエラーメッセージが表示されます。

<form>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">送信</button>
</form>
    

カスタムエラーメッセージの設定

デフォルトのエラーメッセージではなく、カスタムメッセージを表示したい場合、title 属性を使用するか、JavaScriptを活用できます。

title属性を使う

以下のように title を設定すると、エラーメッセージをカスタマイズできます。

<form>
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" required title="年齢を入力してください">
    <button type="submit">送信</button>
</form>
    

JavaScriptでカスタムエラーメッセージ

JavaScriptを使うと、より詳細なバリデーションが可能になります。

<script>
document.querySelector("form").addEventListener("submit", function(event) {
    let input = document.getElementById("name");
    if (input.value.trim() === "") {
        alert("名前を入力してください");
        event.preventDefault();
    }
});
</script>
    

JavaScriptを使った必須入力チェック

JavaScriptを使うと、より高度なバリデーションが可能です。例えば、特定の条件を満たさない場合に警告を出すことができます。

例：すべてのフィールドが埋まっているかチェック

<script>
document.querySelector("form").addEventListener("submit", function(event) {
    let inputs = document.querySelectorAll("input[required]");
    for (let input of inputs) {
        if (input.value.trim() === "") {
            alert(input.name + "を入力してください");
            event.preventDefault();
            break;
        }
    }
});
</script>
    

さまざまな入力フィールドの必須設定例

チェックボックス

<form>
    <input type="checkbox" id="agree" name="agree" required>
    <label for="agree">利用規約に同意する</label>
    <button type="submit">送信</button>
</form>
    

ラジオボタン

<form>
    <p>性別を選択してください:</p>
    <input type="radio" id="male" name="gender" value="male" required>
    <label for="male">男性</label>
    <input type="radio" id="female" name="gender" value="female" required>
    <label for="female">女性</label>
    <button type="submit">送信</button>
</form>
    

ファイルアップロード

<form>
    <label for="file">ファイルをアップロード:</label>
    <input type="file" id="file" name="file" required>
    <button type="submit">送信</button>
</form>
    

まとめ

HTMLの required 属性を使うことで、フォームの入力フィールドを簡単に必須にできます。また、JavaScriptを使うと、さらに細かいバリデーションが可能になります。

適切なバリデーションを行い、ユーザーが正しく入力できるようにしましょう。