...

【HTML】inputタグで生成できるフォーム部品まとめ

HTMLのinputタグで生成できるフォーム部品まとめ

どうもおはようポテト(@ohayoupoteto22)です。

いろんな種類のフォーム関連の部品を生成してくれるinputタグですが、ブログ主含め多くの方が思うことはこちら。

フォーム部品の種類多くてよく分からんわ

ということで今回はinputタグで生成できるフォーム部品をまとめました。

自分のための備忘録ですが参考になれば幸いです⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう!

inputタグで生成できるフォーム部品まとめ

text

<input type="text" />

テキスト入力用のフィールドです(1行)。

email

<input type="email" />

メールアドレス入力用のフィールドです。

url

<input type="url" />

URL入力用のフィールドです。

tel

<input type="tel" />

電話番号入力用のフィールドです。

number

<input type="number" />

数値入力用のフィールドです。

password

<input type="password" />

パスワード入力用のフィールドです。

search

<input type="search" />

検索用の入力フィールドです。

date

<input type="date" />

日付入力用のフィールドです。

month

<input type="month" />

年月入力用のフィールドです。

week

<input type="week" />

年と週入力用のフィールドです。

time

<input type="time" />

時刻入力用のフィールドです。

datetime-local

<input type="datetime-local" />

ローカルな年月日入力用のフィールドです。

range

<input type="range" />

よく見るスライダーです。

checkbox

<input type="changebox" />

チェックボックスです。

radio

<input type="radio" />

ラジオボタンです。

submit

<input type="submit" />

送信ボタンです。

reset

<input type="reset" />

リセットボタンです。

button

<input type="button" />

汎用ボタンです。

color

<input type="color" />

色を選択できるやつです。

file

<input type="file" />

ファイルを送信するためのものです。

image

<input type="image" />

画像の送信ボタンです。

hidden

<input type="hidden" />

何も表示されない、送信専用のフィールドです。

 

inputタグに指定できる属性まとめ

おまけというか自分のための備忘録として指定できる属性もまとめました。

typeフォーム部品の種類
acceptファイルの形式(typeがfileの時)
alt画像の代替テキスト
autocomplete自動補完機能のon・off
inputmode入力モード
autofocusその要素に自動的なフォーカスのon・off
checked選択済みにするかのon・off(チェックボックスなど)
dirname文字表記の方向を示す値を送信するフィールドの名前
disabled無効化のon・off
form特定のform要素と結びつける
formactionフォームの送信先のURL
formenctypeデータ形式(MIMEタイプ)
formmethod送信する際のHTTPメソッド
formnovalidate入力内容のチェックのon・off
formtargetブラウジングコンテキストを指定
width
height高さ
listサジェスト機能で使用する選択肢を持ったdatalist要素
max最大値
maxlength最大文字数
min最小値
minlength最小文字数
multiple複数の選択(入力)のon・off
name名前
pattern正規表現
placeholderプレスホルダー(あらかじめフォームに表示されてるやつ)
readonly値の編集を不可能にする
required入力(選択)の必須化のon・off
size幅(文字数)
srcデータのURL
step数値の間隔
value

inputmode属性に指定できるもの

上で挙げたinputmode属性ですが、指定するキーワードによって入力モードを指定することができます。

そのキーワードとそれに対する入力モードをまとめてみました。

latin英字
latin-name英字(名前用)
latin-prose英字(文章用)
verbatim半角英数字
kana全角ひらがな
kana-name全角ひらがな(名前用)
katakana全角カタカナ
full-width-latin全角英字

 

以上になります。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA