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

<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属性が 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>をマークアップしたサンプルです。

<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要素のサンプルです。

<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要素のサンプルです。

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

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

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

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

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

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

<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要素のサンプルです。

<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要素のサンプルです。

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

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

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

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