<input>
ブラウザ |
|
---|---|
分類 |
フロー・コンテンツ / フレージング・コンテンツ / フォーム関連要素(リスト化、サブミット可能、リセット可能、再関連付け可能) / type="hidden" でない場合は更に、インタラクティブ・コンテンツ、ラベル付け可能、パルパブル・コンテンツ
|
利用場所 | フレージング・コンテンツが置ける場所 |
内容 | 空 |
input要素は、フォームの各種部品(入力欄・選択肢・ボタン)を作成します。
<input>
属性 | 値 | ||
---|---|---|---|
任意属性(共通) | |||
type="" |
部品のタイプ | キーワード | 特定のキーワードを指定 (初期値は text ) |
name="" |
部品の名前 | 文字列 | 部品を識別するための名前 |
value="" |
送信される値 | 文字列 | 入力欄の初期値、選択時の値、ボタンのテキスト |
disabled |
部品の無効化 | (disabled ) |
値は省略可能 |
form="" |
![]() |
ID名 | 関連付けるform要素に指定したID名 |
autofocus |
![]() |
(autofocus ) |
値は省略可能、1つの文書に1つだけ指定可能 |
- 上記は、input要素に共通で指定できる属性となります。これ以外の属性については、各部品タイプのページをご覧ください。(部品のタイプごとに多数の属性が用意されています)
type属性について
type属性は、フォーム部品のタイプを指定します。この属性の値には、以下のキーワードを指定することができます。
- この属性を省略した場合は
type="text"
が使用されます。
<input type="text">
キーワード | タイプ | 表示例 |
---|---|---|
テキスト | ||
text |
1行のテキスト入力欄 (初期値) | |
password |
パスワードの入力欄 | |
tel |
![]() |
|
url |
![]() |
|
email |
![]() |
|
search |
![]() |
|
年月日・週・時間 | ||
date |
![]() |
|
month |
![]() |
|
week |
![]() |
|
time |
![]() |
|
datetime-local |
![]() |
|
数値・色 | ||
number |
![]() |
|
range |
![]() |
|
color |
![]() |
|
選択肢・チェック | ||
radio |
ラジオボタン | 選択1 選択2 |
checkbox |
チェックボックス | チェック1 チェック2 |
ファイル・隠しデータ | ||
file |
ファイルの送信欄 | |
hidden |
隠しデータ | (表示されません) |
ボタン | ||
submit |
送信ボタン | |
image |
画像形式の送信ボタン | |
reset |
リセットボタン | |
button |
汎用的なボタン |
- 年月日・週・時間や数値・色に関連する部品は、ブラウザにより表示内容が異なります。(未対応のブラウザでは通常の入力欄が表示されます)
name属性について
name属性は、フォーム部品を識別するための名前を指定します。
この属性の値は、入力されたデータ(またはvalue属性の値)とセットで送信されることになります。
<input type="text" name="name" value="Taro">
上記の場合は、name=Taro
といった感じで送信されます。
value属性について
value属性は、送信される値を指定します。
この属性の値は、name属性の値とセットで送信されることになります。ただし、部品の種類により次のような違いがあります。
- 入力欄の場合
-
この属性の値は、入力欄に表示される初期値として使用されます。内容が書き換えられた場合は、そちらが送信されることになります。(初期値を設定しない場合は、value属性は不要です)
<input type="text" name="name" value="初期値">
- ラジオボタンやチェックボックスの場合
-
この属性の値は、そのボタン(またはボックス)が選択されている場合に送信されます。
<input type="radio" name="answer" value="はい">
- 送信ボタンなどの場合
-
この属性の値は、ボタンに表示されるテキストとして使用されます。(この値を送信する必要がない場合は、name属性を省略して次のように記述します)
<input type="submit" value="送信する">
disabled属性について
disabled属性は、フォーム部品の無効化を指定します。
この属性が指定された部品は、選択や書き換えができなくなり、データも送信されなくなります。
<input type="text" name="name" disabled>
- この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。
form属性について
form属性は、そのフォーム部品をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。
- この属性は、部品をform要素の外に配置する場合に使用します。(form要素の中に配置する場合は不要です)
<p>お名前:<input type="text" name="name" form="example"></p>
<form method="post" action="example.cgi" id="example">
<p><input type="submit" value="送信する"></p>
</form>
- ただし、この機能に対応していないブラウザもあります。
- form属性の使用例は、form要素のページでご覧になれます。
autofocus属性について
autofocus属性は、フォーム部品の自動フォーカスを指定します。
この属性が指定された部品は、文書の読み込み時に自動的にフォーカスされることになります。
- この属性は、1つの文書に1つだけ指定することができます。
<input type="text" name="name" autofocus>
- HTML5における変更点
-
- 部品のタイプが増えました。(10種類 → 19種類)
- autocomplete属性、autofocus属性、dirname属性、form属性、formaction属性、formenctype属性、formmethod属性、formnovalidate属性、formtarget属性、height属性、list属性、max属性、min属性、minlength属性、multiple属性、pattern属性、placeholder属性、required属性、step属性、width属性が追加されました。
- align属性、usemap属性、ismap属性が廃止されました。
- HTML 5.1における変更点
-
- 部品のタイプが増えました。(19種類 → 22種類)
- inputmode属性が追加されました。
- autocomplete属性に
on
/off
以外の値も指定できるようになりました。(詳しくは仕様書をご覧ください)
使用例
<form method="post" action="example.cgi">
<p>お名前:<br><input type="text" name="name" size="30"></p>
<p>質問の答え:<br>
<label><input type="radio" name="answer" value="はい">はい</label>
<label><input type="radio" name="answer" value="いいえ">いいえ</label>
<label><input type="radio" name="answer" value="どちらでもない">どちらでもない</label>
</p>
<p>ランキング:<br><label><input type="checkbox" name="rank" value="1">参加する</label></p>
<p>ファイル:<br><input type="file" name="upfile"></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
-
お名前:
質問の答え:
ランキング:
ファイル:
- サンプルのため送信できません。
<form method="post" action="example.cgi">
<p>お名前:<br><input type="text" name="name" size="30" disabled></p>
<p>質問の答え:<br>
<label><input type="radio" name="answer" value="はい" disabled>はい</label>
<label><input type="radio" name="answer" value="いいえ" disabled>いいえ</label>
<label><input type="radio" name="answer" value="どちらでもない" disabled>どちらでもない</label>
</p>
<p>ランキング:<br><label><input type="checkbox" name="rank" value="1" disabled>参加する</label></p>
<p>ファイル:<br><input type="file" name="upfile" disabled></p>
<p><input type="submit" value="送信する" disabled></p>
</form>
- 表示例
-
お名前:
質問の答え:
ランキング:
ファイル:
- サンプルのため送信できません。
<h1>autofocus属性の指定例</h1>
<p>対応しているブラウザでは、2番目の入力欄が自動的にフォーカスされます。</p>
<p>部品1:<input type="text" name="cont1" size="30"></p>
<p>部品2:<input type="text" name="cont2" size="30" autofocus></p>
- 表示例