色々なフォームパーツ

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

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

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

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

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

フォームパーツ

ユーザー名：<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="送信">

ユーザー名：<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">

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

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

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

input type=email ｜E-mail入力

<input type="email" name="xxx"  />

1	<input type="email" name="xxx" />

input type=tel ｜電話番号入力

<input type="tel" name="xxx"  />

1	<input type="tel" name="xxx" />

input type=date ｜日付入力

<input type="date" name="xxx"  />

1	<input type="date" name="xxx" />

input type=number ｜数値入力

<input type="number" name="xxx"  />

1	<input type="number" name="xxx" />

input type=color ｜カラー選択

<input type="color" name="xxx"  />

1	<input type="color" name="xxx" />

input type=range ｜レンジ入力

<input type="range" name="xxx" min="-5" max="5" value="1" />

1	<input type="range" name="xxx" min="-5" max="5" value="1" />

autofocus ｜オートフォーカス

<input type="text" name="xxx" autofocus />

1	<input type="text" name="xxx" autofocus />

placeholder ｜初期表示（プレースホルダー）を設定

<input type="text" name="xxx" placeholder="入力して下さい" />

1	<input type="text" name="xxx" placeholder="入力して下さい" />

<textarea name="xxx" cols="20" rows="3" placeholder="ご記入ください"></textarea>

1	<textarea name="xxx" cols="20" rows="3" placeholder="ご記入ください"></textarea>

required ｜入力内容を必須に

<input type="text" name="xxx" required /> ※入力必須<br>

1	<input type="text" name="xxx" required /> ※入力必須<br>

※入力必須

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

<input type="text" name="xxx" pattern="^[0-9A-Za-z]+$" />

1	<input type="text" name="xxx" pattern="^[0-9A-Za-z]+$" />

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

<input type="number" name="xxx" min="-5" max="5" />　-5～+5<br>

1	<input type="number" name="xxx" min="-5" max="5" />　-5～+5<br>

　-5～+5

step ｜ステップ値

<input type="number"name="xxx" step="0.1" />

1	<input type="number"name="xxx" step="0.1" />

autocomplete ｜自動補完（オートコンプリート）

<input type="text" name="xxx" autocomplete="on" list="yyy">
<datalist id="yyy">
<option value="犬">犬</option>
<option value="猫">猫</option>
<option value="鳥">鳥</option>
</datalist>

</datalist>

progress ｜進捗

<progress min="0" max="100" value="75" />進捗率75%</progress>

1	<progress min="0" max="100" value="75" />進捗率75%</progress>

meter ｜範囲内の値

<meter min="0" max="27" value="10">10/27</meter>

1	<meter min="0" max="27" value="10">10/27</meter>

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

http://www.htmq.com/html5/input.shtml

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。