inputの使い方についてまとめ

inputの概要

input要素は、formタグで作成したフォームの中で、ユーザーからのデータを受け取るためのテキスト入力や実行ボタンなどのフォーム部品を表示します。type属性の値によって様々なデータ入力フォームを表示可能です。

inputのカテゴリー

inputに入れられるタグ一覧

タグ早見表

なし(inputは空要素です。)

入れられるタグのカテゴリー・モデル

inputに使える属性

属性とは<input>タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

input要素はtype属性によって様々なフォーム部品として利用できます。type属性に指定できるキーワードと対応する部品は下記の通りです。

type属性に指定できるキーワード

button 既定の動作を持たない、汎用的なプッシュボタン
checkbox 選択または未選択の値をとることのできるチェックボックス
color 色の入力
date 日付(時刻を除く年月日)
email 電子メールアドレス入力欄
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 あり

WORK REQUEST

CONTACT