入力フォームで「必須項目が空のまま送信された」「メールアドレスの形式が違う」といったミスを防ぎたいとき、JavaScript を書かなくても HTML の属性だけで入力チェック（バリデーション）ができます。required・pattern・minlength・maxlength などの属性を input に付けるだけで、ブラウザが送信前に自動でチェックし、問題があればエラーメッセージを表示してくれます。この記事では、これらのバリデーション属性の使い方と、CSS でのエラー表示、つまずきやすいポイントまで、実際に動くフォームを見ながら解説します。
目次
HTML だけでできる入力チェック
HTML には「フォームバリデーション」という仕組みが標準で備わっています。input に条件を表す属性を付けておくと、送信ボタンを押したときにブラウザが値をチェックし、条件を満たさない項目があれば送信を止めてエラーメッセージを出します。代表的な属性を一覧で見てみましょう。
| 属性 | 役割 |
|---|---|
required | 必須項目にする（空だと送信できない） |
minlength / maxlength | 入力できる最小・最大の文字数 |
min / max | 数値や日付の最小・最大値 |
pattern | 正規表現で入力形式を指定する |
type | email・url など形式に応じたチェック |
下のフォームは、これらの属性を使った例です。空のまま、または条件に合わない値で「送信する」を押すと、ブラウザの標準エラーが表示されます。入力欄の枠の色は CSS で、条件を満たすと緑・満たさないと赤に変わるようにしています。実際に入力して動きを確かめてみてください。
<form>
<p>
<label>名前（必須）<br>
<input type="text" name="name" required placeholder="必須項目です">
</label>
</p>
<p>
<label>メールアドレス<br>
<input type="email" name="email" placeholder="name@example.com">
</label>
</p>
<p>
<label>ユーザー名（半角英数3〜10字）<br>
<input type="text" name="user" pattern="[a-zA-Z0-9]{3,10}"
title="半角英数字を3〜10文字で入力してください">
</label>
</p>
<button type="submit">送信する</button>
</form>
form { font-family: sans-serif; max-width: 320px; }
input {
width: 100%;
padding: 6px 8px;
margin-top: 4px;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/* 入力内容が条件を満たさないとき赤枠に */
input:invalid { border-color: #e53935; }
/* 条件を満たすと緑枠に */
input:valid { border-color: #43a047; }
button {
margin-top: 8px;
padding: 8px 16px;
border: 0;
border-radius: 4px;
background: #4a3aff;
color: #fff;
cursor: pointer;
}
required で必須項目にする
required は、その項目を必須にする属性です。値が空のまま送信しようとすると、ブラウザが「このフィールドを入力してください」といったメッセージを出して送信を止めます。属性に値は不要で、書くだけで有効になります。
<input type="text" name="name" required>
<!-- チェックボックスやセレクトにも使える -->
<input type="checkbox" name="agree" required>文字数を制限する minlength・maxlength
maxlength は入力できる最大の文字数、minlength は最小の文字数を指定します。maxlength はそもそも上限を超えて入力できなくなるのに対し、minlength は文字数が足りない状態で送信しようとしたときにエラーになる、という違いがあります。
<!-- 8文字以上・20文字以下のパスワード -->
<input type="password" name="pw" minlength="8" maxlength="20" required>数値や日付の入力欄では、文字数ではなく値の大きさを min / max で制限します。たとえば type="number" に min="0" max="100" を付ければ、0〜100以外の数値は送信できなくなります。
pattern で入力形式を指定する
pattern 属性には正規表現を指定し、その形式に一致する入力だけを許可します。郵便番号や電話番号、半角英数字のユーザー名など、決まったフォーマットを求めたいときに便利です。入力された値が正規表現に完全に一致する必要があります。
<!-- 郵便番号（数字3桁-数字4桁） -->
<input type="text" name="zip" pattern="\d{3}-\d{4}"
title="123-4567 の形式で入力してください">
<!-- 半角英数字3〜10文字のユーザー名 -->
<input type="text" name="user" pattern="[a-zA-Z0-9]{3,10}">pattern を使うときは、あわせて title 属性にどんな形式が必要かを書いておくのがおすすめです。条件に合わないときのエラーメッセージにこの説明が追加され、利用者が何を入力すべきか分かりやすくなります。
type による自動チェック
input の type を適切に選ぶだけでも、形式チェックが効きます。type="email" なら「@ を含むメール形式か」、type="url" なら「URL の形式か」をブラウザが自動で判定します。pattern を書かなくても基本的な形式チェックができるので、まずは正しい type を選ぶことが第一歩です。
<input type="email" name="email" required> <!-- メール形式 -->
<input type="url" name="site"> <!-- URL形式 -->
<input type="number" name="age" min="0" max="120">CSS でエラー・正常を見せる
バリデーションの状態は、CSS の擬似クラス :invalid（条件を満たさない）と :valid（満たす）でスタイルを切り替えられます。冒頭のデモのように、入力欄の枠の色を変えると、利用者がリアルタイムで状態を把握しやすくなります。
input:invalid { border-color: #e53935; } /* 赤 */
input:valid { border-color: #43a047; } /* 緑 */ただし、未入力の必須項目は最初から :invalid 扱いになるため、ページを開いた直後から赤枠になってしまいます。気になる場合は、利用者が操作した後だけ色を変える :user-invalid 擬似クラスを使うか、JavaScript で送信を試みたタイミングに合わせて表示する方法もあります。
サーバー側のチェックも必要な理由
HTML のバリデーションはとても手軽ですが、これだけに頼ってはいけません。ブラウザの開発者ツールで属性を消したり、フォームを使わず直接データを送信したりすれば、チェックを簡単に回避できてしまうからです。HTML のバリデーションは「利用者の入力ミスを早く知らせて使いやすくするためのもの」と位置づけ、本当の検証は必ずサーバー側（PHP など）でも行うようにしてください。両方を組み合わせることで、使いやすさと安全性を両立できます。
まとめ
HTML のバリデーション属性を使えば、JavaScript なしで基本的な入力チェックができます。要点を整理します。
requiredで必須項目に。空のまま送信できなくなる。minlength/maxlengthで文字数、min/maxで数値や日付の範囲を制限。patternは正規表現で形式を指定。titleに説明を添えると親切。type="email"など適切なtypeを選ぶだけでも形式チェックが効く。- 状態は CSS の
:invalid/:validで見せられる。 - HTML のチェックは回避可能。検証はサーバー側でも必ず行う。
まずは required と正しい type を付けるところから始めると、少ない手間でフォームの使いやすさがぐっと上がります。形式が決まった項目には pattern を加えていきましょう。