「HTML/フォーム」の版間の差分

 

== フォーム全体の構成 ==

<form action="post.cgi" name="名前" method="post">

<input type="text" value="ウィキブックス">

<input type="submit" value="送信">

</form>

;form要素

:HTMLソース中でそのフォームの開始位置と終了位置を明示する要素。

 

=== 送信ボタン ===

<input type="submit" value="ボタンテキスト">

 

 

<input type="image" src="画像のファイルパス" alt="代替テキスト">

form要素内で指定された内容を送信するボタン。クリックすると情報を送信し、form要素に指定されたaction属性の内容に基づいてページ遷移を行う。

 

 

=== リセットボタン ===

<input type="reset" value="ボタンテキスト">

 

<button type="reset">ボタンテキスト</button>

form要素内の値をリセットし初期状態へと戻す。input要素で作ったリセットボタンはデフォルトであればブラウザが自動的に文字列を指定するが、その値はブラウザの種類や言語環境によって異なる。

 

=== 汎用ボタン ===

<input type="button" value="ボタンテキスト">

 

<button type="button">ボタンテキスト</button>

単体ではクリックしても何も起こらないボタン。送信もリセットも行わない。JavaScriptのonclick属性などと組み合わせて利用するのが一般的である。valueの属性を省略してもブラウザがデフォルトの文字列を指定することはない。

 

=== ファイル選択 ===

<input type="file" name="名前" accept="MIMEタイプ">

CGIでローカルファイルをサーバーへ送信するときに使用する。ローカルファイルを選択するフォームを表示する。フォームのデザインやボタンテキストなどはOSやブラウザに依存であり、スタイルシートなどを使ってこれを変更することは出来ない。accept属性で選択可能なファイルタイプを「,」区切りにして指定することが出来るが、サポート環境は少ない。なお、この機能を利用する場合はform要素のmethod属性にpostを、enctype属性にmultipart/from-dataを設定する必要がある。

 

 

=== 一行テキストボックス ===

<input type="text" value="初期値" name="名前" maxlength="最大文字数" readonly>

改行を含まない文字列を表示・入力するフォーム。maxlength属性で最大文字数を指定でき、指定しなかった場合は無制限となる。readonly属性値（属性名ではない）を指定すると入力値を変更不可能とすることが出来る。

 

=== 複数行テキストボックス ===

<textarea cols="横の文字数" rows="縦の文字数" wrap="on" readonly>デフォルト

の

文字列</textarea>

改行を含んだ文字列（文章）を表示・入力するフォームにはinput要素でなくtextarea要素を使用する。デフォルトでは右端に来たとき自動的に文字列が折り返されるが、wrap属性をoffにした場合右端に来ても折り返しが行われることはなくそのまま横に続く。テキストエリア内に書かれたHTMLなどは全て無効化され、[[w:実体参照|実体参照]]以外は改行も含めて全てがそのままの状態で表示されることが多い。readonly属性値を指定すると、入力された値を変更できないようになる。

 

=== パスワード用テキストボックス ===

<input type="password" name="名前" value="初期値">

認証などでパスワードを入力するためのフォーム。入力された文字列はアスタリスク (“*”) や黒丸 (“●”)などでマスクされた状態で表示されることが多い。パスワード用テキストボックスの文字列値をクリップボードからの貼り付けで変更することは出来るが、入力された文字列をクリップボードにコピーすることは出来ないことが多い。

 

=== 隠しフォーム ===

<input type="hidden" name="名前" value="初期値">

画面上に表示されないフィールドを作成する。ユーザー側に任意値の入力を求める必要がなく、CGIプログラム側で識別が必要な設定値などをこれに指定する。

 

=== ラジオボタン ===

<input type="radio" name="名前" value="識別値" checked>

radio属性で複数存在する選択項目からひとつの内容を選択できるようにするラジオボタンを作成する。同じグループに属するラジオボタンには全て同じname属性値を指定しなければならない。value属性値を指定することでどの項目が選択されたかフォーム送信時に識別させる。checked属性値を指定することで指定された項目を初期状態でチェックさせることが可能。

 

=== チェックボックス ===

<input type="checkbox" name="名前" value="識別値" checked>

複数の選択項目の中から複数項目を選択できるようにするチェックボックスを作成する。name属性でグループを識別し、value属性値で選択された項目を識別する。ラジオボタンと同様、checked属性値を指定することで指定された項目を初期状態でチェックさせることが可能。

 

 

==== プルダウンメニュー ====

<select name="名前">

<option value="識別値1">項目1</option>

<option value="識別値4">項目4</option>

</select>

select要素とoption要素を使用することでプルダウンメニューを作成できる。任意のoption要素にselected属性値を指定した場合その項目が初期状態で選択状態となり、指定しなかった場合どの項目が指定されるかはブラウザ依存となる（通常一番上が指定される）。

 

 

===== グループメニュー =====

<select name="名前">

<optgroup label="グループ名1">

</optgroup>

</select>

option要素群をoptgroup要素でグループ分けすることによりプルダウンメニューのグループ表示が可能になる。option要素のlabel属性の属性値は表示をグループ化したときに表示されるもので、メニュー項目の省略形を記述するようになっている。ただし一般的なブラウザで現在このグループ表示に対応しているものは非常に少なく、未対応ブラウザではoptgroup要素を選択不可能項目として表示させるようになっていることが多い。

 

==== リストボックス ====

<select name="名前" size="行数" multiple>

<option value="識別値1">項目1</option>

<option value="識別値4">項目4</option>

</select>

select要素にsize属性を指定すると複数行表示が可能になり、size属性の値が行数になる。一般的に、項目が行数より多い場合は行数分だけ表示され、残りはスクロールバーを利用して表示・選択できる形となる。また、multiple属性値を指定した場合複数項目を選択して送信できるようになる。

[[et:HTML:Vormid]]