<input> フォームを構成する部品を作成する

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
パルパブル・コンテンツ
親にできる要素 フレージング・コンテンツを受け入れる要素
子にできる要素 なし
対応ブラウザ caniuseで確認

<input>タグの説明

<input>は、送信フォームの入力欄や様々なパーツを作成する際に使用します。この要素は、<form>の開始から終了までの間に多様な機能を提供するものであり、複雑さで言えば数あるタグの中でもトップクラスの部類に入ります。

入力フォームを使いこなすには、サーバーに対するリクエストとレスポンスの概念を把握する必要があります。HTMLで静的なコンテンツを提供することに慣れてきたら、ユーザーの入力を受け入れる動的なコンテンツに挑戦してみましょう。

<input>タグの特徴

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
  • この要素は入力を受け入れる様々なパーツに変化します。その機能は、type属性に与える値によって大きく異るため、必要に応じて動作を確認していきましょう。

<input>に指定できる主な属性

accept
type属性が file だった場合に、ファイルをアップロードする祭に期待されるファイル形式のヒントを与えます。
alt
type属性が image だった場合に、説明文を追加します。
autocomplete
自動補完機能に関するヒントを提供します。
autofocus
ページが読み込まれた時、あらかじめフォーカスをあてておきたいコントローラに適用します。
capture
type属性が file だった場合に、カメラ等のキャプチャメソッドを指定します。
checked
type属性が radio または checkbox だった場合に、あらかじめ選択しておきたい項目に適用します。
dirname
type属性が text または search だった場合に、文字の方向を定義する祭に使用します。
disabled
無効にしたい項目に適用します。この属性は値のない論理属性です。
form
項目を<form>id属性に関連付けます。
formaction
type属性が image または submit だった場合に、データの送信先となるURLを指定します。
formenctype
type属性が image または submit だった場合に、データのエンコード種別を指定します。
formmethod
type属性が image または submit だった場合に、データの送信に使うHTTPメソッドを指定します。
formnovalidate
type属性が image または submit だった場合に、入力内容の検証を無効にします。この属性は値のない論理属性です。
formtarget
type属性が image または submit だった場合に、データ送信後の画面をどこに開くか指定します。
height
type属性が image だった場合に、画像の高さを指定します。
list
入力候補を示す<datalist>id属性を指定する祭に使用します。
max
入力の最大値を定義します。
maxlength
type属性が passwordsearchteltexturl だった場合に、入力を受け入れる最長値を定義します。
min
入力の最小値を定義します。
minlength
type属性が passwordsearchteltexturl だった場合に、入力を受け入れる最短値を定義します。
multiple
type属性が email または file だった場合に、複数の値を許可するかどうかを決めます。この属性は値のない論理属性です。
name
項目の名前を定義します。送信される値の識別名として一緒に扱われます。
pattern
type属性が passwordteltext だった場合に、値が一致するかどうかを正規表現で検証します。
placeholder
type属性が passwordsearchteltexturl だった場合に、入力する前の補助内容を提供します。
readonly
ユーザー側で編集できないようにします。この属性は値のない論理属性です。
required
入力必須の項目にして、空の内容では送信できない扱いにします。この属性は値のない論理属性です。
size
type属性が emailpasswordteltexturl だった場合に、表示される項目の幅を指定します。日本語の場合、幅の解釈がブラウザによって異なるため、スタイルシートの使用をお勧めします。
src
type属性が image だった場合に、画像のURLを指定します。
step
type属性が number などの数値を増減させる機能がある場合に、一回の動作で刻む増減の幅を指定する祭に使用します。
type
入力項目の型を決定します。この要素で一番重要な属性です。
value
入力項目に埋め込まれる値。
width
type属性が image だった場合に、画像の横幅を指定します。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<input>に指定できるtype属性の種類

<input>はtype属性の値によって様々な機能を獲得します。機能によってはブラウザが専用のインターフェイスを提供します。

type値 説明
button 汎用的なボタンを配置します。他の属性と組み合わせて様々な動作を提供します。
checkbox 選択式のチェックボックスを配置します。
color 色を指定するためのコントローラを配置します。対応しているブラウザでは、起動した時にカラーピッカーが表示されます。
date 日付け(年、月、日)を入力するためのコントローラを配置します。対応しているブラウザでは、起動した時にカレンダーやホイールを表示します。
datetime-local 日付けと時刻(年、月、日、時:分)を入力するためのコントローラを配置します。対応しているブラウザでは、起動した時にカレンダーやホイールを表示します。
email Eメールを入力するためのテキストエリアを配置します。対応しているブラウザでは、入力をサポートする機能が提供されます。
file ユーザーのローカル環境に保存されているファイルを選択する機能を配置します。
hidden 可視化されない項目を配置します。ユーザーに操作させる必要がない項目で、送信に必要なデータを埋め込んでおくことができます。
image 送信ボタンを画像で表します。独自のインターフェイスにボタンの機能を与えたい場合に有用です。
month 年月(年、月、)を入力するためのコントローラを配置します。対応しているブラウザでは、起動した時にカレンダーやホイールを表示します。
number 数値の入力欄を配置します。対応しているブラウザでは、加算・除算が行えるスピナーや入力補助機能を提供します。
password 入力した文字列を隠すテキストフィールドを配置します。安全なサイトでない場合はユーザーに警告します。
radio 選択可能なラジオボタンを配置します。複数の選択肢から一つの値を選ぶ項目に有用です。
range スライド式の範囲コントローラを配置します。最小から最大の値で任意の値を選択させたい場合に有用です。
reset 入力フォームの値を初期化するボタンを配置します。
search 検索キーワードの入力欄を配置します。改行を自動的に取り除く一行のテキストフィールドです。対応しているブラウザでは、入力をサポートする機能が提供されます。
submit 入力フォームに与えられたデータを送信するボタンを配置します。
tel 電話番号を入力するためのコントローラを配置します。対応しているブラウザでは、入力をサポートする機能が提供されます。
text 任意の文字を入力する一行のテキストフィールドを配置します。これが既定値です。
time 時刻(時:分)を入力するためのコントローラを配置します。対応しているブラウザでは、起動した時にホイールを表示します。
url URLを入力するための一行のテキストフィールドを配置します。対応しているブラウザでは、入力をサポートする機能が提供されます。
week 週間(年、週番号)を入力するためのコントローラを配置します。対応しているブラウザでは、起動した時にカレンダーを表示します。

<input>の使い方とサンプル

入力・送信フォームのパーツとして<input>をマークアップしたサンプルです。

HTML
<form action="#####" method="post">
	お名前:
	<input type="text" name="name" size="40"><br>
	性 別:
	<input type="radio" name="seibetsu" value="m" checked="checked">男
	<input type="radio" name="seibetsu" value="w">女<br>
	端 末:
	<input type="checkbox" name="tanmatsu" value="pc" checked="checked">PC
	<input type="checkbox" name="tanmatsu" value="i">Docomo
	<input type="checkbox" name="tanmatsu" value="e">au
	<input type="checkbox" name="tanmatsu" value="s">SoftBank<br />
	血液型:
	<select name="blood">
		<option value="A">A型</option>
		<option value="B">B型</option>
		<option value="O">O型</option>
		<option value="AB">AB型</option>
	</select><br>
	感 想:<br>
	<textarea name="kanso" rows="4" cols="40">感想があれば是非書いて下さい。</textarea>
	<br>
	<input type="submit" value="送信">
	<input type="reset" value="リセット">
</form>
表示確認

type属性の値に button を指定した場合

type属性の値にbuttonを指定したinput要素のサンプルです。

HTML
<input type="button" value="button">
表示確認

type属性の値に checkbox を指定した場合

type属性の値にcheckboxを指定したinput要素のサンプルです。

HTML
<label>
	<input type="checkbox" name="check" value="1" checked>項目1
</label>
<label>
	<input type="checkbox" name="check" value="2">項目2
</label>
<label>
	<input type="checkbox" name="check" value="3">項目3
</label>
表示確認

type属性の値に color の

type属性の値にcolorを指定したinput要素のサンプルです。

HTML
<input type="color" name="color">
表示確認

type属性の値に date を指定した場合

type属性の値にdateを指定したinput要素のサンプルです。

HTML
<input type="date" name="date">
表示確認

type属性の値に datetime-local を指定した場合

type属性の値にdatetime-localを指定したinput要素のサンプルです。

HTML
<input type="datetime-local" name="datetime-local">
表示確認

type属性の値に email を指定した場合

type属性の値にemailを指定したinput要素のサンプルです。

HTML
<input type="email" name="email">
表示確認

type属性の値に file を指定した場合

type属性の値にfileを指定したinput要素のサンプルです。

HTML
<input type="file" name="file">
表示確認

type属性の値に hidden を指定した場合

type属性の値にhiddenを指定したinput要素のサンプルです。

HTML
<input type="hidden" name="hidden">
<div>この値は非表示となり、データ送信時に扱われます。</div>
表示確認

type属性の値に image を指定した場合

type属性の値にimageを指定したinput要素のサンプルです。

HTML
<input type="image" alt="代替テキスト">
表示確認

type属性の値に month を指定した場合

type属性の値にmonthを指定したinput要素のサンプルです。

HTML
<input type="month" name="month">
表示確認

type属性の値に number を指定した場合

type属性の値にnumberを指定したinput要素のサンプルです。

HTML
<input type="number" min="1" max="10" value="1">
表示確認

type属性の値に password を指定した

type属性の値にpasswordを指定したinput要素のサンプルです。

HTML
<label>
	Password: <input type="password" minlength="8" maxlength="16">
</label>
表示確認

type属性の値に radio を指定した場合

type属性の値にradioを指定したinput要素のサンプルです。

HTML
<label>
	<input type="radio" name="radio" value="1" checked> 項目1
</label>
<label>
	<input type="radio" name="radio" value="2"> 項目2
</label>
<label>
	<input type="radio" name="radio" value="3"> 項目3
</label>
表示確認

type属性の値に range を指定した場合

type属性の値にrangeを指定したinput要素のサンプルです。

HTML
<input type="range" min="0" max="100" value="50">
表示確認

type属性の値に reset を指定した場合

type属性の値にresetを指定したinput要素のサンプルです。

HTML
<input type="reset" name="reset" value="Reset">
表示確認

type属性の値にsearchを指定したinput要素のサンプルです。

HTML
<input type="search" name="search" value="Search">
表示確認

type属性の値に submit を指定した場合

type属性の値にsubmitを指定したinput要素のサンプルです。

HTML
<input type="submit" name="submit" value="Submit">
表示確認

type属性の値に tel を指定した場合

type属性の値にtelを指定したinput要素のサンプルです。

HTML
<label>
	電話番号:<input type="tel" name="tel" placeholder="000-0000-0000">
</label>
表示確認

type属性の値に text を指定した場合

type属性の値にtextを指定したinput要素のサンプルです。

HTML
<label>
	ユーザー名:<input type="text" name="text" minlength="8" maxlength="32" size="28" placeholder="8〜32文字">
</label>
表示確認

type属性の値に time を指定した場合

type属性の値にtimeを指定したinput要素のサンプルです。

HTML
<input type="time" name="time" value="10:00">
表示確認

type属性の値に url を指定した場合

type属性の値にurlを指定したinput要素のサンプルです。

HTML
<input type="url" name="url" placeholder="https://example.com">
表示確認

type属性の値に week を指定した場合

type属性の値にweekを指定したinput要素のサンプルです。

HTML
<input type="week" name="week" value="2045-W01">
表示確認

<input>に関連するHTMLタグ

入力・送信フォームに関連する要素
<form> フォームを作成する
<fieldset> フォームの入力項目をグループ化する
<legend> 入力項目のグループにキャプションを与える
<input> フォームを構成する部品を作成する
<label> 入力項目にキャプションを与えて関連付ける
<textarea> 複数行に渡るテキスト編集項目を作成する
<button> ボタンを設置する
<select> セレクトボックスを作成する
<option> セレクトボックスの選択肢を作成する
<optgroup> セレクトボックスの選択肢をグループ化する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する