トップページ  > HTML5  > <input>

★HTML5タグリファレンス

<input> …… フォームを構成する様々な入力部品を作成する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera6Opera7Opera8Opera9Opera10

<input>タグは、フォーム(<form>~</form>)を構成する様々な入力部品を作成する際に使用します。

■フォーム部品の種類を指定するtype属性

type属性は、フォーム部品の種類を指定する際に使用します。 <input>要素は、type属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。 type属性の初期値は、type="text"(一行テキストボックス)です。

■type属性の値

type="hidden"
画面上は表示されない隠しデータを指定する
type="text"
一行テキストボックスを作成する(初期値)
type="search"
検索テキストの入力欄を作成するHTML5から追加
type="tel"
電話番号の入力欄を作成するHTML5から追加
type="url"
URLの入力欄を作成するHTML5から追加
type="email"
メールアドレスの入力欄を作成するHTML5から追加
type="password"
パスワード入力欄を作成する
type="datetime"
UTC(協定世界時)による日時の入力欄を作成するHTML5から追加
type="date"
日付の入力欄を作成するHTML5から追加
type="month"
月の入力欄を作成するHTML5から追加
type="week"
週の入力欄を作成するHTML5から追加
type="time"
時間の入力欄を作成するHTML5から追加
type="datetime-local"
UTC(協定世界時)によらないローカル日時の入力欄を作成するHTML5から追加
type="number"
数値の入力欄を作成するHTML5から追加
type="range"
レンジの入力欄を作成するHTML5から追加
type="color"
色の入力欄を作成するHTML5から追加
type="checkbox"
チェックボックスを作成する
type="radio"
ラジオボタンを作成する
type="file"
サーバーへファイルを送信する
type="submit"
送信ボタンを作成する
type="image"
画像ボタンを作成する
type="reset"
リセットボタンを作成する
type="button"
汎用ボタンを作成する

HTML5では、input要素のtype属性に指定できる値の種類が増えています。 それぞれの値を指定した場合、例えば、<input type="email">を指定すると、 この属性値をサポートしているFirefox4・Opera10・Google Chromeなどのブラウザでは、 送信ボタンを押したときに入力されている値がメールアドレスとして妥当かどうかチェックしてくれます。

以下は、HTML5で<input>要素のtype属性に追加される値を並べたサンプルソースです。 これらの値を比較的よくサポートしているOperaでは、 <input type="date">などの日付型の値を指定するとカレンダー入力になったり、 <input type="range">でレンジ入力を指定すると、マウスで操作できるレンジバーが表示されるなど、 ユーザーの入力補助となるインターフェースが拡張されています。

■使用例

HTMLソース

<form action="xxx.php" method="post"><label>メール(type="email"):<input type="email" name="email"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>URL(type="url"):<input type="url" name="url"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>検索(type="search"):<input type="search" name="search"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>電話(type="telephone"):<input type="tel" name="tel"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>数値(type="number"):<input type="number" name="number"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>日付(type="date"):<input type="date" name="date"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>日時(type="datetime"):<input type="datetime" name="datetime"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>ローカル日時(type="datetime-local"):<input type="datetime-local" name="datetime-local"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>月(type="month"):<input type="month" name="month"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>週(type="week"):<input type="week" name="week"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>時間(type="time"):<input type="time" name="time"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>レンジ(type="range"):<input type="range" name="range"></label><input type="submit" value="送信"></form>
<form action="xxx.php" method="post"><label>色(type="color"):<input type="color" name="color"></label><input type="submit" value="送信"></form>
↓↓↓

ブラウザ上の表示

■type属性以外の属性

<input>には、type属性以外にも多くの属性が用意されています。 これらの属性は、type属性にどの値が指定されているかによって指定できるかどうかが決まります。 例えば、入力必須であることを示すrequired属性は、type="text"やtype="file"などの場合には指定することができますが、 type="hidden"などの場合には指定することはできません。

以下は、type属性がどの値の場合に、どの属性を指定できるかを示した表です。

横行はtype属性の値→
↓縦列は属性名
hidden text
search
url
tel
email password datetime
date
month
week
time
datetime-local
number
range color checkbox
radio
file submit image reset
button
accept属性 - - - - - - - - - - - -
alt属性 - - - - - - - - - - - -
autocomplete属性 - - - - - -
checked属性 - - - - - - - - - - - -
formaction属性 - - - - - - - - - - -
formenctype属性 - - - - - - - - - - -
formmethod属性 - - - - - - - - - - -
formnovalidate属性 - - - - - - - - - - -
formtarget属性 - - - - - - - - - - -
height属性 - - - - - - - - - - - -
list属性 - - - - - - -
max属性 - - - - - - - - - -
maxlength属性 - - - - - - - - - -
min属性 - - - - - - - - - -
multiple属性 - - - - - - - - - - -
pattern属性 - - - - - - - - - -
placeholder属性 - - - - - - - - - -
readonly属性 - - - - - - - -
required属性 - - - - - -
size属性 - - - - - - - - - -
src属性 - - - - - - - - - - - -
step属性 - - - - - - - - - -
width属性 - - - - - - - - - - - -
↑縦列は属性名
横行はtype属性の値→
hidden text
search
url
tel
email password datetime
date
month
week
time
datetime-local
number
range color checkbox
radio
file submit image reset
button

以下は、type属性がどの値の場合に、どのような種類の属性値(属性の状態)・メソッド・イベントを指定できるかを示した表です。

横行はtype属性の値→
↓縦列は属性値の種類・状態・メソッド・イベント
hidden text
search
url
tel
email password datetime
date
month
week
time
datetime-local
number
range color checkbox
radio
file submit image reset
button
チェックのon/off - - - - - - - - - - - -
ファイル - - - - - - - - - - - -
何らかの値 指定・入力された値 指定・入力された値 指定・入力された値 指定・入力された値 指定・入力された値 指定・入力された値 指定・入力された値 指定・入力された値 チェックされているかどうか ファイル名 指定された初期値 指定された初期値 指定された初期値
日時値 - - - - - - - - - - - -
数値 - - - - - - - - - -
リスト - - - - - - -
選択肢・候補値 - - - - - - -
select() - - - - - - - - - -
selectionStart - - - - - - - - - -
selectionEnd - - - - - - - - - -
setSelectionRange() - - - - - - - - - -
stepDown() - - - - - - - - - -
stepUp() - - - - - - - - - -
inputイベント - - - - - -
changeイベント - - - -
↑縦列は属性値の種類・状態・メソッド・イベント
横行はtype属性の値→
hidden text
search
url
tel
email password datetime
date
month
week
time
datetime-local
number
range color checkbox
radio
file submit image reset
button

form属性は、どのフォームと関連付けるかを指定する際に使用します。 <input>は初期値では直近の親要素となる<form>と関連付けられますが、 <form>のid属性の値と<input>のform属性の値を一致させることで、 <input>要素を特定のフォームと関連付けることができます。 <input>要素を任意の場所に配置できるので、ウェブアプリケーションなどを制作する際には便利かもしれません。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、input要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。 HTML5では、input要素のalign属性は廃止されています。 揃え位置の指定にはCSSを使用してください。

一方で、HTML5では、input要素に新しく autocomplete属性autofocus属性・ form属性・ formaction属性・ formenctype属性・ formmethod属性・ formnovalidate属性・ formtarget属性・ height属性・ list属性・ max属性min属性multiple属性pattern属性placeholder属性required属性step属性・ width属性 が追加されています。

また、前述の通り、type属性に指定できる値の種類が増えています。

■属性

accept属性
type="file"の場合に、どのタイプのファイルがサーバ側で受け取ることができるかを指定
alt属性
type="image"の場合に、画像の代替テキストを指定(type="image"の場合には必須属性)
autocomplete属性
入力候補を提示して入力内容を自動補完する(on・off・default)(初期値はdefault)HTML5から追加
autofocus属性
自動フォーカスを指定する(autofocus)HTML5から追加
checked属性
ラジオボタンやチェックボックスをあらかじめチェック済みにする(checked)
disabled属性
操作を無効にする(disabled)
form属性
どのフォームと関連付けるかを<form>のid名で指定HTML5から追加
formaction属性
送信先URLを指定HTML5から追加
formenctype属性
送信するデータの形式を指定(application/x-www-form-urlencoded・multipart/form-data・text/plain)(初期値はapplication/x-www-form-urlencoded)HTML5から追加
formmethod属性
送信方法(HTTPメソッド)を指定(get・post)(初期値はget)HTML5から追加
formnovalidate属性
入力されたデータの妥当性を確認しない(formnovalidate)HTML5から追加
formtarget属性
フォーム送信するターゲット先を指定(_blank・_self・_parent・_top・任意のターゲット名)HTML5から追加
height属性
type="image"の場合に、画像の高さを指定HTML5から追加
list属性
ユーザーに入力候補として提案するデータリストの要素を、その要素のid属性の値で指定するHTML5から追加
max属性
入力できる最大値を指定するHTML5から追加
maxlength属性
入力可能な最大文字数を指定
min属性
入力できる最小値を指定するHTML5から追加
multiple属性
複数の値を入力・選択できるようにするHTML5から追加
name属性
フォーム部品に名前をつける
pattern属性
正規表現で入力値のパターンを指定するHTML5から追加
placeholder属性
入力欄に初期表示する内容を指定するHTML5から追加
readonly属性
ユーザーによるテキスト編集を不可にして読み取り専用にする(readonly)
required属性
入力必須にするHTML5から追加
size属性
表示文字数を指定(1以上の正の整数)
src属性
type="image"の場合に、画像ファイルのURLを指定する(type="image"の場合には必須属性)
step属性
入力欄で刻むステップ値を指定するHTML5から追加
type属性
フォーム部品の種類を指定する(初期値はtext)
value属性
値を指定
width属性
type="image"の場合に、画像の幅を指定HTML5から追加

■使用例

HTMLソース

<form action="xxxxx.php" method="post" enctype="multipart/form-data">
<p><label>名前:<input type="text" name="name" size="30" maxlength="20"></label></p>
<p><label>パスワード:<input type="password" name="pass" size="6" maxlength="4"></label></p>
<p>学年:
<label><input type="radio" name="gakunen" value="1">1年生</label>
<label><input type="radio" name="gakunen" value="2">2年生</label>
<label><input type="radio" name="gakunen" value="3">3年生</label>
<label><input type="radio" name="gakunen" value="4">4年生</label>
<label><input type="radio" name="gakunen" value="5">5年生</label>
<label><input type="radio" name="gakunen" value="6">6年生</label>
</p>
<p>好きな課目:
<label><input type="checkbox" name="kamoku" value="kokugo">国語</label>
<label><input type="checkbox" name="kamoku" value="eigo">英語</label>
<label><input type="checkbox" name="kamoku" value="sansu">算数</label>
<label><input type="checkbox" name="kamoku" value="rika">理科</label>
<label><input type="checkbox" name="kamoku" value="syakai">社会</label>
<label><input type="checkbox" name="kamoku" value="taiiku">体育</label>
</p>
<p><label>宿題ファイル:<input type="file" name="syukudai"></label></p>
<p>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</p>
</form>
↓↓↓

ブラウザ上の表示

学年:

好きな課目:

▲ページ先頭へ
トップページ  > HTML5  > <input>
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ