<INPUT>
関連属性
type="text | password | checkbox | radio | hidden | submit | reset"
name="フィールド名"
value="データ"
size="文字数"
maxlength="最大バイト数"
checked
accesskey="char" ダイレクトキー機能(イージーフォーカス)
意味
データを入力するテキストボックスやチェックボックス、ラジオボタン、送信ボタン、リセットボタンなどを表示します。
書式、ソース、画面
テキスト入力の場合
書式
<INPUT type="text" name="フィールド名" value="データ" size="文字数" maxlength="最大バイト数" accesskey="char">
ソース
<HTML><HEAD><TITLE>INPUT TEXT</TITLE></HEAD><BODY>
ユーザIDを入力してください<BR>
<FORM method="post" action="cgi-bin/ID.cgi">
<INPUT type="text" name="ID" size="14" maxlength="16"><BR>
<INPUT type="submit" value="決定"><BR>
<INPUT type="reset" value="クリア">
</FORM>
</BODY></HTML>
画面
送信ボタンの場合
書式
<INPUT type="submit" name="フィールド名" value="データ" accesskey="char">
ソース
<HTML><HEAD><TITLE>INPUT TEXT</TITLE></HEAD><BODY>
ユーザIDを入力してください<BR>
<FORM method="post" action="cgi-bin/ID.cgi">
<INPUT type="text" name="ID" size="14" maxlength="16"><BR>
<INPUT type="submit" value="決定"><BR>
<INPUT type="reset" value="クリア">
</FORM>
</BODY></HTML>
画面
リセットボタンの場合
書式
<INPUT type="reset" name="フィールド名" value="データ" accesskey="char">
ソース
<HTML><HEAD><TITLE>INPUT TEXT</TITLE></HEAD><BODY>
ユーザIDを入力してください<BR>
<FORM method="post" action="cgi-bin/ID.cgi">
<INPUT type="text" name="ID" size="14" maxlength="16"><BR>
<INPUT type="submit" value="決定"><BR>
<INPUT type="reset" value="クリア">
</FORM>
</BODY></HTML>
画面
パスワード入力の場合
書式
<INPUT type=" password" name="フィールド名" value="データ" size="文字数" maxlength="最大バイト数" accesskey="char">
ソース
<HTML><HEAD><TITLE>INPUT PASSWORD</TITLE></HEAD><BODY>
パスワードを入力してください<BR>
<FORM method="post" action="cgi-bin/passwd.cgi">
<INPUT type="password" name="PASSWD" size="14" maxlength="16"><BR>
<INPUT type="submit" value="決定"><BR>
<INPUT type="reset" value="クリア">
</FORM>
</BODY></HTML>
画面
チェックボックスの場合
書式
<INPUT type="checkbox" name="フィールド名" value="データ" checked accesskey="char">
ソース
<HTML><HEAD><TITLE>INPUT CHECKBOX</TITLE></HEAD><BODY>
欲しい情報を選択して下さい<BR>
<FORM method="get" action="cgi-bin/interest.cgi">
<INPUT type= "checkbox" name="interest" value="1" checked>映画<BR>
<INPUT type= "checkbox" name="interest" value="2">コンサート<BR>
<INPUT type= "checkbox" name="interest" value="3">タウン情報<BR>
<INPUT type= "checkbox" name="interest" value="4">占い<BR>
<INPUT type= "submit" value="決定" ><BR>
<INPUT type= "reset" value= "クリア">
</FORM>
</BODY></HTML>
画面
ラジオボタンの場合
書式
<INPUT type="radio" name="フィールド名" value="データ" checked accesskey="char">
ソース
<HTML><HEAD><TITLE>INPUT RADIO</TITLE></HEAD><BODY>
あなたの性別を入力してください<BR>
<FORM method="get" action="cgi-bin/sex.cgi">
<INPUT type="radio" name="sex" value="1" checked>男性<BR>
<INPUT type="radio" name="sex" value="2" >女性<BR>
<INPUT type="submit" value="決定" ><BR>
<INPUT type="reset" value="クリア">
</FORM>
</BODY></HTML>
画面
非表示データを指定する場合
書式
<INPUT type="hidden" name="フィールド名" value="データ">
ソース
<HTML><HEAD><TITLE>INPUT HIDDEN</TITLE></HEAD><BODY>
登録してもよろしいですか<BR>
<FORM method="post" action="cgi-bin/location.cgi">
<INPUT type="hidden" name="location" value="Tokyo" >
<INPUT type="hidden" name="Country" value="Japan" >
<INPUT type="submit" value="登録" ><BR>
<INPUT type="reste" value="キャンセル">
</FORM>
</BODY></HTML>
画面
画面イメージは実際のものと異なる場合がございます。
HTMLタグおよびアトリビュートは半角大文字、半角小文字が混在していても動作可能です。