HTMLタグ一覧 フォーム編

FORM INPUT TEXTAREA SELECT OPTION

FORM INPUT OPTION SELECT TEXTAREA

はじめに

表の意味

要素名

タグの説明。使い方など。
タグの省略可不可や分類、関係するタグなど。
属性の名前。 属性の意味。
サンプルコードなど。

タグの省略可不可について

<始>
開始タグは省略できません。
(始)
開始タグの省略が可能です。
<終>
終了タグは省略できません。
(終)
終了タグの省略が可能です。
[--]
終了タグを書いてはいけません。

要素の分類について

(B)(I)(???)
この要素がどんな要素かかいてあります。(B)はブロック要素、(I)はインライン要素、(???)は???要素の子要素を意味します。
[B][I]<???>-<???>
この要素の中に入れられる要素が書いてあります。[B]はブロック要素、[I]はインライン要素、<???>は???要素を意味します。また、-<???>のように、前にマイナスのついているものはこの要素の中に入れることができません。

フォームとその部品

ブロック要素・フォームを記述するために必要な要素（タグ）

FORM

　ＣＧＩプログラムやJavaScript等のスクリプト言語に渡す引数を書くタグを書きますよ、というタグ。
<INPUT>等の部品を使うときにそれを囲うタグ。
実は入れ子にするのを禁止されていたりも。
<始> <終> (B) [B][SCRIPT]-<FORM> INPUT TEXTAREA SELECT OPTION
action サブミット（送信）ボタンが押されたときに、フォームのデータを送る先のアドレスを指定する。
method データを送る方法。通常は無難にmethod=postとする。 通の人はgetを使ったりしますよ〜〜
name フォームの名前。JavaScript等を使うときに重要。でもＣＧＩに送るときはあまり意味がないかも。
target これはＣＧＩにデータを送った後、帰ってきたデータ（姓名判断の結果なり本日の運勢なり）をどこに表示するかの指定。
<A>タグのtargetと同じ。

INPUT

フォームの要とも言うべき、データ入力やら「送信」「リセット」ボタンを配置するタグ。
<始> [--] (I)(FORM) FORM TEXTAREA
size テキスト入力フィールドの幅です。半角文字数で指定。
type

入力フィールドの種類。次の１０個がある。
text：通常の文字入力フィールド
password：上と同じ。しかし、入力した文字は表示されない
hidden：隠しデータ。ユーザーの設定の要らないデータなどを書いておく。ブラウザには何も表示されない。
radio：ラジオボタン。いくつかの候補から一つ選ばせる
checkbox：チェックボックス。いくつかの候補からいくつか選ばせる
submit：送信ボタンです。アクションがないとリロードされちゃうみたい。
reset：リセットボタン。フォームのデータが初期状態に戻る
button：ただのボタン。押しても何も起こらない。主にJavaScriptのイベントを起こすのに使う
file：ファイル送信。ファイル名ではなく、ファイルそのものを送ります。
image：絵ボタン＋サブミット。クリックした座標が送られるらしい。

maxlength 入力される文字の最大長。文字数で書きます。
name 各フィールドの名前。重複しても文句は言われないが不都合はある。
ここで指定した名前はＣＧＩプログラムにname=なんたら、の形で送られる。
value 入力フィールド系ではあらかじめかき込まれている文字列。
hidden,radio,checkboxでは送られる値、ボタン系ではボタンに書いてある文字を指定する。
src 絵ボタンの絵。
CHECKED チェック系で、あらかじめチェックされているところにこれを書く。

TEXTAREA

　<Input type=text>のでかいヤツ。
　このタグで囲った範囲が、<Input type=text>で言うvalue属性と一致する。
あくまでもtextのでかいやつなので、見かけに反してインライン要素だったりするので注意。
<始> <終> (I)(FORM) [テキスト] FORM INPUT
rows 行数。実は必須。
cols 幅。文字数ではいる。実は必須。
name 名前。ここで指定した名前はＣＧＩプログラムにname=なんたら、の形で送られる。
wrap 折り返し指定。wrap="heard"と書けば無理やり折り返す。書かなくてもＩＥでは無理やり折り返す。

SELECT

　プルダウン形式でいくつかの候補の中から一つ選ばせるアレです。
検索エンジンの「表示件数」やら「検索対象」、はたまたチャットの「色」など、至る所でお目にかかるので、ああ、アレか、ぐらいはわかるはず。
<option>タグと組み合わせないと使えない（と思う）。
<始> <終> (I)(FORM) <OPTION> FORM OPTION
name 名前。ここで指定した名前はＣＧＩプログラムにname=なんたら、の形で送られる。
size 一度にどれだけ表示するか。size=1を指定するとプルダウン形式になる（はず）。
１以外の時は、データがサイズより多いとスクロールバーが付くので多い日も安心。
MULTIPLE これを書くと複数選択可能になる。

OPTION

<Select>タグの中に入るデータ。これがないとセレクトの意味がない。
<Select><option>１<option>２<option>３<option>４<option>５</select> みたいな感じで書き連ねて指定する。
　ちなみにこの例ではこんな感じになる。
　このタグのすぐ後ろにある文字が、選択対象になるわけです。
<始> (終) (SELECT) [テキスト] FORM SELECT
selected あらかじめ選択されているもの。<option selected>なんたらと書けば「なんたら」が選択された状態になる。 複数書いたら最後の一つが採用される（かも）。
value セレクトを使っていると、ＣＧＩには英数字で送りたいのが、オプション指定は日本語にしたい、と思うことがしばしばあります。
そんなとき役に立つのがこの属性。<option value=red>赤と書くと、「赤」が選択されればＣＧＩには「red」が送られるという優れモノ。
一家に一台欲しい（謎）。

戻る
魔導実験室。