inputの概要
input要素は、formタグで作成したフォームの中で、ユーザーからのデータを受け取るためのテキスト入力や実行ボタンなどのフォーム部品を表示します。type属性の値によって様々なデータ入力フォームを表示可能です。
inputに使える属性
属性とは<input>タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。
input要素はtype属性によって様々なフォーム部品として利用できます。type属性に指定できるキーワードと対応する部品は下記の通りです。
type属性に指定できるキーワード
| button | 既定の動作を持たない、汎用的なプッシュボタン |
|---|---|
| checkbox | 選択または未選択の値をとることのできるチェックボックス |
| color | 色の入力 |
| date | 日付（時刻を除く年月日） |
| 電子メールアドレス入力欄 | |
| file | ファイルをアップロードするための入力欄 ファイルの種類を定義する場合はaccept属性を指定 |
| hidden | 表示せずに送信するテキスト |
| image | 画像による送信ボタン 画像のソースをsrc属性、代替テキストをalt属性で指定 |
| number | 数値を入力する入力欄 |
| password | 入力値を隠すテキスト入力欄 maxlength及び minlength属性で入力文字数をコントロール |
| radio | 複数の選択肢からひとつを選択するラジオボタン |
| range | 大まかな数値の入力欄 |
| reset | フォームの入力内容を無効化するボタン |
| search | 検索テキストを入力するための入力欄 |
| submit | フォームを送信するためのボタン |
| tel | 電話番号の入力欄 |
| text | 1行のテキスト入力欄 |
| url | URLの入力欄 |
よく使うグローバル属性
| id | 概要 | 要素に対してID固有の識別名を付けることができます。 |
|---|---|---|
| 属性の値 | 英字から始まる英数字 | |
| class | 概要 | 要素に対して分類名を付けることができます。 |
| 属性の値 | 英字から始まる英数字 | |
| style | 概要 | 要素に対して直接スタイルを指定することができます。 |
| 属性の値 | スタイルシートのコード |
inputに使える属性
input要素の属性は、部品の種類（type属性に指定しているキーワード）によって指定できるものとできないものがあります。
| autocomplete | 概要 | 入力履歴を活用した自動補完機能を有効・無効・種類の指定をします。対象: text, password, search, tel, url, email, date, time, number, range, color |
|---|---|---|
| 属性の値 | on：有効にする。 off：無効にする | |
| autofocus | 概要 | ページが読み込まれた際に、自動的にフォーカスを合わせます。ページ内で1つだけ指定可能です。自動的にフォーカスを合わせるため、音声読み上げ機能を利用しているユーザーを混乱させる可能性もあります。対象: text, password, file, checkbox, radio, submit, reset, button, image, search, tel, url, email, date, time, number,range, color |
| 属性の値 | 論理属性（属性名だけで指定可能） | |
| disabled | 概要 | フォームの部品を無効化します。対象: text, password, file, checkbox, radio, submit, reset, button, image, search, tel, url, email, date, time, number, range, color |
| 属性の値 | 論理属性（属性名だけで指定可能） | |
| form | 概要 | 関連付けたいform要素のid属性を指定します。これを指定することで、input要素は、form要素の中になくても、その一部とすることができます。対象: 全て |
| 属性の値 | id属性の値 | |
| list | 概要 | datalistで指定した入力候補のリストのidを指定します。対象: text, search, tel, url, email, date, time, number, range, color |
| 属性の値 | id属性の値 | |
| name | 概要 | 部品に名前をつけます。フォームのデータを送信後に入力欄を特定するのに利用します。対象: 全て |
| 属性の値 | テキスト | |
| readonly | 概要 | ユーザーが入力欄の値を編集できない（読み取り専用である）ことを示します。対象: text, password, search, tel, url, email, date, time, number |
| required | 概要 | 部品に名前をつけます。フォームのデータを送信後に入力欄を特定するのに利用します。対象: text, password, file, checkbox, radio, search, tel, url, email, date, time, number |
| 属性の値 | 論理属性（属性名だけで指定可能） | |
| 属性の値 | 論理属性（属性名だけで指定可能） | |
| type | 概要 | 部品の種類を指定します。詳細は上記type属性に指定できるキーワードを参照してください。対象: 全て |
| 属性の値 | 部品の種類 | |
| value | 概要 | 入力欄の初期値、選択時の値、ボタンのテキスト対象: 全て |
| 属性の値 |
テキスト入力欄：初期値として表示する値（value属性に入力した値が初期値になります。） 日付入力欄：日付（YYYY-MM-DDの形式で入力した値が初期値となります。） 時間入力欄：時間（hh:mm:ss形式で入力した値が初期値となります。） カラー入力欄：カラーコード（#ff0000など。入力した値が初期値となります。） チェックボックス：そのチェックボックスを選択した時にだけ送信する値。 ラジオボタン：そのラジオボタンを選択した時にだけ送信する値。 ボタン：ページ上でボタンに表示する名前 |
スポンサードサーチ
<input>の使い方
ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | あり |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |