フォーム - 入力要素
- input〔入力要素〕
- input type=”text”〔1行テキスト入力欄〕
- input type=”password”〔パスワード入力欄〕
- input type=”radio”〔ラジオボタン〕
- input type=”checkbox”〔チェックボックス〕
- input type=”file”〔ファイル参照〕
- input type=”button”〔通常のボタン〕
- input type=”submit”〔送信ボタン〕
- iinput type=”reset”〔リセットボタン〕
- input type=”image”〔画像ボタン〕
- input type=”hidden”〔隠し要素〕
input
入力要素
2008/3/26
構文
<input />
説明
input要素は、様々な入力要素を表すインライン要素です。
input要素は、空要素のため<input />のように記述します。
属性
| 属性="値" | 説明 | サポート状況 | 必須・任意 | 代替 | |
|---|---|---|---|---|---|
| XHTML 1.0 | XHTML 1.1 | ||||
| 一般属性 | - | STF | S | 任意 | style属性はCSSで代替。 |
| focusイベントを取得可能な要素のための属性 | STF | S | 任意 | ||
| type="%InputType" | 入力要素のタイプを指定。省略した場合はデフォルト値の"text"が適用されます。 | STF | S | "text" | |
| name="%CDATA" | 入力要素の名前を指定 | STF | S | 任意 | |
| value="%CDATA" | デフォルト入力値、またはボタンに表示される値。 | STF | S | 任意 | |
| checked="checked" | ラジオボタン（type="radio"）またはチェックボックス（type="checkbox"）のデフォルトのチェックの有無を指定。デフォルトはチェック無。 | STF | S | 任意 | |
| disabled="disabled" | 入力要素の無効化の有無を指定。デフォルトは有効。 | STF | S | 任意 | |
| readonly="readonly" | 入力要素を読取専用にするかの有無を指定。デフォルトは読取専用ではない。 | STF | S | 任意 | |
| size="%CDATA" | 入力要素の幅を指定。テキストボックス（type="text"）の場合は文字数、それ以外の場合はピクセルで指定。 | STF | S | 任意 | |
| maxlength="%Number" | 入力最大文字数を指定。 | STF | S | 任意 | |
| usemap="%URI" | クライアントサイドイメージマップを使用する場合、関連付けるmap要素のid属性を指定。 | STF | S | 任意 | |
| src="%URI" | 画像ボタン（type="image"）の画像URLを指定。 | STF | S | 任意 | |
| alt="%CDATA" | 画像ボタン（type="image"）の代替テキストを指定。 | STF | S | 任意 | |
| onselect="%Script" | 入力値が選択された時に実行する処理を指定。 | STF | S | 任意 | |
| onchange="%Script" | 入力値が変更された時に実行する処理を指定。 | STF | S | 任意 | |
| accept="%ContentType" | フォームのaction属性に指定したプログラムが処理可能なMIMEタイプを指定。 | STF | S | 任意 | |
| align="%ImgAlign" | 画像ボタン（type="image"）の画像の上下・左右方向の整列位置を指定。 | TF | - | 任意 | |
input type=”text”
1行テキスト入力欄
2008/3/26
構文
<input type=”text” size=”数値” maxlength=”最大入力文字数” />
説明
テキストの入力欄を生成します。
サンプル
<form action="#"> <input type="text" name="txt" size="50" maxlength="256" value="テキスト" /> </form>
input type=”password”
パスワード入力欄
2008/3/26
構文
<input type=”password” size=”数値” maxlength=”最大入力文字数” />
説明
パスワードの入力欄を生成します。
「●」や「*」など入力したテキストが暗号化されて表示されます。
サンプル
<form action="#"> パスワード：<input type="password" name="pw" size="10" maxlength="7" value="1234567" /> </form>
input type=”radio”
ラジオボタン
2008/3/26
構文
<input type=”radio” value=”値” name=”名前” />
説明
ラジオボタンを生成します。
ラジオボタンはユーザーに1つだけ選択させたい場合に使用します。
サンプル
<form action="#"> 利用規約に同意しますか？<br> <input type="radio" name="agreement" value="yes" /> はい <input type="radio" name="agreement" value="no" /> いいえ </form>
input type=”checkbox”
チェックボックス
2008/3/26
構文
<input type=”checkbox” value=”値” name=”名前” />
説明
チェックボックスを生成します。
チェックボックスは、ユーザーに複数選択させたい場合に使用します。
サンプル
<form action="#"> 好きなスポーツを洗濯してください（複数選択可）<br> <input type="checkbox" name="sports_1" value="golf" /> ゴルフ <input type="checkbox" name="sports_2" value="basketball" /> バスケットボール <input type="checkbox" name="sports_3" value="skiing" /> スキー <input type="checkbox" name="sports_4" value="basetball" /> 野球 <input type="checkbox" name="sports_5" value="swimming" /> 水泳 <input type="checkbox" name="sports_6" value="succer" /> サッカー <input type="checkbox" name="sports_7" value="other" /> その他 </form>
input type=”file”
ファイル参照
2008/3/26
構文
<input type=”file” />
説明
ファイル名の入力欄と参照ボタンが表示されます。 フォーム送信時に、入力されたファイル名をサーバーに送信します。 画像のアップロードなどに有用です（サーバーサイドのプログラム必要）。
参照ボタンの名前はセキュリティ上、変更できない仕様になっています。
サンプル
<form action="/content/demo/test.php" method="post"> ファイル：<input type="file" name="filename" size="50" /> <input type="submit" value="送信" /> </form>
input type=”submit”
送信ボタン
2008/3/26
構文
<input type=”submit” value=”送信” />
説明
フォームに入力されたデータをフォームのaction属性で指定したプログラムのあるサーバーに送信します。
フォーム送信時にJavaScriptで入力チェックなどの処理を行いたい場合は、フォームのonsubmit属性にフォーム送信する前に実行する処理を指定します。
onsubmit属性に、return frmChk();のように指定し、関数の戻り値でフォームを送信するか否かを指定するとよいでしょう。
関数の戻り値が、TRUEの場合はフォームが送信され、FALSEの場合はフォームは送信されません。
サンプル
<script type="text/javascript">
function frmChk(frmObj){
var bool=(frmObj.txt.value!="") ? true : false;
if(!bool) alert('何か入力してくださいまし。');
return bool;
}
</script>
<form action="/content/demo/test.php" method="post" onsubmit="return frmChk(this);">
<input type="text" name="txt" size="50" value="" />
<input type="submit" name="btn_submit" value="POST送信" />
<input type="reset" name="btn_reset" value="リセット" />
</form>
<br>
<form action="/content/demo/test.php" method="get" onsubmit="return frmChk(this);">
<input type="text" name="txt" size="50" value="" />
<input type="submit" name="btn_submit" value="GET送信" />
<input type="reset" name="btn_reset" value="リセット" />
</form>
iinput type=”reset”
リセットボタン
2008/3/26
構文
<input type=”reset” value=”リセット” />
説明
フォームに入力されたデータを全てリセットします。 form要素のonreset属性を利用して、フォームリセットを実行するかの有無を確認することも可能です。 onreset属性にTRUEを返すとリセットされ、FALSEを返すとリセットされません。
input要素のvalue属性に指定した値、select要素のselected属性、radioまたはcheckbox要素のchecked属性で指定したデフォルト値はリセットされません。 リセットした場合、初期値としてデフォルトが表示されます。 リセットの対象となるのは、ユーザーが入力、または変更したもののみです。
サンプル
<p>【デフォルト値なしの場合】
<form action="#" onreset="return window.confirm('フォームをリセットします');">
<input type="text" value="" />
<p><input type="radio" name="ra" value="1" />項目1／<input type="radio" name="ra" value="2" />項目2／<input type="radio" name="ra" value="3" />項目3</p>
<p><input type="checkbox" value="1" />項目1／<input type="checkbox" value="2" />項目2／<input type="checkbox" value="3" />項目3</p>
<p><select><option value="">▼選択してください</option><option>選択肢1</option><option>選択肢2</option><option>選択肢</option></select></p>
<input type="reset" name="btn_reset" value="リセット" />
</form>
<hr>
<p>【デフォルト値ありの場合】 デフォルト状態にリセットされます。
<form action="#" onreset="return window.confirm('フォームをリセットします');">
<input type="text" value="デフォルトテキスト" />
<p><input type="radio" name="rr" value="1" checked="checked" />項目1（デフォルト）／<input type="radio" name="rr" value="2" />項目2／<input type="radio" name="rr" value="3" />項目3</p>
<p><input type="checkbox" value="1" checked="checked" />項目1（デフォルト）／<input type="checkbox" value="2" />項目2／<input type="checkbox" value="3" />項目3</p>
<p><select><option value="" selected="selected">▼選択してください（デフォルト）</option><option>選択肢1</option><option>選択肢2</option><option>選択肢</option></select></p>
<input type="reset" name="btn_reset" value="リセット" />
</form>
【デフォルト値なしの場合】
【デフォルト値ありの場合】 デフォルト状態にリセットされます。
input type=”image”
画像ボタン
2008/3/26
構文
<input type=”image” src=”画像URL” alt=”代替テキスト” />
説明
画像ボタンを生成します。
画像ボタンの場合、src属性（画像ファイルのURL）、alt属性（画像の代替テキスト）は必須属性です。
画像ボタンでフォームを送信すると、ボタンのx、y座標も送信されます。
パラメータ名は、{ボタンのname属性}_x、{ボタンのname属性}_yになります。
サンプル
<form action="/content/demo/test.php" method="post"> <input type="image" name="btn_image" src="/content/img/btn/btn_on.gif" alt="ボタン" /> </form>
input type=”hidden”
隠し要素
2008/3/26
構文
<input type=”hidden” value=”値” />
説明
隠し要素を生成します。 隠し要素は、ユーザーに入力させずに、固定で渡したい値がある場合などに使用します。
サンプル
<form action="/content/demo/test.php" method="post" onsubmit="this.location.value=document.location.href;"> <input type="hidden" name="location" /> 隠し要素として送信元のページのURLを送信： <input type="submit" name="btnsubmit" value="送信" /> </form>