トップページ > HTMLタグリファレンス > <INPUT>

★HTMLタグリファレンス

<INPUT> …… フォームの構成部品(入力欄・ボタン等)を作成する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape4Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告

このページでは、HTML4のinput要素を解説しています。
input要素の最新情報は、以下を参照してください。

HTML Living Standardリファレンス

<INPUT>タグはテキスト入力欄や実行ボタン等、 フォーム(<FORM>~</FORM>)を構成する部品を作成するタグです。 type属性の値により、一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタン等の部品となります。

各入力フィールドにデータが入力され、 <FORM>でデータが送信される際には、 <INPUT>タグのname属性で付けたデータ名とその値を一組にして、 <FORM>タグのaction属性で指定したサーバー上のファイルに、 <FORM>タグのmethod属性で指定した転送方法で送られます。

■属性

type="text"
1行テキストボックスをつくります。通常のテキストを入力するフィールドです。2行以上にわたる長い文章を入力させたい場合には、<TEXTAREA>~</TEXTAREA>を使用します。
type="password"
パスワード入力ボックスをつくります。入力したテキストがアスタリスク(*)などに置き換えて表示されます。ただし、データが暗号化されるわけではないので、送信されたデータを受け取ることができれば内容を見ることができます。利用の際には注意してください。
type="checkbox"
チェックボックスをつくります。チェックボックスは複数選択が可能です。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
type="radio"
ラジオボタンをつくります。複数の中から一つしか選択できない点がチェックボックスと異なります。複数を一つのグループとして認識させるには、name属性で同じ名前を付けてください。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
type="file"
サーバーへファイルを送信する際に、送信するファイルを選択します。ファイル名の入力フィールドと[参照]ボタンが表示されます。サーバー側にはファイルを受け取るための特別なCGI等が必要です。
type="hidden"
隠しデータをサーバーに送信する際に使用します。このタイプのデータは、画面上には表示されませんが、value属性で指定した値がサーバーへ送信されます。
type="submit"
送信ボタンをつくります。
type="reset"
リセットボタンをつくります。このボタンを押すと、それまでに入力した情報をキャンセルして初期状態に戻します。
type="button"
汎用ボタンをつくります。
type="image"
画像のボタンをつくります。使用する画像ファイルはsrc属性で指定してください。またalt属性が必須となります。

■使用例

HTMLソース

<form action="cgi-bin/aaa.cgi" method="post">
<table border="0">
  <tr>
    <td align="right"><b> 名前:</b></td>
    <td><input type="text" name="name" size="30" maxlength="20"></td>
  </tr>
  <tr>
    <td align="right"><b> パスワード:</b></td>
    <td><input type="password" name="pass" size="6" maxlength="4"></td>
  </tr>
  <tr>
    <td align="right"><b>学年:</b></td>
    <td>
      <input type="radio" name="gakunen" value="1年生">1年生
      <input type="radio" name="gakunen" value="2年生">2年生
      <input type="radio" name="gakunen" value="3年生">3年生
      <input type="radio" name="gakunen" value="4年生">4年生
      <input type="radio" name="gakunen" value="5年生">5年生
      <input type="radio" name="gakunen" value="6年生">6年生
    </td>
  </tr>
  <tr>
    <td align="right"><b>好きな課目:</b></td>
    <td>
      <input type="checkbox" name="kamoku" value="国語">国語
      <input type="checkbox" name="kamoku" value="英語">英語
      <input type="checkbox" name="kamoku" value="算数">算数
      <input type="checkbox" name="kamoku" value="理科">理科
      <input type="checkbox" name="kamoku" value="社会">社会
      <input type="checkbox" name="kamoku" value="体育">体育
    </td>
  </tr>
  <tr>
    <td align="right"><b>宿題ファイル:</b></td>
    <td><input type="file" name="syukudai"></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="submit" value="送信">
      <input type="reset" value="リセット">
    </td>
  </tr>
</table>
</form>
↓↓↓

ブラウザ上の表示

名前:
パスワード:
学年: 1年生 2年生 3年生 4年生 5年生 6年生
好きな課目: 国語 英語 算数 理科 社会 体育
宿題ファイル:

■HTML5情報

<input> …… フォームを構成する様々な入力部品を作成する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ