Htmlのフォーム

html-form.png
<form method="POST" action="cgi-bin/xxx.cgi">
<div>名前:<input type="text" name="NAME"></div>
<div>住所:<input type="text" name="ADDR"></div>
<input type="submit" value="送信">
<input type="reset" value="取消">
</form>

inputに可能なtype

text 1行テキストボックスをつくります。通常のテキストを入力するフィールドです。2行以上にわたる長い文章を入力させたい場合には、<TEXTAREA>~</TEXTAREA>を使用します。
number 数値の入力欄を作成するHTML5から追加
password パスワード入力ボックスをつくります。入力したテキストがアスタリスク(*)などに置き換えて表示されます。ただし、データが暗号化されるわけではないので、送信されたデータを受け取ることができれば内容を見ることができます。利用の際には注意してください。
checkbox チェックボックスをつくります。チェックボックスは複数選択が可能です。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
radio ラジオボタンをつくります。複数の中から一つしか選択できない点がチェックボックスと異なります。複数を一つのグループとして認識させるには、name属性で同じ名前を付けてください。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。
file サーバーへファイルを送信する際に、送信するファイルを選択します。ファイル名の入力フィールドと[参照]ボタンが表示されます。サーバー側にはファイルを受け取るための特別なCGI等が必要です。
hidden 隠しデータをサーバーに送信する際に使用します。このタイプのデータは、画面上には表示されませんが、value属性で指定した値がサーバーへ送信されます。
submit 送信ボタンをつくります。
reset リセットボタンをつくります。このボタンを押すと、それまでに入力した情報をキャンセルして初期状態に戻します。
button 汎用ボタンをつくります。
image 画像のボタンをつくります。使用する画像ファイルはsrc属性で指定してください。またalt属性が必須となります。

基本

<form action="サブミットされた時の動作を指定" method=GET or POST name="フォーム名"></form>

GETとPOSTの違い

GET

GET METHODでは、データを、リクエストURLの後ろに付け加える形で送信されます。
環境変数という、WEBサーバーの持つ変数に格納される。
OSによって文字数の制限がある。
アドレスバーにパラメータが表示される。

POST

渡されたパラメータはアドレスバーに表示されない。
文字数の制限はない。

初期値を入れる

value属性に入れればいい。


javascript-input

サポートサイト Wikidot.com javascript-input