色々なフォームパーツ

お問い合わせフォームやユーザー登録フォームなどユーザー自ら入力できる画面がフォームです。

フォームを作るにはformタグの中にinputタグ、textareaタグを使っていきます。

inputタグにも色々な種類があり、HTML5になってから種類もさらに増えました。

全て覚える必要はありません。実際に使う主なものだけ紹介しておきます。

フォームパーツ

ユーザー名:
パスワード:
好きな果物:みかんレモン
性別:男性女性
コメント:
見えない入力欄:

 

HTML5から増えたフォームパーツ

スマホで見ると入力するボタンが変わっていたりするので、そちらでもチェックしてみてください。

input type=email |E-mail入力

input type=tel |電話番号入力

input type=date |日付入力

input type=number |数値入力

input type=color |カラー選択

input type=range |レンジ入力

autofocus |オートフォーカス

placeholder |初期表示(プレースホルダー)を設定

required |入力内容を必須に

※入力必須

pattern |入力値を正規表現で自動チェック

min max |最大値・最小値の設定

 -5~+5

step |ステップ値

autocomplete |自動補完(オートコンプリート)

progress |進捗

meter |範囲内の値

他にもいくつかあるので、下記サイトなど一度目を通しておくといいでしょう。