データを送信する際に用いられるformはその送信方法や形式を指定できる。
1.actionとmethod
action
action属性はフォームの送信先を指定するために用い、<form action=○○>の形で書く。指定がない場合は現在のページURLが送信先となる。method
method属性はデータの送信方法を指定するために用いる。 今回の研修で使ったものはgetとpostで、<form method=○○>の形で書く。 検索などにかけるとgetはURLにデータを付けて送信するもので、情報を取得したり検索したいときの用い、postはデータを本文に含めて送信する、入力された情報を保存したいときに使うものであると出てくる。今回研修では会員登録ページを作成したのでログイン、登録、編集などpostを使うものが多かった。2.フォーム要素
input
ユーザー入力欄の作成時に用いる。 input type=○○でテキスト、ボタン、チェックボックスなど入力形式を指定しユーザーの利便性を高めよりユニークなものを作成することもできる。今回使ったもの
text:1行のテキスト入力欄。名前や住所などの入力に使用。
password:入力内容が伏せ字(●など)で表示される欄。パスワード入力に使用。
email:メールアドレスの入力欄。形式チェックが自動で行われる。
checkbox:複数選択可能なチェックボックス。
radio:単一選択のラジオボタン。複数の選択肢から1つだけ選ばせたいときに使用。
file:ファイルをアップロードするためのボタン。
submit:フォームを送信するボタン。
reset:フォームの入力内容をリセットするボタン。
label
入力フォームのラベル付け。フォームに何を入力するべきか説明するもの。のfor属性に、対応するフォーム部品のidを指定すると、ラベルをクリックすると対応する入力欄が自動的にフォーカスされるようになる。button
ユーザーがフォームを操作するためのボタンを設定する。には主に3つのタイプがある。 1つ目はtype="submit"で、これはフォームの内容をサーバーに送信するためのボタン。またフォーム内にを配置する際、type属性を省略すると自動的にsubmitとして扱われる。 2つ目はtype="reset"で、フォームに入力された内容をすべて初期状態に戻すためのボタン。ユーザーが入力を修正するときに使う。 3つ目はtype="button"で、これはフォームの送信やリセットなどの動作を持たず、JavaScriptなどで任意の処理を実行するために使われる。例えば、クリック時にアラートを表示したり、別の処理を呼び出したりすることが可能。3.その他研修で用いたもの
select要素:ユーザーに複数の選択肢の中から1つ(または複数)を選ばせるためのフォーム部品。ドロップダウンメニューとして表示されることが一般的で、選択肢は要素を使って定義する。option要素:の中に配置される個々の選択肢を表す。各にはvalue属性を指定することで、選択されたときに送信される値を設定できる。表示されるテキストは、タグの中に記述する。