概要

HTML5以降、フォームの入力支援のために数多くの属性が導入された。
その中でも特に利用頻度の高いのが autofocus / required / pattern の3つ。

これらは見た目に現れない「静かなアシスト機能」だが、UX・アクセシビリティ・入力精度に直結する影響力を持っている。
一方で、よくある誤用・乱用によって、逆にユーザーを混乱させたり、バリデーションがすり抜けたりするケースも後を絶たない。

本記事では、それぞれの属性の仕様・効果・ベストプラクティスと共に、よくある落とし穴も網羅的に解説する。

対象環境

HTML5対応ブラウザ全般  
（Chrome / Firefox / Edge / Safari / モバイルブラウザ含む）

`autofocus`：自動フォーカスによる入力誘導

<input type="text" name="email" autofocus>

✅ 効果：

ページ読み込み直後にこのフィールドにフォーカスが当たる
ユーザーが即座に入力を開始できる

⚠ 注意点：

ページ内で複数箇所に autofocus を指定しても、効くのは最初の1つだけ
モバイル環境では autofocus が無視されることがある（UX的配慮で）
スクロール位置が飛ぶ副作用がある（特にSPAやページ遷移時）

✅ ベストプラクティス：

重要な最初の入力項目だけに使う（例：ログインフォームのID欄）
JavaScriptによる element.focus() の方が柔軟性は高いが、autofocus は手軽に使える

`required`：入力必須のクライアントバリデーション

<input type="email" name="email" required>

✅ 効果：

入力されていないとフォーム送信できない
ブラウザが自動的に警告表示を行う
スクリーンリーダーはこのフィールドが「必須」であることを伝える

⚠ 注意点：

JavaScriptでフォーム送信した場合（form.submit()）、バリデーションをバイパスできてしまう
readonly な required フィールドは送信できない状態になる（一見バグに見える）
required が機能しない原因の多くは name 属性の欠落

✅ ベストプラクティス：

サーバー側でも必ずバリデーションを行う（クライアント側は“補助”）
アスタリスク * を表示するなど、視覚的に「必須項目」であることも示す

`pattern`：正規表現による入力ルールの定義

<input type="text" name="zip" pattern="\d{3}-\d{4}" placeholder="例: 123-4567">

✅ 効果：

入力が正規表現にマッチしないと送信できない
ブラウザは不一致時にエラーを表示してくれる

⚠ 注意点：

pattern は type="text" にしか効かない（email や number には独自の制約があるため無効）
ブラウザによってエラーメッセージの表示内容は異なる（制御できない）
サーバー側のバリデーションが不一致だとバグの原因になる

✅ ベストプラクティス：

title 属性を併用して「どんなパターンが求められているか」を明示する

<input type="text" name="zip" pattern="\d{3}-\d{4}" title="郵便番号は 123-4567 の形式で入力してください">

実用例：ログインフォームの実装例（3属性使用）

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

  <label for="password">パスワード</label>
  <input type="password" id="password" name="password" required pattern=".{8,}" title="8文字以上で入力してください">

  <button type="submit">ログイン</button>
</form>

autofocus：ID欄へ即座に入力可
required：必須チェック
pattern：パスワードの長さ制限（クライアント側）

結語

HTML属性による入力支援は、コード量を増やさずにUXを向上させる優れた手段だ。
だが、便利だからといって漫然と使えば、逆にユーザーを迷わせる結果になりかねない。

autofocus, required, pattern──
それぞれが果たす役割を理解し、意図をもって配置することが、信頼されるインターフェースの第一歩となる。

HTMLは見た目の記述ではない。意味の設計である。