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

削除された内容 追加された内容
既存の説明文章のみ推敲
隠しフォーム、ラジオボタン、チェックボックスについて加筆
1 行
フォームとは、ユーザに何らかの情報を入力させ、それをサーバに送信するためのものである。form要素を用意し、その中にフォームを構成する部品のinput要素を入れていくことを言うで作成される
 
== 作成方法汎用属性 ==
formタグを使い、その中に部品のタグinput等を入れていく。inputは終了タグが必要でない。
 
== 属性 ==
=== action属性 ===
フォームに入力されたデータの送信先を指定する。
 
=== method属性 ===
フォームの送信形式を指定する。GETとMETHODの2種類があり、指定しない場合GETになる。GETは、送信先(actionで指定したもの)の末尾に、サーチデータとして、?name属性値=value値&name属性値=value値...という文字列を付加することによって情報を送信する。一方、POSTは、[[w:環境変数|HTTPリクエストヘッダ]]に情報が記述される。一般に、検索エンジンのキーワードなどはGET、個人情報の入力などにはPOSTが使われる。
 
=== name属性 ===
テキストボックスやプルダウンメニューなどフォーム内にある各部品に対して指定する。送信を行うときのために、各フォームを識別する目的で使用される。
 
=== disabled属性 ===
指定されたフォームのコントロールを無効化するために指定する。この属性値が指定されたフォームは一切の内容を変更することが不可能となり、またフォーム内では存在しないものと同様の扱いを受ける。しばしJavaScriptとの組み合わせで必要のないフォームデータの送信をブロックするために用いられる。
 
== 部品の種類 ==
各部品は、inputタグの、type属性に指定した内容によって作成することができる。
 
=== 送信ボタン ===
<source lang="html4strict">
52 ⟶ 55行目:
=== 一行テキストボックス ===
<source lang="html4strict">
<input type="text" value="初期値" name="名前" maxlength="最大文字数" readonly>
</source>
改行を含まない文字列を表示させるフォーム。maxlength属性で最大文字数を指定でき、指定しなかった場合は無制限となる。readonly属性値(属性名ではない)を指定すると入力値を変更不可能とすることが出来る。
 
=== 複数行テキストボックス ===
<source lang="html4strict">
<textarea cols="横の文字数" rows="縦の文字数" wrap="on" readonly>デフォルト
文字列</textarea>
</source>
改行を含んだ文字列を表示できるフォーム。掲示板やメールフォームなどに文章を送信する場合など利用される。デフォルトでは右端に来たとき自動的に文字列が折り返されるが、wrap属性をoffにした場合右端に来ても折り返しが行われることはなくそのまま横に続く。テキストエリア内に書かれたHTMLやJavaScriptなどは全て無効化され、[[w:実体参照|実体参照]]以外は改行も含めて全てがそのままの状態で表示される。readonly属性値を指定すると、入力された値を変更できないようになる。
 
=== パスワード用テキストボックス ===
71 ⟶ 74行目:
 
=== 隠しフォーム ===
<source lang="html4strict">
 
<input type="hidden" name="名前" value="初期値">
=== チェックボックス ===
</source>
画面上に表示されないフィールドを作成する。ユーザー側に任意値の入力を求める必要がなく、CGIプログラム側で識別が必要な設定値などをこれに指定する。
 
=== ラジオボタン ===
<source lang="html4strict">
<input type="radio" name="名前" value="識別値" checked>
</source>
radio属性で複数存在する選択項目からひとつの内容を選択できるようにするラジオボタンを作成する。同じグループに属するラジオボタンには全て同じname属性値を指定しなければならない。value属性値を指定することでどの項目が選択されたかフォーム送信時に識別させる。checked属性値を指定することで指定された項目を初期状態でチェックさせることが可能。
 
=== チェックボックス ===
<source lang="html4strict">
<input type="checkbox" name="名前" value="識別値" checked>
</source>
複数の選択項目の中から複数項目を選択できるようにするチェックボックスを作成する。name属性でグループを識別し、value属性値で選択された項目を識別する。
 
{{stub}}