【HTML】inputタグ - 入力
HTMLのinputタグをご紹介します。
inputタグ
inputタグはユーザーからの入力項目です。
テキストや数値など様々な形式で入力できます。
基本構文
<input name="データ名" type="入力タイプ" value="値">データ名
name属性の値は入力データの名称を指定します。
一般的にinput要素の入力データはプログラムで処理します。 入力データは複数個ある可能性があるため、それぞれにデータ名を付けて扱いやすくします。
入力タイプ
入力データはテキストや数値、ファイルなど様々な形式があります。
input要素はtype属性の値によって、入力方法を変更することができます。
※ ブラウザや端末により同じタイプでも動作が異なる場合があることに注意が必要です。
button / ボタン
buttonはボタン入力です。
ボタンに表示するテキストはvalue属性で設定します。
<input type="button" value="ボタン">checkbox / チェックボックス
checkboxはチェックボックス入力です。
クリックに応じてチェック状態が反転します。
<input type="checkbox">color / 色入力
colorは色入力です。
<input type="color">date / 日付入力
dateは日付入力です。
<input type="date">datetime-local / 日時入力
datetime-localは日時入力です。
<input type="datetime-local">email / メールアドレス入力
emailはメールアドレス入力です。
ブラウザのフォーム送信では、入力されたテキストがメールアドレス形式に沿っているか自動でチェックします。
<input type="email">file / ファイル入力
fileはファイル入力です。
<input type="file">hidden / 非表示の入力項目
hiddenは非表示の入力項目です。
フォーム送信ではvalue属性の値が送信されます。
<input type="hidden" value="test">image / ボタン（画像）
imageは画像のボタン入力です。
src属性で指定した画像がボタンになります。
<input type="image" src="/favicon.png">month / 年月入力
monthは年月入力です。
<input type="month">number / 数値入力
numberは数値入力です。
半角数字のみ入力できます。
<input type="number">password / パスワード入力
passwordはパスワード入力です。
入力データは*などに代わって表示されます。
<input type="password">radio / 排他入力
radioは排他選択入力です。
name属性値が同じ入力項目で、１つのみ選ぶことができます。
<input name="test" type="radio">
<input name="test" type="radio">
<input name="test" type="radio">range / 範囲数値入力
rangeは範囲数値入力です。
最大値はmax属性、最小値はmin属性で設定します。
<input type="range" max="10" min="0">search / 検索キーワード入力
searchは検索キーワード入力です。
入力データから改行が自動で削除されます。
<input type="search">submit / 送信ボタン
submitはフォーム送信ボタンです。
form要素の中にある場合、クリックするとフォームデータを送信します。
また、ボタンに表示するテキストはvalue属性で設定します。
<input type="submit" value="送信">tel / 電話番号入力
telは電話番号入力です。
<input type="tel">text / テキスト入力
textはテキスト入力です。
<input type="text">time / 時間入力
timeは時間入力です。
<input type="time">url / URL入力
urlはURL入力です。
<input type="url">week / 週入力
weekは週入力です。
<input type="week">属性
主な属性をご紹介します。
| 属性名 | タイプ | 内容 |
|---|---|---|
| accept | file | 入力可能なファイルタイプ |
| checked | checkbox,radio | チェック |
| disable | 全て | 入力項目の非活性化 |
| max | date,datetime-local,month,range,time,week | 最大値 |
| maxlength | email,password,search,tel,text,url | 最大文字数 |
| min | date,datetime-local,month,range,time,week | 最小値 |
| minlength | email,password,search,tel,text,url | 最小文字数 |
| multiple | email,file | 複数値の許可 |
| name | 全て | 入力データ名 |
| pattern | email,password,search,tel,text,url | 入力テキストのパターン制限 |
| placeholder | email,password,search,tel,text,url | 未入力時に表示するテキスト |
| readonly | 全て | 読み取りのみ（入力不可） |
| required | 全て | 入力必須 |
| size | email,password,search,tel,text,url | 文字数 |
| src | image | 画像パス |
| type | 全て | 入力項目タイプ |
| value | 全て | 入力データ値（初期値） |
サンプルコード
テキスト入力
<p>名前を入力してください</p>
<input type="text">チェックボックス入力
<label><input type="checkbox">利用規約に同意する</label>日付入力
<p>予約日時を入力してください。</p>
<input type="date">ファイル入力
<p>写真をアップロードしてください。</p>
<input type="file" accept="image/*">パスワード入力
<p>パスワードを入力してください。</p>
<input type="password">排他入力
<p>コースを選択してください。</p>
<label><input type="radio" name="course">Aコース</label>
<label><input type="radio" name="course">Bコース</label>
<label><input type="radio" name="course">Cコース</label>
