フォームとはデータを入力したり、そのデータを送信するためのブロックを規定するタグです。
フォームに入力されたデータは、送信ボタンを押すことでウェブ・サーバーへ送信されます。
その際の送信先URLはaction属性で、データの送信方法はmethod属性で、送信するデータの形式はenctype属性でそれぞれ指定します。
ウェブサーバーへ送信されたデータのプログラム処理は、 HTMLやCSSではなくPHPやCGIなどのサーバーサイド・スクリプトで行います。
入力・送信されるデータは <form>〜</form>の間に、<input>や<select>や<textarea>等のタグで規定されます。
☆ <form action="送信先URL" method="get/post" name="フォームの名前"
enctype="送信するデータの形式" accept-charset="UTF-8/Shift_JIS/etc.">
<input type="text/button/password/etc."/>
</form>
*method="get" → 送信内容がURLとして渡される（初期値）
"post" → 送信内容がそのものが渡される
＊enctype="text/plain" → プレーンテキストのみ
"multipart/form-data" → ファイルを含むデータ(画像などを送る)
"application/x-www-form-urlencoded → 複数の「フィールド名=入力内容」
を&でつないだ形式のデータ（初期値）
＊<input>タグに就いてはこの後説明します。
次に、フォームに配置されるボタン部品の作り方を学習して行きましょう。
☆ Formに配置されるボタン：
<input type="button" value="ボタンの文字" onClick="処理命令">
* type="button"はFormの中だけでなく、単独でも使われる。
☆ Formに配置される送信ボタン：
<input type="submit" value="ボタンの文字">☆ 送信すべきデータを含むフォーム：
<form onSubmit="処理命令" Name="フォーム・オブジェクトの名前">☆ フォームの内容を送信するJavaScript：
document.フォームの名前.submit()； 又は
document.forms[参照番号]； （ページ先頭からのフォーム数で０からの通し番号）
document.forms["フォームの名前"]；
☆フォームに配置されるリセットボタン：
<input type="reset" value="ボタンの文字">☆ リセットすべきデータを含むフォーム：
<form onReset="処理命令" Name="フォームの名前">>☆ フォームの内容をリセットするJavaScript：
document.フォームオブジェクト.reset()； （フォームの内容をリセットデフォルトに戻します）☆ フォームに配置されるチェック・ボックスとラジオ・ボタン：
<input type="checkbox" name="チェックボックスの名前" checked="true/false">ラジオボタンの「value」属性を省略すると出現順に0からの参照番号が付きます
「checked」属性を省略すると選択されてない状態になります
☆ チェック・ボックスとラジオ・ボタンにチェックを入れるJavaScript：
document.フォームオブジェクト.エレメント（部品）オブジェクト.checked； 又はこの種のサンプルはこのようなものになります。
簡易メール・フォームのサンプルはこのようなものになります。
簡易オーダー・フォームのサンプルはこのようなものになります。
テクスト・ボックスには1行のテクスト・フィールド（<input type="text"）と複数行のテクスト・エリア<textarea
rows="行数"
cols="桁数">)があります。
<input>タグのtypeにはテキスト・フィールド、パスワード、チェック・ボックス、ラヂオ、サブミット、リセット、ファイル等々色々なものがあります。
また、HTML5では<input>タグのtypeにsearch、tel、url、email、datetime、date、month、week、date-local、,number、range、,colorなど色々便利なtype属性が加わる予定で、
各々のデータの妥当性をチェックする機能が加わるだろうという事です。
☆ テキスト・フィールド： 1行のテキストのボックス
<input type="text" name="テキストフィールド名" value="フィールドの文字"
size="表示文字数" maxlength="入力できる最大文字数">
</input>
HTML5ではautocomplete属性・pattern属性・placeholder属性・required属性list属性が新たに追加されています。
☆ テキスト・エリア： 複数行のテキストのボックス
<textarea rows="行" cols="列" name="テキストエリア名">HTML5ではautofocus属性・form属性・maxlength属性・placeholder属性・required属性・wrap属性
が新たに追加されています。
☆ パスワード欄： パスワードを入力すると入力文字が＊＊＊＊で表示される
<input type="password" name="パスワードフォーム名">☆ ファイル選択： ボックスの右に「参照」ボタンが生成され、ファイルを選択できる
<input type="file" name="ファイル名の入力欄名"/>☆ fieldsetと legend：<fieldset>タグは、フォームの入力項目をグループ化する際に使用します。
<fieldset>〜</fieldset>の中に配置された <input>・<select>・等のフォーム部品がグループ化され、一般的なブラウザではボーダー（枠線）で囲まれて表示されます。
フォーム部品のグループにキャプション（タイトルや説明）を付ける場合には、<fieldset>〜 </fieldset>の中の 最初の<legend>で指定します。
上のサンプル・プログラムを実行すると、このようになります。
セレクト・メニューとは複数の選択肢をボックスの中に示し、その中から1つ場合によっては複数個を選択させるものです。
セレクト・ボックスは<select>タグを使って作ります。種類としてはドロップダウン式のセレクトボックスや、スクロール式のセレクトウィンドウがあります。
<select>〜</select>でセレクト・ボックス全体を定義して、 その中に<option>タグを配置して個々の選択肢リストを作成します。
タグで作成した選択肢を<optgroup>〜</optgroup>で囲むと、選択肢をグループ化することができます。
☆ <select name="セレクト・メニュー名" multiple size=""> // multiple属性を指定すると複数選択可
// size属性はスクロール式指定のため
☆ <label for="selectフォームのid属性"> セレクト・メニューの表題</label>
<label for="下の部品のid名”>下の部品名、例えばセレクト・メニューの表題</lable>☆ JavaScriptで選択された項目を制御する方法：
document.フォーム名.セレクト・メニュー名.selectedIndex
document.フォーム名.セレクト・メニュー名.options
document.フォーム名.セレクト・メニュー名.options[参照番号]
（参照番号はセレクト・メニュー先頭からの項目数で０からの通し番号）
セレクト・メニューのサンプル・プログラムはこのようなものになります。
フォーム部品共通のメソッド・プロパティの関係は正にオブジェクト指向のルールに則っています。
☆ オブジェクト指向のルール:
Object．Method; オブジェクトに行動を与える☆ Windowの中でform、textフィールド、その他の部品の扱い方：
document.forms; //<form>タグに対応するフォームオブジェクトの配列を示す
document.forms.length; //フォーム・オブジェクトの配列の個数を示す
document.フォーム名; //個々のフォームを指す
document.forms[参照番号]（０からの通し番号）; //個々のフォームを指す
document.forms["フォーム名"]; //個々のフォームを指す
document.フォームオブ名.属性名(action,encoding,method,name,target);
//<form>タグで指定できる属性の値を読み書きする
☆ フォーム部品共通のメソッド・プロパティ
document.フォームオ名.elements; //フォームを構成する部品の配列
document.フォーム名.elements.length; //エレメント（部品）オブジェクトの個数
document.フォーム名.部品名; //個々のエレメント（部品）を指す
document.フォーム名.elements[参照番号]; //個々のエレメント（部品）を指す
document.フォーム名.エレメント名.name; //name属性で指定したフォーム名
document.フォーム名ト.エレメント名.type //「text」や「file」など部品の種類
document.フォー名.エレメント名.form; //この部品を含むフォームを示す
document.フォー名.エレメント名.value; //この部品の「value」属性（内容）を示す
document.フォー名.エレメント名.focus; //部品にフォーカスを移す（選択状態にする）
document.フォー名.エレメント名.blur; //この部品にフォーカスをはずす
この種のサンプル・プログラムはこのようなものになります。
]ｊQueryライブラリーを使った会員登録フォームのプラグインもInternetに沢山公開されています。
その中のフォーム・バリデーション・プラグイン（jquery.validate.min.js）を使ってみました。このプラグインを使うと、入力フォームの各欄のバリディティ・チェック（妥当性のチェック）が優れているの で、開発者の助けになります。
☆ ダウンロード・サイト ：
href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/
☆ <script type="text/javascript>内でのコーディングの仕方：
//ボタンをクリックした場合の処理の仕方の指定
$.validator.setDefaults({
submitHandler: function() { 実行命令 }
});
＊ 実行命令は通常cgiでphp書かれたサーバーのプログラムに飛んで行われるが、
テスト等では自分のメール・アドレスにフォームの内容を送ったり、alert()命令で
処理が完了されたことをWindowに表示する。
//このページを読み込み、該当のフォームをバリデートする
$(document).ready(function() {
・・・この間にjQueryのコーディングを書く。・・・
｝）；
// 対象のフォームをバリデート signup form on keyup and submit
$("#対象のフォーム").validate({
・・・この間にバリデーションPluginのルールを以下の仕様に従って書く。・・・
});
// バリデーションのルールの指定
$("#signupForm").validate({
rules: {
field_name_1: "required", //入力必須の指定
field_name_2: { required: true, その他の要件: x }
・ //複数要件のfieldは入力必須のはtrueで指定
・
field_name_n: { required: true, minlength: x },
field_name_m:{ required: true, minlength: y,
field_name_x: { required: true,minlength: z,
equalTo: "比較するfield"},
messages: { // ルール違反などのメッセージの指定
field_1: {
required: "未入力違反のメッセージ",
minlength: "桁数違反のメッセージ"
},
field_2_: {
required: "未入力違反のメッセージ",
minlength: "桁数違反のメッセージ",
equalTo: "比較違反のメッセージ"
},
}
});
// Field_xとField_yの内容の結合の指定
$("#field_x").focus(function() {
var field_x = $("#field_x").val();
var field_y= $("#field_x").val();
if(field_x && field_y && !this.value)
{ this.value = field_x + "." + field_x;}
});
// Field_xの内容を隠す指定
var field_x = $("# field_x");
// field_xの内容を最初隠し、後にオプショナルにする指定
var inital = field_x.is(":checked");
var topics = $("# field_x_topics")[inital ? "removeClass"
: "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital)
// Field_yがチェックされたら、Field_yを表示する
field_y.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
☆ フォームの作り方 ：
フォームの作り方は通常のHTML4のルールに従ってコーディングすれば良いのであるが、このPluginには特有のセレクターの指定があるらしいので、以下のような特有の配慮が必要であると思われます。
このフォーム・バリデーションのサンプル・プログラムはこのようなものになります。