<form>タグについてです。HTML単品では使うことはあまりないですが、PHPなどで作るプログラムと組み合わせて使うことで様々なことができるようになります。
<form>タグとは?
<form>タグは入力・送信フォームを作るのに使います。<form>タグ内に<input>タグや<select>タグ、<textarea>タグといった入力部品となるタグを入れて使っていきます。
<form>タグ内で入力した項目を<input type=”submit”>タグを使って指定した先に送信することが出来ます。<input>タグについてはこちらをご覧ください
method属性
formの属性で2つの最重要の属性がmethod属性と後述するaction属性です。
method属性には2つの値があります。
- get:検索に使う(初期値)
- post:投稿・送信する
action属性
もう一つ重要なのがaction属性です。action属性は<form>タグ内の入力したものをどこに送信するかを指定するものです。action属性を設定していないとどこにデータを送ったらいいのかが判別できません。
ちなみに送信先を指定したとしても、受け取る側のファイルで送信内容を受け取れるプログラム(PHPなど)がないと機能しません。
method属性とaction属性は最低限でも設定しないと<form>を活用できないという事を覚えておきましょう。
name属性
name属性を付けることでフォームをプログラムから呼び出すことができます。
基本的にname属性を付ける場合は重複しないように注意しましょう。
autocomplete属性
autocomplete属性は自動入力補完についてです。デフォルトではonになっています。もしautocomplete属性を解除する場合はautocomplete=”off”と指定します。
accept-charset属性
accept-charset属性は送る内容が文字化けしないようにする為に文字コードを指定します。
『UTF-8』『Shift_JIS』などを指定します。複数指定する場合は指定した順番に優先度が決まります。
enctype属性
データを送信するときにどのようなエンコードをするのかを指定します。
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
初期値であり、formの値がurlパラメータとして送信されます。注意するべきことはフォームデータにファイルを含む場合、application/x-www-form-urlencodedでは送信できないという点です。
フォームデータにファイルを含む場合は、enctype=”multipart/form-data”を指定します。
ファイル以外にもある場合はenctype=”multipart/form-data application/x-www-form-urlencoded”と2つとも指定してあげましょう。
ほぼ指定する事はないかと思います。
novalidate属性
novalidate属性は入力されたデータのバリデーション(妥当性チェック)についてです。
例えばHTML5で追加された<input>タグのtype=”email”属性では『@』が入っていない場合はバリデートチェックに引っかかります。
同一フォーム内で<input>タグのバリデートチェックのon/offを使い分ける場合は<input>に個別で<input formnovalidate>タグを指定すると切り分けられます。
target属性
フォーム送信の結果を表示するページやウィンドウ自体を指定します。
PHPを勉強し始めて、<form>タグについて勉強する機会が多かったのでまとめてみました。
いきなりDBとかでやるよりも、まずは別ページに内容を飛ばす練習などをやってみるところからのほうがいいでしょう。