ホーム＞HTMLリファレンス（アルファベット検索）＞<input>タグ
<input>…フォームのさまざまな項目（入力項目やボタン）を作る
使用タグ
 |
<input 属性="属性値"> |
開始タグと
終了タグ |
開始タグのみ |
内容となる
要素 |
なし
|
 |
      |
 解説
 <input>タグはインライン要素でこれを使えば、フォームを構成するさまざまな部品を作成できます。部品には一行テキストボックス、チェックボックス、ラジオボタン、実行ボタンなどの部品があります。詳しくは次の「属性と働き」を参照してください。
※「フォーム」 とは、入力されたデータを、サーバー上のCGIなどのプログラム等へ送信するしくみです。
<form>〜</form>の中に<input>タグ（入力項目）、<textarea>タグ（長いテキストの入力欄）、<select>タグ（選択肢のメニュー）などを並べます。
|
属性と働き
| 属性 |
働き |
指定できる値 |
| type="部品" |
フォームの部品を指定できます |
text、password、checkbox、radio、file、hidden、submit、reset、button、image
それぞれの値の説明は以下を参照してください |
| type="text" |
１行の入力欄を作成します |
|
| type="password" |
パスワード入力欄を作成します |
|
| type="checkbox" |
チェックボックスを作成します |
|
| type="radio" |
ラジオボタンの作成します |
|
| type="file" |
ハードディスク上のファイルの選択欄を作成します |
|
| type="hidden" |
ページに表示されない項目を作成します
value属性と併用して、決まった項目を送信する場合などに使います |
|
type="submit"
|
送信ボタンを作成します |
|
| type="reset" |
リセットボタンを作成します |
|
| type="button" |
通常のボタンを作成します
スクリプトなどで操作するときなどに使います |
|
| type="image" |
画像ボタンを作成します |
|
| value="テキスト" |
サーバーに送る項目の値を指定できますが、１行の入力欄、パスワード入力欄に指定すると、入力欄にすでに表示されているテキストを指定でき、ボタンに指定した場合は、ボタンに表示される文字を指定できます |
テキスト |
| name="項目名" |
サーバーに送る項目名を指定できます |
テキスト |
| size="幅" |
１行の入力欄、パスワード入力欄の幅を指定できます |
文字数を整数で指定 |
| checked="checked" |
あらかじめチェックされた状態で表示します（チェックボックス、ラジオボタンで使用可） |
checked |
| disabled="disabled" |
指定した部品はユーザーが操作できなくなり、その項目の値もサーバーに送られません |
disabled |
| readonly="readonly" |
読み取り専用の部品を作成します
ユーザーが操作できなくなりますが、指定した項目の値は送信されます |
readonly |
src="URL" |
画像ボタンの画像を読み込む際に使用する画像ファイルURLを指定できます |
絶対パス、相対パス |
| alt="テキスト" |
画像ボタンの画像を表示できない場合に表示するテキストを指定できます |
テキスト |
align="表示位置"
非推奨
CSSでの指定…vertical-align
…float |
ボタンを表示する位置を指定できます |
top（上揃え）、middle（中央揃え）
bottom（下揃え）、left（左揃え）、right（右揃え） |
| ismap="ismap" |
画像ボタンの画像のユーザーがクリックした座標をサーバーに送ることができます |
ismap |
| usemap="イメージマップ名" |
クライアントサイドクリッカブルマップを作る場合、map要素のname属性かid属性で指定したイメージマップ名を指定し、画像をイメージマップにできます |
URL#イメージマップ名 |
使用例
記述例
<form action="sample.cgi" method="post">
<fieldset>
<legend>ユーザー情報</legend>
ID：<input type="text" name="id" size="10">
パスワード：<input type="text" name="password" size="20">
</fieldset>
<fieldset>
<legend>評価</legend>
<input type="radio" name="hyouka" checked>上出来<br>
<input type="radio" name="hyouka">ふつう<br>
<input type="radio" name="hyouka">よくないと思う<br><br>
</fieldset>
<input type="submit" value="送信">
</form>
|
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
