<input>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能再関連付け可能) / 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 [+]URLの入力欄
email [+]メールアドレスの入力欄
search [+]検索テキストの入力欄
年月日・週・時間
date [+]日付の入力欄
month [5.1]年月の入力欄
week [5.1]週の入力欄
time [+]時間の入力欄
datetime-local [5.1]ローカル日時の入力欄
数値・色
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 以外の値も指定できるようになりました。(詳しくは仕様書をご覧ください

使用例

5種類の部品を配置した例

<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>

表示例

お名前:

質問の答え:

ランキング:

ファイル:

  • サンプルのため送信できません。
disabled属性を指定した例

<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>

表示例

お名前:

質問の答え:

ランキング:

ファイル:

  • サンプルのため送信できません。
2番目の入力欄にautofocus属性を指定した例

<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>

表示例

サンプル画面へ新規ウィンドウで表示