min / max
数字制限
<input type="number">
数字以外を入力しづらくなる。
minlength / maxlength
文字数制限
<input type="number" min="1" max="100">
3〜10文字のみ。
pattern（かなり重要）
正規表現で制御できる。
例えば：
<input type="text" pattern="[0-9]+">
数字のみ許可。
【疑問】このHTML上でのバリデーションは、エラーメッセージを出すことは出来るか？
結論:可能
| 方法 | 難易度 | 自由度 |
|---|---|---|
| ブラウザ標準 | 超簡単 | 低 |
| title属性 | 簡単 | 中 |
| JavaScriptで独自表示 | 難しい | 高 |
1. ブラウザ標準(ブラウザ依存のため、お使いのブラウザでメッセージ規格が変わる)
<input type="text" required>
↓
このフィールドを入力してください
2. title属性でメッセージ補助
<input
type="text"
pattern="[0-9]+"
title="数字のみ入力してください"
>
すると、pattern違反時に：
数字のみ入力してください
が表示される場合がある。
title は完全自由なエラーメッセージ機能ではない。あくまで「補助」。
3. JavaScriptで完全独自エラー
ここから先は「本格的なフロントエンド」。
例えば：
<span id="error-message"></span>
を置いて、
JavaScriptで：
errorMessage.textContent = '商品名を入力してください';
みたいに表示する。