入力フォームの構成部品について
入力フォームを作成する場合、まずform要素を使用する。<form></form>の間にラジオボタンや入力フィールドを配置し、<form>内に指定した方法でCGIスクリプトに引き渡す。
form要素については既に説明済みであるが、念のため再掲する。
<form method="メソッド" action="./スクリプト"> </form>
となる。メソッドの部分はGETまたはPOSTのどちらかを指定する。GETは最大で255文字までしか送ることができない（今回は名前と商品の購入数があるが、これらを全て含めて255文字）。項目数が多い場合や長い文章を入力させる場合はPOSTを指定する。ここではPOSTを使うものとして説明を続ける。
スクリプトの部分は入力データの引渡し先である。このソースを見ると、./kakaku.rbとなっており（./は同一ディレクトリをあらわすので）、cgi-binディレクトリの中にあるkakaku.rbがデータを受け取って処理をしていることがわかる。
<form></form>の間に配置するフォームの構成部品について、まずは外観を示し、その後説明を加える。
1行のテキスト入力フィールド：
チェックボックス（複数選択可）：
ラジオボタン（ひとつのみ選択可）：
プルダウンメニュー：
送信ボタン：
リセットボタン：
これらの構成部品を作成する際には使用する要素が3種類ある。すなわちinput要素、textarea要素、select要素である。textarea要素は複数行のテキスト入力フィールドの作成に用い、select要素はプルダウンメニューの作成に用いる。それ以外の部品は全てinput要素で作成し、type属性で区別する。
1行のテキスト入力フィールド
input要素を利用し、type属性としてtextを指定する。
<input type="text" name="namae" size="40" maxlength="40">
<input>に対する</input>は不要。name属性はCGIスクリプトに引き渡す際のkeyとして使用するため、必ず指定しなければならない。入力した値がkeyに相当するvalueとなる。size属性は左右の幅であり文字数で指定する。maxlength属性は入力できる最大文字数であり、これも文字数で指定する。size属性とmaxlength属性はなくても良い。
maxlength属性を5とすると入力できる文字数が最大5文字となる。
max属性を5とすると入力フィールドの幅が狭くなる。
チェックボックス（複数選択可）
input要素を利用し、type属性としてcheckboxを指定する。
<input type="checkbox" name="cbx" value="1">
チキンカレー
<input>に対する</input>は不要。name属性はCGIスクリプトに引き渡す際のkey、value属性はvalueとして使用するため、必ず指定しなければならない。通常は、チェックボックスは単独では使用せず、複数の項目から該当するものを全て選択するような場合に用いることが多い。このため、複数のチェックボックスのname属性は全て変更しておくことが望ましい。なお、checked属性を追加し、checked="checked"と書くことで、その項目を最初から選ばれた状態にすることができる。
3つ目のチェックボックスのみchecked="checked"を追加
チキンカレー
シーフードカレー
野菜カレー
ラジオボタン（ひとつのみ選択可能）
input要素を利用し、type属性としてradioを指定する。
<input type="radio" name="rd" value="20代">
20代
<input>に対する</input>は不要。name属性はCGIスクリプトに引き渡す際のkey、value属性はvalueとして使用するため、必ず指定しなければならない。ラジオボタンは単独では使用せず、複数の項目から1つを選択する際に用いることが多い。必ず1つしか選択しないため、name属性は全て同一であっても構わない。なお、checked属性を追加し、checked="checked"と書くことで、その項目を最初から選ばれた状態にすることができる。
3つ目のチェックボックスのみchecked="checked"を追加
20代
30代
40代
複数行のテキスト入力フィールド
textarea要素を利用する。type属性は不要。
<textarea rows="3" cols="30" name="youbou"></textarea>
<textarea>に対する</textarea>が必要。name属性はCGIスクリプトに引き渡す際のkeyとして使用するため、必ず指定しなければならない。入力した値がkeyに相当するvalueとなる。rows属性で行数、cols属性では幅を1行当たりの文字数で指定する。<textarea></textarea>間にテキストを挿入すると、フィールド内にその文字が表示される。
rowsを2、colsを10にした場合
<textarea></textarea>間に感想をお願いしますと入れた場合
プルダウンメニュー
select要素を利用する。各選択肢にはoption要素を利用する。type属性は不要。
<select name="age">
<option>10代</option>
<option>20代</option>
<option>30代</option>
<option>40代</option>
<option>50代</option>
</select>
<select>に対する</select>が必要。<select></select>間にoption要素を用いて選択肢を記述する。name属性はCGIスクリプトに引き渡す際のkeyとして使用するため、必ず指定しなければならない。選択した値がkeyに相当するvalueとなる。select要素に対してsize属性で行数を指定すると、プルダウンメニューではなく、リストボックスとして表示される。
select要素にsize属性で、size="3"と指定した場合
送信ボタン
input要素を利用し、type属性としてsubmitを指定する。
<input name="ok" type="submit" value="OK">
<input>に対する</input>は不要。value属性はボタンに表示する名称となる。name属性は送信ボタンが単独の場合は不要。送信ボタンが複数ある場合、これがCGIスクリプトに引き渡す際のkeyとなる。
value属性を「送信する」にした場合
リセットボタン
input要素を利用し、type属性としてresetを指定する。
<input name="ng" type="reset" value="reset">
<input>に対する</input>は不要。value属性はボタンに表示する名称となる。このボタンを押すと、form要素内に記述した（選択した）値がリセットされる。name属性は実質的には不要。
value属性を「やっぱりやめる」にした場合
