フォームに関するタグ


フォームの定義 ○ ○ ○ ○ #definition

<FORM action="データの送信先" method="get｜post" enctype="CONTENTタイプ">
終了タグ:必須
enctype は method で post にした場合のみ用います．データの送信先はメール(例:mailto:feo@fahee.lo.tv)もしくはデコードサービスのCGIのURLを記入します．デコードとは次のenctypeとも関連がありますが，普通，データは符号化して送信されます(つまりそのままでは読めません)．それを読めるように直しメールを送るのがデコードです．(メールデコードサービスの例:AltoWorld)
enctypeはその符号化方法を指定するものです．ここではそのいくつかを挙げます．application/x-www-form-urlencodedがデフォルトです．text/plainとすると，そのまま送信されます．(デコードの必要がありません)．フォームを使いファイルをアップロードする場合(後述)multipart/form-data にする必要があります．
method は get がデフォルトであるが，postを一般的に用いる事が多いです．<FORM>〜</FORM>内に送信する内容を入れます．
BACK △
一行のテキスト入力欄 ○ ○ ○ ○ #text

<INPUT type="text｜password" name="入力欄の名前" size="横幅(半角文字数)" value="初期表示" maxlength="最大入力文字数">
終了タグ:不要
大体見たとおりなので分かると思います．nameは内容と共に送信されるので何の質問か分かるようにした方がいいです．textとpasswordの違いは，textが入力されたものがそのまま表示されるのに対し，passwordは＊や●等で表示されます．maxlengthを超えている場合は，それ以降の部分がカットされて送信されます（あるいはその文字数を超えて入力できません）．
：
【HTML】
<INPUT type="password" size="10">：<input type="text" size="10">
BACK △
複数行のテキスト入力欄 ○ ○ ○ ○ #text-m

<TEXTAREA name="入力欄の名前" cols="横幅(半角文字数)" rows="行数">
：
</TEXTAREA>
終了タグ:必須
nameは上と同様で，：の部分がデフォルトで表示される内容です．

【HTML】
<textarea rows="2" cols="20">TEXTAREAで囲まれた部分がこのように表示されます．</textarea>
BACK △
チェックボックス/ラジオボタン ○ ○ ○ ○ #box

<INPUT type="checkbox｜radio" name="選択肢の名前" value="送信内容(選択肢の内容)" checked>
終了タグ:不要
大体見たとおりなので分かると思います．nameとvalueはname="評価"，value="比較的良い"のような感じにしてください．チェックボックスはいくつも選択出来るのに対し，ラジオボタンは1つのnameにつき1つしか選択できません．checkedを入れると初めから選択された状態になっています．また type="radio" とした場合は必ず1つはチェックされた状態で無ければなりません．
選択無し　 選択済み　 選択済み
【HTML】
<input type="checkbox" name="1" value="1" checked="checked">

選択済み　 選択無し　 選択無し
【HTML】
<input type="radio" name="2" value="1" checked="checked">

選択なし　 選択済み　 選択済み
BACK △
ファイル選択のボタン ○ ○ ○ ○ #file

<INPUT type="file" name="フィールドの名前" size="フィールドのサイズ(半角文字数)">
終了タグ:不要
大体見たとおりなので分かると思います．これを入れるだけで参照ボタンと，C:\...などを入力するフィールドが表示されます．

【HTML】
<input type="file" name="アップロードファイル" size="17">
BACK △
表示されない内容 ○ ○ ○ ○ #hidden

<INPUT type="hidden" name="内容の名称" value="送信する文字">
終了タグ:不要
BACK △
回答のメニュー(プルダウンメニューetc..) ○ ○ ○ ○ #pulldown

<SELECT name="選択肢の名前" size="行数" multiple>
<OPTION value="送信する内容" selected>〜</OPTION>
：
<SELECT>
終了タグ:必須
nameはこれまでと同様．multiple属性を入れると複数選択が可能になる．selectは骨組みを作るだけでsize="1"ならばプルダウンメニュー，size="2"以上ならばメニューがフィールドの中に表示される．

【HTML】
<select name="sample" size="5" multiple="multiple">
<OPTION selected="selected">1</OPTION>
<OPTION selected="selected">2</OPTION>
<OPTION>3</OPTION>
<OPTION selected="selected">4</OPTION>
<OPTION selected="selected">5</OPTION>
</select>


【HTML】
<select name="sample2" size="1">
<OPTION>1</OPTION>
<OPTION>2</OPTION>
<OPTION>3</OPTION>
<OPTION selected="selected">4</OPTION>
<OPTION>5</OPTION>
</select>
BACK △
回答のグループ分け ○ ○ ○ ○ #group

<OPTGROUP label="分類名"> <OPTION>〜</OPTION>
：
</OPTGROUP>
終了タグ:必須
OPTIONは上記を参照のこと．OPTIONをグループに分ける．labelがその分類名になる(強調表示され得る)．

【HTML】
<select name="ComOS">
<OPTION selected="selected" label="none" value="none">None</OPTION>
<OPTGROUP label="InternetExplorer">
<OPTION label="６" value="６">６</OPTION>
<OPTION label="５" value="５">５</OPTION>
<OPTION label="４" value="４">４</OPTION>
</OPTGROUP>
<OPTGROUP label="Netscape">
・・・・・
</select>
BACK △
ボタンを作る ○ ○ ○ ○ #button

<BUTTON type="submit｜button｜reset" name="名称" value="内容">
終了タグ:必須
INPUTの送信ボタンリセットボタン(下記)と似ています．buttonにすると普通の押しボタンができ，その他のスクリプトなどと組み合わせて利用します．INPUTとの違いはレンダリング能力が高い(<button>に囲まれ た部分がボタンになるので自由性がある)ことです．


【HTML】
<BUTTON type="reset">リセット</BUTTON>
BACK △
送信ボタン/リセットボタン ○ ○ ○ ○ #submit

<INPUT type="submit｜reset" value="表示する文字">
<INPUT type="image" src="表示するファイルのURL" alt="代替テキスト" width="画像の横幅" height="画像の高さ">
終了タグ:不要
上はsubmitが送信，resetがリセット．下は画像を送信ボタンにするときに使う．
BACK △
Skill Up 入力のしやすさを考える ○ ○ ○ ○ #skillup

<※1 tabindex="0〜32767の数">
<※2 accesskey="英数字(半角で1字)">
終了タグ:要素による
A，AREA，BUTTON，INPUT，OBJECT，SELECT，TEXTAREAが※1に入る．A，AREA，BUTTON，INPUT，LABEL，LEGEND，TEXTAREAが※2に入る．tabindexはタブを押すと数字が小さい順にon/offや入力待ち状態になる．入力してない場合上から順になる．accesskeyは指定された文字を押す事によってon/offや入力待ち状態になる．一般にWindowsではAltキー を，MacではCmdキーを押しながら入力する必要がある．
： ：
【HTML】
<input type="text" size="16" value="アクセスキーＮ" accesskey="n">
BACK △
フォームサンプル #samp

ウェブネーム：
性別：男性　女性
メールアドレス：
郵便番号：ハイフン抜きで入力
住所：
BACK △