Close
<input>タグは、フォーム（<form>～</form>）を構成する様々な入力部品を作成する際に使用します。
type属性は、フォーム部品の種類を指定する際に使用します。
<input>要素は、type属性にどのような値を指定するかによって、
一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、
フォーム部品の種類を指定し分けることができます。
type属性の初期値は、type=”text”（一行テキストボックス）です。
HTML5では、input要素のtype属性に指定できる値の種類が増えています。
それぞれの値を指定した場合、例えば、<input type=”email”>を指定すると、
この属性値をサポートしているFirefox4・Opera10・Google Chromeなどのブラウザでは、
送信ボタンを押したときに入力されている値がメールアドレスとして妥当かどうかチェックしてくれます。
以下は、HTML5で<input>要素のtype属性に追加される値を並べたサンプルソースです。
これらの値を比較的よくサポートしているOperaでは、
<input type=”date”>などの日付型の値を指定するとカレンダー入力になったり、
<input type=”range”>でレンジ入力を指定すると、マウスで操作できるレンジバーが表示されるなど、
ユーザーの入力補助となるインターフェースが拡張されています。
<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>
<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では、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属性に指定できる値の種類が増えています。
<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>
どのカジノが自分に最適か分からないですか?
