<input>：ユーザーが操作可能な入力欄や情報を扱うフィールドを作成する要素・HTMLタグの解説

<input>タグの解説

<input>は、ユーザーが操作可能な入力欄や情報を扱うフィールドを作成します。この要素自体は汎用的な入力項目を表しますが、type属性に指定された値によって様々な機能やインターフェイスに変化します。

<input>が提供する機能の中で多く見られるのは、テキストエリア、チェックボックス、ラジオボタンです。テキストエリアであれば、検索ボックスやパスワード入力欄が最も身近なインターフェイスと言えます。

入力・送信フォームを使いこなすためには、サーバーサイドとクライアントサイド、そしてリクエストとレスポンスの概念を把握する必要があります。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属性がpassword、search、tel、text、urlである場合に、入力を受け入れる最長値を定義します。

min

入力の最小値を定義します。

minlength

type属性がpassword、search、tel、text、urlである場合に、入力を受け入れる最短値を定義します。

multiple

type属性がemail またはfileである場合に、複数の値を許可するかどうかを決めます。これは値のない論理属性です。

name

項目の名前を定義します。送信される値の識別名として一緒に扱われます。

pattern

type属性がpassword、tel、textである場合に、値が一致するかどうかを正規表現で検証します。

placeholder

type属性がpassword、search、tel、text、urlである場合に、入力する前の補助内容を提供します。

readonly

ユーザー側で編集できないようにします。これは値のない論理属性です。

required

入力必須の項目にして、空の内容では送信できない扱いにします。これは値のない論理属性です。

size

type属性がemail、password、tel、text、urlである場合に、表示される項目の幅を指定します。日本語の場合、幅の解釈がブラウザによって異なるため、スタイルシートの使用をお勧めします。

src

type属性がimageである場合に、画像のURLを指定します。

step

type属性がnumber などの数値を増減させる機能がある場合に、一回の動作で刻む増減の幅を指定する祭に使用します。

type

入力項目の型を決定します。この要素で一番重要な属性です。

value

入力項目に埋め込まれる値。

width

type属性がimageである場合に、画像の横幅を指定します。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

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

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

<input>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。<input>はtype属性の値によって様々な機能やインターフェイスを獲得します。また、その型に応じて使える属性と使えない属性が変化します。後に説明するそれぞれの型の特徴を参考にしてください。

<input type="value" name="value">

type属性の値が"button"の場合

type属性の値にbuttonを指定すると、<input>は操作可能なボタンになります。

<input type="button" value="button">

type属性の値が"checkbox"の場合

type属性の値にcheckboxを指定すると、<input>は選択と未選択状態を選べるチェックボックスになります。

<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>は色指定の機能を提供します。対応しているブラウザでは、アクティブになった時にカラーピッカーを表示します。

<input type="color" name="color">

type属性の値が"date"の場合

type属性の値にdateを指定すると、<input>は年月日を入力するコントロラーを提供します。対応しているブラウザでは、アクティブになった時にカレンダー型のピッカーや時刻を選択するホイールを表示します。

<input type="date" name="date">

type属性の値が"datetime-local"の場合

type属性の値にdatetime-localを指定すると、<input>はローカルのタイムゾーンを表す日付と日時を入力するコントローラーを提供します。対応しているブラウザでは、アクティブになった時にカレンダー型のピッカーや時刻を選択するホイールを表示します。

<input type="datetime-local" name="datetime-local">

type属性の値が"email"の場合

type属性の値にemailを指定すると、<input>はメールアドレスの入力欄を提供します。対応しているブラウザでは、入力値を検証したり関連するキーボードを表示させます。

<input type="email" name="email">

type属性の値が"file"の場合

type属性の値にfileを指定すると、<input>はユーザーがファイルを選択できるボタンを提供します。この属性が指定された場合、accept属性を使用して選択できるファイル形式を定義することができます。

<input type="file" name="file">

type属性の値が"hidden"の場合

type属性の値にhiddenを指定すると、<input>は画面には表示されない項目になりますが、送信される状態を維持します。ユーザーには見せる必要のない隠しパラメーターやプログラムの処理に必要な情報を扱うために使用します。

<input type="hidden" name="hidden">
<small>※この項目は非表示となり、データ送信時に扱われます。</small>

type属性の値が"image"の場合

type属性の値にimageを指定すると、<input>はsrc属性で指定した画像のボタンとなります。画像が表示されない場合alt属性に指定した代替テキストが表示されます。

<input type="image" alt="代替テキスト">

type属性の値が"month"の場合

type属性の値にmonthを指定すると、<input>はタイムゾーンの情報を伴わない年月を入力するコントローラーを提供します。対応しているブラウザでは、アクティブになった時にカレンダー型のピッカーを表示します。

<input type="month" name="month">

type属性の値が"number"の場合

type属性の値にnumberを指定すると、<input>は数字の入力欄をを提供します。操作可能な状態で数字を選べるスピナーを表示します。対応しているブラウザでは、数値の検証を行ったりテンキーを表示させることもできます。

<input type="number" min="1" max="10" value="1">

type属性の値が"password"の場合

type属性の値にpasswordを指定すると、<input>パスワードの入力欄を提供します。対応しているブラウザでは入力した文字が隠されます。サイトが安全ではない場合はユーザーに警告します。

<label>
	Password: <input type="password" minlength="8" maxlength="16">
</label>

type属性の値が"radio"の場合

type属性の値にradioを指定すると、<input>は同じname属性の値を持つ項目から一つを選べるラジオボタンになります。あらかじめ選択しておきたい項目がある場合は、checked属性を使用します。

<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>は特定の範囲を表すコントローラーを提供します。対応しているブラウザでは、ノブを掴んで操作できるスライドバーを表示します。

<input type="range" min="0" max="100" value="50">

type属性の値が"reset"の場合

type属性の値にresetを指定すると、<input>はリセットボタンになります。フォームの項目を初期状態に戻す機能を提供します。

<input type="reset" name="reset" value="Reset">

type属性の値が"search"の場合

type属性の値にsearchを指定すると、<input>は検索用のテキスト入力欄を提供します。入力値に改行がある場合は自動的に取り除かれます。対応しているブラウザでは、入力欄を初期化するためのアイコンが表示されます。

<input type="search" name="search" value="Search">

type属性の値が"submit"の場合

type属性の値にsubmitを指定すると、<input>は送信ボタンになります。フォームに入力した情報をサーバーやプログラムに送信するために使用します。

<input type="submit" name="submit" value="Submit">

type属性の値が"tel"の場合

type属性の値にtelを指定すると、<input>は電話番号の入力欄を提供します。動的なテンキーを備えた端末では、電話用のテンキーを表示することがあります。

<label>
	電話番号：<input type="tel" name="tel" placeholder="000-0000-0000">
</label>

type属性の値が"text"の場合

type属性の値にtextを指定すると、<input>は単一行のテキスト入力欄を提供します。入力値に改行がある場合は自動的に取り除かれます。

<label>
	ユーザー名：<input type="text" name="text" minlength="8" maxlength="32" size="28" placeholder="8〜32文字">
</label>

type属性の値が"time"の場合

type属性の値にtimeを指定すると、<input>はタイムゾーンを伴わない時刻を入力するコントローラーを提供します。対応しているブラウザでは、アクティブになった時に時刻を選択するホイールを表示します。

<input type="time" name="time" value="10:00">

type属性の値が"url"の場合

type属性の値にurlを指定すると、<input>はインターネットのアドレスを表すURLの入力欄を提供します。対応しているブラウザでは、入力値を検証したり関連するキーボードを表示します。

<input type="url" name="url" placeholder="https://example.com">

type属性の値が"week"の場合

type属性の値にweekを指定すると、<input>は週と週番号を入力するコントローラーを提供します。対応しているブラウザでは、アクティブになった時にカレンダー型のピッカーを表示します。

<input type="week" name="week" value="2045-W01">

様々なパーツを組み合わせたフォームの例

ウェブページにフォームを設置するには、様々な要素や属性を組み合わせる必要があります。最終的に送信される情報は、それを受け取ったプログラムによって処理されます。

<form action="#####" method="post">
	<div>
		名前：
		<input type="text" name="name" size="30">
	</div>
	<div>
		性別：
		<input type="radio" name="gender" value="m">男
		<input type="radio" name="gender" value="w">女
	</div>
	<div>
		端末：
		<input type="checkbox" name="device" value="pc">PC
		<input type="checkbox" name="device" value="i">Docomo
		<input type="checkbox" name="device" value="e">au
		<input type="checkbox" name="device" value="s">SoftBank
	</div>
	<div>
		血液型：
		<select name="blood">
			<option value="A">A型</option>
			<option value="B">B型</option>
			<option value="O">O型</option>
			<option value="AB">AB型</option>
		</select>
	</div>
	<div>
		感想：
		<textarea name="comment" rows="4" cols="40">感想があれば書いてください。</textarea>
	</div>
	<div>
		<input type="submit" value="送信">
		<input type="reset" value="リセット">
	</div>
</form>