お問い合わせフォームやユーザー登録フォームなどユーザー自ら入力できる画面がフォームです。
フォームを作るにはformタグの中にinputタグ、textareaタグを使っていきます。
inputタグにも色々な種類があり、HTML5になってからさらに種類が増えました。
全て覚える必要はありません。実際に使う主なものだけ紹介しておきます。
目次
- 1 フォームパーツ
- 2 HTML5から増えたフォームパーツ
- 2.1 input type=email ｜E-mail入力
- 2.2 input type=tel ｜電話番号入力
- 2.3 input type=date ｜日付入力
- 2.4 input type=number ｜数値入力
- 2.5 input type=color ｜カラー選択
- 2.6 input type=range ｜レンジ入力
- 2.7 autofocus ｜オートフォーカス
- 2.8 placeholder ｜初期表示（プレースホルダー）を設定
- 2.9 required ｜入力内容を必須に
- 2.10 pattern ｜入力値を正規表現で自動チェック
- 2.11 min max ｜最大値・最小値の設定
- 2.12 step ｜ステップ値
- 2.13 autocomplete ｜自動補完（オートコンプリート）
- 2.14 progress ｜進捗
- 2.15 meter ｜範囲内の値
フォームパーツ
|
1 2 3 4 5 6 7 |
ユーザー名：<input type="text" name="username"><br> パスワード：<input type="password" name="password"><br> 好きな果物：<input type="checkbox" name="fruits[]">みかん<input type="checkbox" name="fruits[]" checked>レモン<br> 性別：<input type="radio" name="sex" checked>男性<input type="radio" name="sex">女性<br> コメント：<textarea name="comments"></textarea><br> 見えない入力欄：<input type="hidden" name="token"> <input type="submit" value="送信"> |
ユーザー名：
パスワード：
好きな果物：みかんレモン
性別：男性女性
コメント：
見えない入力欄：
HTML5から増えたフォームパーツ
スマホで見ると入力するボタンが変わっていたりするので、そちらでもチェックしてみてください。
input type=email ｜E-mail入力
|
1 |
<input type="email" name="xxx" /> |
input type=tel ｜電話番号入力
|
1 |
<input type="tel" name="xxx" /> |
input type=date ｜日付入力
|
1 |
<input type="date" name="xxx" /> |
input type=number ｜数値入力
|
1 |
<input type="number" name="xxx" /> |
input type=color ｜カラー選択
|
1 |
<input type="color" name="xxx" /> |
input type=range ｜レンジ入力
|
1 |
<input type="range" name="xxx" min="-5" max="5" value="1" /> |
autofocus ｜オートフォーカス
|
1 |
<input type="text" name="xxx" autofocus /> |
placeholder ｜初期表示（プレースホルダー）を設定
|
1 |
<input type="text" name="xxx" placeholder="入力して下さい" /> |
|
1 |
<textarea name="xxx" cols="20" rows="3" placeholder="ご記入ください"></textarea> |
required ｜入力内容を必須に
|
1 |
<input type="text" name="xxx" required /> ※入力必須<br> |
※入力必須
pattern ｜入力値を正規表現で自動チェック
|
1 |
<input type="text" name="xxx" pattern="^[0-9A-Za-z]+$" /> |
min max ｜最大値・最小値の設定
|
1 |
<input type="number" name="xxx" min="-5" max="5" /> -5～+5<br> |
-5～+5
step ｜ステップ値
|
1 |
<input type="number"name="xxx" step="0.1" /> |
autocomplete ｜自動補完（オートコンプリート）
|
1 2 3 4 5 6 |
<input type="text" name="xxx" autocomplete="on" list="yyy"> <datalist id="yyy"> <option value="犬">犬</option> <option value="猫">猫</option> <option value="鳥">鳥</option> </datalist> |
progress ｜進捗
|
1 |
<progress min="0" max="100" value="75" />進捗率75%</progress> |
meter ｜範囲内の値
|
1 |
<meter min="0" max="27" value="10">10/27</meter> |
他にもいくつかあるので、下記サイトなど一度目を通しておくといいでしょう。
