入力欄・選択肢・ボタンを作る

input要素は、フォームの各種部品（入力欄・選択肢・ボタン）を作成します。

type属性について

type属性は、フォーム部品のタイプを指定します。この属性の値には、以下のキーワードを指定することができます。

• この属性を省略した場合は type="text" が使用されます。

<input type="text">

キーワード	タイプ	表示例
テキスト
text	1行のテキスト入力欄 （初期値）
password	パスワードの入力欄
tel	電話番号の入力欄
url	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>