HTMLフォームの入力チェックとは？required・minlength・maxlength・patternの書き方を初心者向けに解説

お問い合わせフォームで必須項目を空欄のまま送信したり、郵便番号へ想定外の形式を入力したりするのを防ぎたいことはありませんか。JavaScriptを書かなくても、HTMLには基本的な入力条件をブラウザーへ伝える仕組みがあります。

requiredは空欄を禁止し、minlength・maxlengthは文字列の長さ、patternは決められた入力形式を指定します。まずは「空欄」「長さ」「形式」のどれを確認したいかで属性を選ぶと、違いを整理できます。

この記事では、フォームの基本的なHTMLを書いたことがある方に向けて、4つの属性の使い分けと、条件ごとの確かめ方を解説します。後半には1つのHTMLファイルで試せる練習コードも用意しました。問い合わせの送信処理は扱わず、ブラウザーで入力条件を確認できる状態を目指します。

HTMLフォームの入力チェックとは？

HTMLフォームの入力チェックは、入力欄の値が指定した条件を満たしているか、送信前にブラウザーが確認する仕組みです。HTMLの属性だけで、空欄、文字列の長さ、メールアドレスの形式、独自の入力形式などを検証できます。

<form action="/contact" method="post">
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">送信する</button>
</form>

この例でメールアドレスを空欄のまま送信すると、ブラウザーは送信を止め、入力を促します。type="email"により、空欄でない値がメールアドレスとして扱える形式かどうかも確認されます。 action="/contact"は送信先の例で、受信処理を作る機能ではありません。この断片だけで問い合わせは届きません。実際に試すときは、後半の送信しない練習コードを使ってください。

MDNのクライアント側フォーム検証ガイドでは、HTMLの組み込み検証とJavaScriptによる検証が区別されています。本記事では、まず利用したいHTMLの組み込み検証を中心に扱います。

入力条件を満たさないときの動作

入力値が条件を満たすと、そのフォーム部品は有効な状態になります。条件を満たさない場合は無効な状態となり、通常の送信操作ではブラウザーが送信を止めてエラーメッセージを表示します。

ブラウザーのエラーメッセージの文言や見た目は、ブラウザーや表示言語によって異なります。そのため、エラーバルーンだけに説明を任せず、必要な入力形式を入力欄の近くへ文章でも示します。

ブラウザー側とサーバー側の役割

ブラウザーで行う確認を「クライアント側検証」、送信先で受け取ったデータを調べる確認を「サーバー側検証」といいます。ブラウザー側の確認は入力ミスを直す助けになりますが、ブラウザーの編集機能でHTMLを書き換えたり、フォームを通さずデータを送ったりすることもできるため、受信側でも確認が必要です。

MDNの制約検証ガイドでも、HTMLの制約検証によってサーバー側の検証が不要になるわけではないと説明されています。

required・minlength・maxlength・patternの違い

4つの属性は、確認する条件が異なります。まず「何を防ぎたいか」から選びましょう。

属性	確認する条件	主な使い方
required	値が空でないか	必須項目にする
minlength	文字列が短すぎないか	最小文字数を決める
maxlength	文字列が長すぎないか	最大文字数を決める
pattern	値が指定形式に一致するか	郵便番号などの形式を決める

空欄を禁止しながら文字数も制限したい場合は、requiredとminlength・maxlengthを組み合わせます。複数の条件を一つの属性へ詰め込むのではなく、役割ごとに属性を分けると読みやすくなります。

required属性で必須入力にする

requiredは、フォームを送信する前に値の入力や選択を必要とする論理属性です。値を書かず、属性名だけを付けます。

<label for="name">お名前（必須）</label>
<input type="text" id="name" name="name" required>

MDNのrequired属性リファレンスでは、対応するinputの種類に加えて、selectとtextareaでも使用できることが説明されています。

requiredは論理属性

required="false"と書いても任意項目にはなりません。required属性が存在するだけで必須になります。

<!-- 必須になる -->
<input type="text" name="company" required="false">

<!-- 任意にする場合はrequired属性を削除する -->
<input type="text" name="company">

HTMLの論理属性は、falseという文字列の内容ではなく、属性があるかどうかで状態が決まります。

必須項目の表示

required属性を付けるだけでなく、labelの「必須」など、入力前に分かる表示も追加します。色だけに頼らず、テキストでも伝えてください。

<label for="email">
  メールアドレス <span class="required-label">必須</span>
</label>
<input type="email" id="email" name="email" required>

radioとcheckboxの必須判定

対象	requiredを付けたとき	初心者向けの注意点
同じnameのradio	グループ内でいずれか一つの選択が必要	管理しやすいよう同じグループで付け方を統一する
checkbox	requiredを付けたcheckbox自体の選択が必要	同じnameでも全体から一つという意味にはならない
select・textarea	値の選択・入力が必要	selectの初期optionのvalueも確認する

選択肢のまとめ方とname・valueの関係は、HTMLのチェックボックスとラジオボタンの違いで確認できます。ここでは、requiredの判定単位が異なることを押さえてください。

minlength・maxlength属性で文字数を制限する

minlengthは入力できる文字列の最小長、maxlengthは最大長を指定します。どちらも0以上の整数で設定し、minlengthはmaxlength以下にします。

<label for="username">ユーザー名（4〜20文字）</label>
<input
  type="text"
  id="username"
  name="username"
  required
  minlength="4"
  maxlength="20"
>

MDNのminlength属性リファレンスとMDNのmaxlength属性リファレンスで、input・textareaにおける長さの条件を確認できます。

minlengthと空欄の関係

minlength="4"だけでは、空欄の送信を禁止できません。空欄も禁止する場合はrequiredを併用します。

<!-- 空欄は許可し、入力するなら4文字以上 -->
<input type="text" name="nickname" minlength="4">

<!-- 空欄を禁止し、4文字以上を必要とする -->
<input type="text" name="username" required minlength="4">

textareaの文字数制限

お問い合わせ内容のような複数行入力にも、文字列の長さを指定できます。

<label for="message">お問い合わせ内容（10〜500文字）</label>
<textarea
  id="message"
  name="message"
  required
  minlength="10"
  maxlength="500"
></textarea>

textareaの基本構造や初期値との違いは、HTMLのtextareaタグとrows・cols・placeholderの書き方で詳しく解説しています。

日本語・絵文字の文字数の数え方

minlength・maxlengthの長さは「UTF-16コード単位」という、文字をコンピューター内で表す単位で数えられます。たとえば「あ」は1、絵文字の「😀」は2として数えます。多くの日本語や英数字では見た目の文字数と一致しますが、絵文字などは1文字に見えても複数として数えられる場合があります。

厳密な文字数要件が必要なサービスでは、ブラウザー表示だけで判断せず、受信側でも同じ数え方を定義して検証します。

pattern属性で入力形式を指定する

patternは、text・search・tel・url・email・passwordのinputに対し、値が一致すべき正規表現を指定します。郵便番号や会員IDなど、決まった形式を求める場面に使えます。

<label for="postal-code">郵便番号（例：123-4567）</label>
<input
  type="text"
  id="postal-code"
  name="postal_code"
  required
  pattern="[0-9]{3}-[0-9]{4}"
  title="3桁の数字、ハイフン、4桁の数字で入力してください"
>

MDNのpattern属性リファレンスでは、対応するinputの種類、正規表現の扱い、ユーザビリティ上の注意点が説明されています。

patternの書式と値全体の一致

patternの値は/で囲まず、入力値全体へ一致する形で書きます。

<!-- 正しい -->
<input type="text" pattern="[0-9]{3}-[0-9]{4}">

<!-- JavaScriptの正規表現リテラルのようなスラッシュは付けない -->
<input type="text" pattern="/[0-9]{3}-[0-9]{4}/">

正規表現は、文字の並び方を記号で指定する書き方です。この例の[0-9]は半角数字1文字、{3}は直前の条件を3回、{4}は4回繰り返す指定です。間の-はハイフンそのものを表します。patternは部分一致ではなく、値全体が一致するかを確認します。郵便番号の前後へ別の文字が付いていれば、上の条件には一致しません。

patternとrequiredの組み合わせ

patternは、空でない値が指定形式に一致するかを確認します。任意項目で空欄なら、pattern違反にはなりません。

<!-- 空欄は許可し、入力する場合だけ形式を確認 -->
<input type="text" name="member_id" pattern="[A-Z]{2}[0-9]{4}">

<!-- 空欄も禁止する -->
<input type="text" name="member_id" required pattern="[A-Z]{2}[0-9]{4}">

入力形式を伝えるlabel・補足文・title

title属性はブラウザーのエラーメッセージに使われることがありますが、表示方法は一定ではなく、タッチ操作やキーボード操作では内容を確認しにくい場合があります。labelや補足文にも入力例を書きましょう。 次のaria-describedby="postal-help"は、入力欄の説明としてid="postal-help"の文章を関連付けます。画面を音声で読む支援ソフトにも説明を伝えやすくします。

<label for="postal-code">郵便番号</label>
<p id="postal-help">123-4567の形式で入力してください。</p>
<input
  type="text"
  id="postal-code"
  name="postal_code"
  pattern="[0-9]{3}-[0-9]{4}"
  aria-describedby="postal-help"
  title="123-4567の形式で入力してください"
>

type属性と入力チェックを組み合わせる

入力条件を考えるときは、まず値の種類に合うtype属性を選び、その上でrequired・minlength・maxlength・patternを追加します。

メールアドレスの形式を確認するtype=”email”

<label for="email">メールアドレス</label>
<input
  type="email"
  id="email"
  name="email"
  required
>

type="email"には、メールアドレスとして扱える形式かを確認する組み込み検証があります。ただし、実在するアドレスか、メールが届くかまでは確認できません。独自の利用条件がないのに、複雑なpatternで一般的なメールアドレスを狭く制限しないようにしてください。

inputの種類とname・valueの役割は、HTMLのinputタグとtype・name・valueの書き方で確認できます。

numberで数値の範囲を指定するmin・max

type="number"では、文字数のminlength・maxlengthや入力形式のpatternは使えません。数値の範囲にはmin・maxを使います。

<label for="quantity">数量（1〜10）</label>
<input
  type="number"
  id="quantity"
  name="quantity"
  min="1"
  max="10"
  required
>

確認したいこと	使用する属性	例
文字列の最小・最大長	minlength・maxlength	ユーザー名、本文
数値の最小・最大値	min・max	数量、金額、年齢
指定形式への一致	pattern	郵便番号、会員ID

textareaとpatternの対応範囲

textareaはrequired・minlength・maxlengthに対応しますが、patternには対応していません。textareaへ入力形式の検証が必要なら、JavaScriptによる追加検証とサーバー側の検証を設計します。

patternを使えるinput	代表的な用途	pattern以外の組み込み検証
text・search	会員ID、検索条件	基本は任意の文字列
tel	電話番号の独自形式	type単独では特定形式を強制しない
email・url	メール、URLの追加条件	type自体にも形式検証がある
password	パスワードの構成条件	入力値を画面上で隠す

入力チェックを試す練習コード

次のコードは、JavaScriptが有効なブラウザーで入力条件を試すための1ページです。条件を満たすと「入力条件を満たしました（送信していません）。」と表示します。入力チェックの成功と、問い合わせの送信完了は別です。

末尾のscriptは練習用の補助です。入力チェック自体はHTMLの属性が行い、JavaScriptは条件を満たした後の送信を止めて結果を表示します。コード全体をそのまま使い、氏名やメールアドレスには以下の架空の値を入力してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTMLの入力チェック練習</title>
</head>
<body>
  <h1>入力チェックを試す（送信しません）</h1>
  <form id="validation-demo">
    <p>
      <label for="name">お名前（2〜40文字・必須）</label><br>
      <input type="text" id="name" name="name"
        required minlength="2" maxlength="40">
    </p>
    <p>
      <label for="email">メールアドレス（必須）</label><br>
      <input type="email" id="email" name="email" required>
    </p>
    <p>
      <label for="postal-code">郵便番号（任意）</label><br>
      <span id="postal-help">123-4567の形式で入力してください。</span><br>
      <input type="text" id="postal-code" name="postal_code"
        pattern="[0-9]{3}-[0-9]{4}" aria-describedby="postal-help"
        title="123-4567の形式で入力してください">
    </p>
    <p>
      <label for="message">お問い合わせ内容（10〜500文字・必須）</label><br>
      <textarea id="message" name="message"
        required minlength="10" maxlength="500"></textarea>
    </p>
    <button type="submit">入力条件を確認する</button>
  </form>
  <p id="result" role="status"></p>

  <script>
    // 練習用：入力チェックはHTMLが行い、ここでは送信だけを止めます。
    const form = document.getElementById('validation-demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', function (event) {
      event.preventDefault();
      result.textContent = '入力条件を満たしました（送信していません）。';
    });
    form.addEventListener('input', function () {
      result.textContent = '';
    });
  </script>
</body>
</html>

HTMLファイルを保存して開く

入力値と期待する結果

基本値は、お名前山田太郎、メールアドレスtest@example.com、郵便番号は空欄、お問い合わせ内容フォームの入力確認です。です。各行を試す前に基本値へ戻すと、どの条件によるエラーかを区別できます。

変える項目	試す値・操作	期待する結果
変更なし	基本値でボタンを押す	成功文が表示される。送信はしない
お名前	空欄／山	required／minlengthで送信操作が止まる
メールアドレス	test	emailの形式エラーになる
郵便番号	空欄／1234567／123-4567	空欄は通る／形式エラー／通る
お問い合わせ内容	確認	10文字未満のため止まる
お名前	半角aを41文字入力する	通常は40文字で入力が止まる

エラー文の表現や表示のタイミングはブラウザーで異なります。正しい値に直して成功文が表示されれば、この練習の入力チェックは確認できています。実際の受信・保存・メール送信は、別途サーバー側へ実装する工程です。

フォーム全体の基本構造やform・label・buttonの関係は、HTMLのフォームとform・input・label・buttonの違いで確認できます。

入力状態をCSSで見分ける補足

検証対象のフォーム部品は、条件を満たすと:valid、満たさないと:invalidに一致します。これらは「疑似クラス」と呼ばれ、要素の状態を条件にしてCSSを適用する書き方です。次は操作後の状態を表す:user-valid・:user-invalidを使う補足例です。試す場合は、練習コードの</head>の直前へ<style>と</style>で囲んで追加してください。

#validation-demo input,
#validation-demo textarea {
  border: 2px solid #7a8e6d;
  border-radius: 6px;
  padding: 10px;
}

#validation-demo input:user-invalid,
#validation-demo textarea:user-invalid {
  border-color: #c28a3d;
}

#validation-demo :focus-visible {
  outline: 3px solid #536048;
  outline-offset: 3px;
}

#validation-demo input:user-valid,
#validation-demo textarea:user-valid {
  border-color: #536048;
}

:user-invalid・:user-validは、ユーザーが操作した後の状態を示すため、ページを開いた直後から必須項目をエラー表示にしにくい利点があります。対応状況やサイト要件を確認し、必要なら:invalid・:validを使います。

エラーの説明とキーボード操作

枠線の色を変えるだけでは、色を見分けにくい人やスクリーンリーダーを使用する人へ原因が伝わりません。どの条件を満たしていないか、入力欄の近くに文章で表示する設計も必要です。

ブラウザー標準のエラー文を独自表示へ置き換える場合は、JavaScriptの制約検証API、フォーカス移動、aria-liveなどを含めて設計します。これは本記事のHTML属性より一段進んだ内容です。

サーバー側で行う入力チェック

HTMLの入力チェックは、入力した人へ早くフィードバックするための仕組みです。ブラウザー内のHTMLや属性は変更できるため、不正なデータを完全に防げません。

サーバー側では、少なくとも次の内容を確認します。

• 必須値があるか
• 許容する長さや範囲か
• 想定する形式か
• アプリケーションで扱ってよい値か
• 保存や表示の前に安全な処理が行われているか

サーバーの言語やフレームワークによって実装方法は異なるため、本記事では具体的な受信処理コードまでは扱いません。

入力チェックが動かないときの確認方法

期待したエラーが出ない場合は、症状に合う項目を確認してください。

症状	最初に確認すること
ボタンを押しても何も起きない	ボタンがtype=”submit”か
特定の属性だけ効かない	inputの種類と対応属性
patternだけ期待どおりでない	値全体の一致と正規表現
必須の空欄でも送信できる	novalidate・formnovalidateの有無

送信ボタンがtype=”button”になっている

<!-- このボタンだけではフォームを送信しない -->
<button type="button">確認する</button>

<!-- 通常の送信と入力チェックを行う -->
<button type="submit">送信する</button>

type="button"は、JavaScriptなどで独自の処理を実行するためのボタンです。通常のフォーム送信を行わないため、そのまま押しても送信時の自動検証は始まりません。

属性が入力の種類に対応していない

numberへmaxlengthを付けたり、textareaへpatternを付けたりしても、期待した制約にはなりません。文字列の長さ、数値の範囲、入力形式のどれを確認したいのかに戻り、対応する属性を選び直します。

patternの正規表現が誤っている

patternをスラッシュで囲っていないか、波括弧や角括弧が閉じているか、入力例と値全体が一致するかを確認します。たとえば括弧の閉じ忘れで正規表現が無効になると、そのpatternによる検証は適用されません。複雑な正規表現を一度に書かず、この記事の郵便番号のような短い条件から試してください。

novalidate・formnovalidateが付いている

formのnovalidateまたは送信ボタンのformnovalidateがあると、その送信ではブラウザーの自動検証を行いません。

<!-- フォーム全体の自動検証を行わない -->
<form novalidate>
  <!-- 入力欄 -->
</form>

<!-- この送信ボタンを使うときだけ自動検証を行わない -->
<button type="submit" formnovalidate>入力途中で保存する</button>

独自のJavaScript検証を設計していない段階で誤って付けると、requiredやpatternが動かないように見えます。

練習の成功と本番の送信確認

練習コードでは、エラーになる値と成功する値を確かめれば終了です。本番の問い合わせフォームでは、これに加えて正しい値が受信・保存されることと、不正な値が受信側でも拒否されることを確認します。ブラウザーの成功表示だけでは、メール送信や保存の成功までは分かりません。

よくある質問

HTMLだけで入力チェックできますか？

はい。required・minlength・maxlength・patternや、email・numberなどのtype属性を使うと、基本的なクライアント側検証はHTMLだけで実装できます。独自の複合条件やエラー表示にはJavaScriptが必要になる場合があります。また、受信データはサーバー側でも必ず検証します。

required=”false”にすると任意項目になりますか？

いいえ。requiredは論理属性なので、required="false"でも属性が存在すれば必須です。任意項目にする場合はrequired属性自体を削除します。

minlength・maxlengthは日本語にも使えますか？

使えます。ただし長さはUTF-16コード単位で数えられるため、多くの日本語や英数字では見た目の文字数と一致しても、絵文字などでは一致しない場合があります。厳密な文字数要件は受信側でも同じ基準で確認してください。

patternの値をスラッシュで囲みますか？

囲みません。JavaScriptで正規表現リテラルを書くときの/.../とは異なり、HTMLのpattern属性には正規表現の中身だけを書きます。また、入力値全体へ一致する条件として扱われます。

textareaにpattern属性を使えますか？

使えません。textareaはrequired・minlength・maxlengthに対応します。独自形式の検証が必要な場合は、JavaScriptとサーバー側の検証を設計します。

ブラウザーのエラーメッセージを変更できますか？

HTML属性だけでは、標準エラーメッセージの文言や見た目を一律に変更できません。独自表示にはJavaScriptの制約検証APIなどを使います。変更する場合は、エラー内容、フォーカス、読み上げ、再入力後の更新まで含めて確認してください。

まとめ

HTMLフォームの入力チェックでは、確認したい条件に合わせて属性を選びます。

• 空欄を禁止するときはrequired
• 最小文字数はminlength、最大文字数はmaxlength
• 決まった入力形式は対応するinputへpattern
• minlengthだけでは空欄を禁止できない
• patternはスラッシュで囲まず、値全体へ一致させる
• numberの範囲はmin・maxを使う
• textareaはpatternに対応していない
• 入力形式はlabelや補足文でも事前に伝える
• ブラウザーだけでなくサーバー側でも検証する

まずは練習コードをHTMLファイルとして保存し、基本値で成功文が出ることを確かめてください。その後、空欄・短い値・形式違いを1項目ずつ試すと、各属性の役割を区別できます。練習では送信しません。本番のフォームでは、受信側の検証と送信処理も確認しましょう。