フォームを作るタグ①
フォームはwebサイトにはなくてはならない機能の一つだといえます
メールでの問い合わせフォームだったり掲示板であったり様々な箇所で使われています。
今回はこのフォームに関係が深いタグを紹介します
この記事の目次
フォーム全体を囲むformタグ
このタグはフォームの範囲を示すためのタグで作っているフォーム全体を囲うようにして使います。
基本的にformタグにはいくつかの属性を設定して使います
フォームデータをもってどのページに移動するかを「action属性」に相対パスを設定していきます（中身が空だと同じページでの処理が可能になります）
送信形式を「method属性」で決めていきますが使える送信形式は「post」と「get」の二つになります。
|
1 2 |
<form action="○○.html" method="post"> </form> |
|
1 2 3 4 5 |
th,td{ padding:10px; box-sizing:border-box; border:solid 1px #01003a; } |
二つの違いについて簡単な表にしてみました
| post | get |
|---|---|
| Bodyに含めて送る | URLに付加して送る |
| データがBodyに含まれてしまうため、ブックマークができない | データがURLに付加されるため、ブックマークすることができる |
| POSTはなにかを新しく登録するときに使う | GETはなにかを取得するときに使う |
フォームからデータを受け取って何かをするには「PHP」の知識が必要となってくるのでそのあたりはPHPの方で
フォームのパーツを作るinputタグ
inputタグはformタグの中で使えるコントロール（フォームパーツ）を作るために用意されたタグになります。閉じタグは付けません
どのようなフォームパーツにするかを「type属性」で設定
入力内容を受け取るときのラベルを「name属性」で設定
type属性によって動きが変わってくるが大体のフォームパーツで、送るデータを設定する「value属性」
必須項目にするための「required」
などがよく使う属性だが、type属性よってはほかの属性の使い方が変わってくるのでセットで覚えなくてはならない
type=”text”
inputタグのtype属性を「text」にすると文字列を入力してもらうための入力欄が表示されます
type=”email”
type属性を「email」にするとメールアドレス用の入力欄が表示されます。
見た目は「text」と同じですが入力したものがメールアドレスの形式になっていない（＠がなかったり）とデータの送信ができず警告文が出ます。
type=”radio”
type属性を「radio」にすると複数の選択肢から一つを選ぶボタン機能が実装できます。
この時、ラジオボタンにしたい複数の選択肢は一つのグループと考え、同じname属性を付けるようにしてください。
radioの場合はvalue属性にあらかじめ送信したいデータを設定しておく必要がありますので注意
予めチェック状態にしておきたいものには「checked」を付けると選択状態になります。
|
1 2 3 |
<input type="radio" name="test" value="radio1">ラジオボタン１ <input type="radio" name="test" value="radio2" checked>ラジオボタン２ <input type="radio" name="test" value="radio3">ラジオボタン３ |
上記コードを実行するとラジオボタン２が選択状態で出力されます
同じname属性が付いたラジオボタンは重複して選べないことも覚えましょう
type=”checkbox”
type属性を「checkbox」にすると複数選択が可能なボタンの実装ができます
使い方はほぼ「radio」と同じです
チェックボックスにしたい複数の選択肢は一つのグループと考え、ラジオボタンと同様に同じname属性を付けるようにしてください。
チェックボックスの場合もvalue属性にあらかじめ送信したいデータを設定しておく必要がありますので注意
予めチェック状態にしておきたいものには「checked」を付けると選択状態になります。
|
1 2 3 |
<input type="checkbox" name="test" value="radio1">チェックボックス１ <input type="checkbox" name="test" value="radio2" checked>チェックボックス２ <input type="checkbox" name="test" value="radio3">チェックボックス３ |
ユーザーに複数選択させたい場合はチェックボックスです。ラジオボタンと使い分けていきましょう。
type=”submit”
type属性を「submit」で設定すると送信ボタンが設置できます
最終的にはフォームからデータを送信しないとただの張りぼてになってしまいますので必ず設置しましょう
submitを使った場合value属性の値がボタンに表示される文字列になります
|
1 2 |
<input type="submit" value="送信ボタン"> <input type="submit" value="送信ボタン"> |
inputタグで作れるフォームパーツはまだまだたくさんありますが
まずはよく使うこの５種類から抑えていけると良いでしょう
