皆さんこんばんにちは、ユウです。
これまで、7回に渡ってHTMLタグを紹介してきましたがいよいよ後半となりました。
過去の記事は以下にリンクを張っているので、興味がある方は読んでいただけると嬉しいです。
今回紹介するのは form タグについてです。
このタグはよく見るところではお問い合わせフォームや質問ボックスなんかに使われていますね。
お時間がある人はぜひ、最後までお付き合い下さい。
<form> 入力送信フォームを作る
form タグの中に input タグ、select タグ、textarea タグ等のタグを置くことで、テキストボックスや様々なボタン、チェックボックスなどのフォーム部品を配置していきます。
フォームに入力されたデータは送信ボタンを押すことで、Webサーバーへ送信されます。
送信先は action 属性でURLを指定し、送信方法は method 属性、送信するデータの形式は enctype 属性で指定していきます。
このように form タグは属性によって様々な事を行えるようになります。
属性に関しては、下でも紹介しているので見てみてください。
Webサーバーへ送信されたデータの処理はHTMLやCSSでは出来なく、PHP等のサーバーサイドの言語を使う必要があります。
PHPの知識は私はあまり持ち合わせていないので、以下に私が普段参考しているサイトのリンクを貼っておきます。
PHPに興味がある方はぜひ参考にしてみて下さい。
https://www.sejuku.net/blog/category/programing/php
form タグの属性
form タグの属性は8つあります。
これらの属性はフォームを作るうえで知っておかないと不便になるので、ぜひ覚えるようにして下さい。
| accept-charset | 送信する文字コードを指定 |
| action | 送信先URLを指定 |
| autocomplete | 過去に入力した文字を記憶 |
| enctype | 送信するデータの形式を指定 |
| method | 送信方法を指定 |
| name | フォームの名前を指定 |
| novalidata | 入力データと質問があっているか確認しない |
| target | フォーム送信するターゲットを指定 |
以下にこれらの詳しい情報を紹介していきたいと思います。
action と target は意味としてそのままなので以下ではあまり取り上げていません。
accept-charset
この属性はサーバーに送られるデータの文字エンコーディングを指定する際に使用します。
文字エンコーディングを指定することで文字化けを防ぐことが出来るようになります。
最近ではサーバーで文字化けは起こりにくくなっていますがつけておくことで安心して使用できます。
文字エンコーディングの値では、”UTF-8”、“Shift_JIS”、”EUC-JP” などがあります。
autocomplete
入力欄の自動補完を有効にするかどうかを指定する際に使用します。
この自動補完というのは過去に入力したテキストを表示してくれる便利なものです。
皆さんもここの機能を使った事があると思います。
この属性の値は”on”と”off”があり、初期値は”on”となっています。
“off”にすることで自動補完を無効に出来ます。
enctype
送信するデータの形式を指定する際に使用します。
この属性の値は3種類あり、入力されるデータ内容によって合わせます。
値で指定するのは以下の3つです。
application/x-www-form-unclencoded・・・複数の種類のデータ
multipart/form-data・・・ファイルを含むデータ（画像など）
text/plain・・・プレーンテキストのみ
初期値としては application/x-www-form-unclencoded が指定されています。
method
データの送信方法を指定する際に使用します。
値と指定できるのは以下の2つです。
get・・・送信内容がURLとして渡される。
post・・・本体として送信される。
これだけでは少し分かりづらいので、もう少し詳しく説明します。
get
“get”はURLの情報を”所得”します。
URLに入力内容が表示され、表示される場合はそのWebページのURLの後に「？」をはさんで入力内容が追記されます。
短めのキーワードや番号などを送信するのに適した送信方法です。
しかし、逆に長い文章を送信するのには適していません。
この理由としては、データが長すぎるとURLが途中で切れてしまうためです。
post
“post”は内容を送信先に”送る”ことが出来ます。
入力内容がURLの後に表示されることなく送信内容自体が本体として送信されます。
そのため、かなり長い文章も送信することが出来ます。
もっと get と post について知りたかったら参考になるサイトのURLを以下に貼っていますのでぜひ見てみて下さい。
内容としてはPHPの内容となるので、興味がある方は見ておいた方が良いかもです。
https://php-junkie.net/beginner/reserved_variables/get_post/
name
フォームの名前を指定する際に使用します。
name 属性の値は空文字ではいけません。
他のフォームとも名前が被らないようにしましょう。
novalidata
form タグの中では、 input タグで <input type=”email”> や<input type=”url”>というふうに属性値を指定しています。
この指定した属性値に対応したブラウザではEメールやURLとして違うものが入力された場合に送信できなくする機能が備わっています。
この機能を無くしたい場合にはこの属性の値を”novalidata”とすることで無効化することが出来ます。
最後に
今回の紹介は form タグの紹介だけとなってしまいましたが、重要なのタグであるので長くなりました。
次回のHTMLタグ記事ではボタンやテキストボックスについての記事について書いていこうと思いますので、ぜひ見て下さい！
今回はこれで以上となります。
最後まで読んでいただきありがとうございました。
