<INPUT>フォームの部品(ボタン・入力欄)を作る

置換要素である<INPUT>タグでは、属性を指定する事で入力・送信フォーム(<FORM>)の送信ボタンやチェックボックス、入力欄などを作成することができます。

type属性の値によって作成するボタンの種類を選択することができ、value属性でボタンの上に表示される文字を指定することができます。 またname属性ではボタンに名前を付ける事ができ、複数のボタンがある場合には、その値によってどのボタンが押されたのかを判別する事ができます。

他にもvalue属性によってラベルを付ける事ができない項目、例えばラジオボタンや入力フィールドなどと<LABEL>タグとを組み合わせる事で、入力・選択項目とテキストを関連付けて一体化させることなどができます。

なおフォームの作り方などは「<FORM>入力・送信フォームの作成」をご覧ください。

使用した時の例

<form action="/cgi-bin/sample.cgi" method="post">
<p>名前:<input type="text" name="name"></p>
  <p>性別:<input type="radio" name="sex" value="man">男
          <input type="radio" name="sex" value="woman">女
  </p>
  <p>当店を選んだ理由</p>
  <p>
  <input type="checkbox" name="reason" value="tv">tvで見たから<br />
  <input type="checkbox" name="reason" value="price">安いから<br />
  <input type="checkbox" name="reason" value="quality">高品質だから<br />
  </p>
  <p><input type="submit" value="送信">
     <input type="reset" value="リセット">  
  </p>
</form>

ブラウザ上の表示例

名前:

性別:

当店を選んだ理由

tvで見たから
安いから
高品質だから

書式

  • <input type="キーワード" value="ラベル" name="名前"> ・・・・・・ フォームの部品を作る

キーワード:button・radioなど、ラベル:ボタンに表示される文字、名前:任意の名前

属性

キーワード(ボタンなどのフォーム部品)
type="button" 汎用ボタンを作成
type="checkbox" 複数選択可能なチェックボックスを作成。
type="file" ファイルを選択し、送信する
type="hidden" 画面には表示せず、データを送信する
type="image" 画像のボタンを作る。画像をクリックした座標も送信できる
type="password" パスワード用テキスト入力フィールドを作る。入力した文字はアスタリスク「∗」で表示
type="radio" ラジオボタンを作る。
type="reset" リセットボタンを作る
type="submit" 実行ボタンを作る
type="text" 1行のテキスト入力フィールドを作る

対応ブラウザなどのデータ

形式 <input type="> 分類 インライン要素 / 置換要素
親要素 子要素にフレージングコンテンツを含める要素 子要素 なし
開始タグ 必須 終了タグ なし
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

HTML5では、type属性に指定できる値の種類が増えた。