HTML5 <input>
■フォーム部品の種類を指定する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"
汎用ボタンを作成する
画面上は表示されない隠しデータを指定する
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>
<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 |
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 |
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 |
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 |
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から追加
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">１年生</label>
<label><input type="radio" name="gakunen" value="2">２年生</label>
<label><input type="radio" name="gakunen" value="3">３年生</label>
<label><input type="radio" name="gakunen" value="4">４年生</label>
<label><input type="radio" name="gakunen" value="5">５年生</label>
<label><input type="radio" name="gakunen" value="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>
<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">１年生</label>
<label><input type="radio" name="gakunen" value="2">２年生</label>
<label><input type="radio" name="gakunen" value="3">３年生</label>
<label><input type="radio" name="gakunen" value="4">４年生</label>
<label><input type="radio" name="gakunen" value="5">５年生</label>
<label><input type="radio" name="gakunen" value="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>
↓↓↓
