戻る

INPUT要素

入力欄、チェックボックス、ラジオボックス等を表示する。

開始タグ:省略不可 修了タグ:なし

属性

type

text, password, checkbox, radio, submit, reset, file, hidden, image, button のどれかを指定する。

text: を指定すると文字の入力欄が表示される。
password: を指定するとパスワード入力欄が表示される。
checkbox: を指定するとチェックボックスが表示される。
radio: を指定するとラジオボタンが表示される。
submit: を指定すると、フォームの提出ボタンが表示される。このボタンを操作することによって、フォームが提出される。
reset: を指定するとリセットボタンが表示される。これを操作すると、フォームに入力したものが全て初期値に戻る。
file: を指定すると、閲覧しているコンピュータ内のファイルを撰択できる。
hidden: を指定すると、画面にはなにも表示されない。従って、基本的には閲覧者は入力したり変更したりできない。 CGIやスクリプト等によって変更できる。
image: を指定すると、画像を用いた提出ボタンが表示される。画像の指定にはsrc属性を用いる。
button: を指定すると、ボタンが表示される。

name

入力欄の名前を指定する。フォームを提出する際に、この名前と入力された値がセットになって送られる。

value

入力欄の初期値を設定する。「リセットボタン」を操作すると、この初期値の値に戻る。

size

入力欄の幅を指定する。

maxlength

typeがtextかpasswordの場合に、入力できる最大の文字数を指定する。

checked

typeがcheckboxかradioの場合、初期状態としてその項目が選択される。「リセットボタン」を操作すると、 checkedを指定された項目だけが選択された状態にもどる。

src

typeがimageの場合に、その画像の場所をURlで指定する。

readonly

この属性を指定すると、閲覧者は入力や変更をできなくなる。しかし、この値はフォームで提出される。

disabled

この属性を指定すると、閲覧者は入力や変更をできなくなる。そして、この値はフォームで提出されない。

id

class

land

dir

title

style

alt

accept

例

<html>
<head>
<title>フォームの使用例</title>
</head>
<body>
<h1>フォームの使用例</h1>
<H1>あなたの自慢の猫耳メイド写真投稿フォーム</H1>
<P>あなたのお家にいる自慢の猫耳メイドの写真を投稿してください。</P>
<P><EM>画像の投稿は猫耳メイド協会の実施する試験に合格した人しか行なえません。</EM></P>
<FORM action="http://moox.minidns.net/cgi-bin/sample.cgi"
enctype="multipart/form-data"
accept-chaeset="euc-jp"
accept="image/jpeg, image/png"
method="post">
<P>
合格時にあなたが協会から与えられた名前を入力してください : 
<INPUT type="text" name="username" size="8" maxlength="32"><BR>
パスワード : <INPUT type="password" name="password" size="8" maxlength="32"><BR>
「(猫耳)メイド」以外のあなたの属性は?<BR>
<INPUT type="checkbox" name="zokusei" checked>猫耳全般<BR>
<INPUT type="checkbox" name="zokusei">めがね<BR>
<INPUT type="checkbox" name="zokusei">ほっぺぷにぷに<BR>
<INPUT type="checkbox" name="zokusei">制服<BR>
<INPUT type="checkbox" name="zokusei">幼なじみ<BR>
</P>
<P>
画像についての質問です。<BR>
<!-- ここからラジオボタン -->
この画像は<BR>
<INPUT type="radio" name="attribute1" checked>全年令対象<BR>
<INPUT type="radio" name="attribute1">18際未満閲覧禁止<BR>
<INPUT type="radio" name="attribute1">21際未満閲覧禁止<BR>
<!-- ここまで -->
<BR>
画像の選択 : 
<INPUT type="file" name="picture"><BR>
</P>
<P>
<INPUT type="text" name="tikai" value="私は教祖様に忠誠を誓います。" size="28" readonly><BR>
<INPUT type="text" name="waring" value="実際に画像は送れません。" size="28" disabled><BR>
<INPUT type="submit" value="画像送信">
<INPUT type="reset" value="リセット">
<INPUT type="button" value="ほぇ?">
<INPUT type="hidden" name="from" value="gazoutoukou">
</P>
</FORM>
</body>
</html>

例をHTMLにしてみました。

戻る