どうもおはようポテト(@ohayoupoteto22)です。
いろんな種類のフォーム関連の部品を生成してくれるinputタグですが、ブログ主含め多くの方が思うことはこちら。
フォーム部品の種類多くてよく分からんわ
ということで今回はinputタグで生成できるフォーム部品をまとめました。
自分のための備忘録ですが参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
早速いってみよう！
お品書き
inputタグで生成できるフォーム部品まとめ
text
<input type="text" />テキスト入力用のフィールドです(1行)。
<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" />リセットボタンです。
<input type="button" />汎用ボタンです。
color
<input type="color" />色を選択できるやつです。
file
<input type="file" />ファイルを送信するためのものです。
image
<input type="image" />画像の送信ボタンです。
<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 | 全角英字 |
以上になります。
参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
