HTML Academy · レッスン

required pattern min max maxlength

Q: 「required pattern min max maxlength」で何を学びますか？

フォーム入力に組み込みのバリデーション制約を追加します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

フォーム入力に組み込みのバリデーション制約を追加します

「required pattern min max maxlength」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

HTML5フォームバリデーション

HTML5には組み込みのフォームバリデーションが追加されており、JavaScriptは必要ありません。

ブラウザは送信前に制約をチェックします
ネイティブのエラーメッセージが自動的に表示されます
CSSの:valid / :invalid擬似クラスと連携します

required

required属性は、フィールドが空の場合の送信を防ぎます。

<label for="email">Email (required)</label>
<input type="email" id="email" name="email" required>
<!-- Empty on submit → browser shows "Please fill in this field" -->
<!-- Also: field is :invalid until filled -->

pattern

pattern属性は、正規表現を使用してテキストを検証します。

<label for="username">Username (letters and numbers only)</label>
<input
  type="text"
  id="username"
  name="username"
  pattern="[a-zA-Z0-9]{3,20}"
  title="3-20 letters and numbers"
>
<!-- pattern anchored at both ends automatically -->
<!-- title provides the error message hint -->

よく使われるpatternの例

フォームフィールドで役立つ正規表現のpatternです。

<!-- Phone: digits, spaces, hyphens -->
<input type="tel" pattern="[0-9 ()+-]{7,20}">

<!-- Postal code: US zip code -->
<input type="text" pattern="[0-9]{5}(-[0-9]{4})?">

<!-- Password: min 8 chars, one uppercase, one digit -->
<input type="password" pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}">

<!-- Twitter handle: -->
<input type="text" pattern="@?[A-Za-z0-9_]{1,15}">

minとmax

数値、日付、rangeのinputに制約を設定します。

<!-- Number range -->
<input type="number" name="qty" min="1" max="100">

<!-- Date range -->
<input type="date" name="checkin" min="2025-01-01" max="2025-12-31">

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5">

<!-- Time -->
<input type="time" name="meeting" min="09:00" max="17:00">

maxlengthとminlength

テキストinputの長さを制御します。

<input type="text" name="username" minlength="3" maxlength="20">
<!-- minlength: minimum number of characters required -->
<!-- maxlength: maximum characters allowed (browser enforces hard stop) -->

<textarea name="bio" minlength="50" maxlength="500"></textarea>
<!-- Same attributes work on textarea -->

step

step属性は、numberとrangeのinputで有効な増分を定義します。

<input type="number" name="price" min="0" step="0.01">
<!-- Accepts decimal prices: 0.00, 0.01, 4.99, etc. -->

<input type="number" name="qty" min="0" step="5">
<!-- Only multiples of 5: 0, 5, 10, 15... -->

<input type="range" min="0" max="100" step="10">
<!-- Snaps to: 0, 10, 20, ..., 100 -->

CSSの:validと:invalid

バリデーション状態に応じてフィールドのスタイルを設定します。

input:valid {
  border-color: #22c55e;   /* green when valid */
}

input:invalid {
  border-color: #ef4444;   /* red when invalid */
}

/* Avoid showing :invalid on page load (before user interaction): */
input:not(:placeholder-shown):invalid {
  border-color: #ef4444;
}
/* Only show invalid style after user has typed something */

カスタムエラーメッセージのためのtitle

title属性は、ブラウザのバリデーションエラーにヒントを表示します。

<input
  type="text"
  pattern="[A-Za-z]{2,3}"
  title="Enter a 2 or 3 letter country code (e.g. US, GB, DEU)"
  name="country-code"
>
<!-- Browser shows the title text alongside the default error message -->

制約の組み合わせ

複数のバリデーション属性を組み合わせて使用できます。

<input
  type="text"
  name="username"
  required
  minlength="3"
  maxlength="20"
  pattern="[a-z][a-z0-9_]*"
  title="Lowercase letters, numbers, underscores. Must start with a letter."
>
<!-- All constraints must pass for the field to be :valid -->

novalidateとバリデーションのタイミング

バリデーションはデフォルトでは送信時に実行されます。各inputイベントで検証するには、次のようにします。

<input type="email" id="email">

<script>
const input = document.getElementById('email');
input.addEventListener('blur', () => {
  // Check validity on blur (when user leaves field):
  if (!input.validity.valid) {
    input.reportValidity();
  }
});
</script>

バリデーション擬似クラスのまとめ

フォームバリデーションで使用するCSS擬似クラスです。

:valid — 制約のバリデーションに合格しています
:invalid — 1つ以上の制約に違反しています
:required — required属性があります
:optional — required属性がありません
:in-range — 値がmin/maxの範囲内です
:out-of-range — 値がmin/maxの範囲外です

クイックチェック

テキストinputの最大文字数を制限する属性はどれですか？

まとめ：バリデーション属性

HTML5バリデーションの基本事項です。

required — フィールドへの入力を必須にします
pattern — 正規表現に対して検証します
min / max — number、date、rangeの値の範囲を設定します
maxlength / minlength — 文字数の範囲を設定します
step — 有効な増分を設定します
CSSの:valid / :invalidでスタイルを設定します

よくある質問

「required pattern min max maxlength」レッスンは無料ですか？

はい。「required pattern min max maxlength」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「required pattern min max maxlength」で何を学びますか？

フォーム入力に組み込みのバリデーション制約を追加しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「required pattern min max maxlength」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る