Weblasts

フォームを作るタグ①

フォームはwebサイトにはなくてはならない機能の一つだといえます
メールでの問い合わせフォームだったり掲示板であったり様々な箇所で使われています。
今回はこのフォームに関係が深いタグを紹介します

フォーム全体を囲むformタグ

このタグはフォームの範囲を示すためのタグで作っているフォーム全体を囲うようにして使います。
基本的にformタグにはいくつかの属性を設定して使います

フォームデータをもってどのページに移動するかを「action属性」に相対パスを設定していきます(中身が空だと同じページでの処理が可能になります)
送信形式を「method属性」で決めていきますが使える送信形式は「post」と「get」の二つになります。

HTML

<form action="○○.html" method="post">
</form>

二つの違いについて簡単な表にしてみました

postget
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」を付けると選択状態になります。

HTML

<input type="radio" name="test" value="radio1">ラジオボタン1
<input type="radio" name="test" value="radio2"  checked>ラジオボタン2
<input type="radio" name="test" value="radio3">ラジオボタン3

上記コードを実行するとラジオボタン2が選択状態で出力されます

同じname属性が付いたラジオボタンは重複して選べないことも覚えましょう

type=”checkbox”

type属性を「checkbox」にすると複数選択が可能なボタンの実装ができます
使い方はほぼ「radio」と同じです
チェックボックスにしたい複数の選択肢は一つのグループと考え、ラジオボタンと同様に同じname属性を付けるようにしてください。
チェックボックスの場合もvalue属性にあらかじめ送信したいデータを設定しておく必要がありますので注意
予めチェック状態にしておきたいものには「checked」を付けると選択状態になります。

HTML

<input type="checkbox" name="test" value="radio1">チェックボックス1
<input type="checkbox" name="test" value="radio2"  checked>チェックボックス2
<input type="checkbox" name="test" value="radio3">チェックボックス3

ユーザーに複数選択させたい場合はチェックボックスです。ラジオボタンと使い分けていきましょう。

type=”submit”

type属性を「submit」で設定すると送信ボタンが設置できます
最終的にはフォームからデータを送信しないとただの張りぼてになってしまいますので必ず設置しましょう
submitを使った場合value属性の値がボタンに表示される文字列になります

HTML

<input type="submit" value="送信ボタン">

inputタグで作れるフォームパーツはまだまだたくさんありますが
まずはよく使うこの5種類から抑えていけると良いでしょう

紹介しきれていないinputタグ

Recommend Post