検索やお問い合わせを作成する際に設置する入力フォームの作り方の備忘録です。テキストエリア以外にも使用されることの多い、プルダウン、ラジオボタン、チェックボックスなどの作り方をまとめました。
form要素を設定する
入力フォームを作成するために、まずはform要素を設定します。<form>
の中に、テキストフィールドやチェックボックスなどフォームを構成する各要素を配置します。
<form action="" method="post">
// 入力フォームの要素を記述
<form>
action属性には、通常フォームに入力されたデータの送信先(URLやフォルダなど)を指定しますが、セキュリティ上好ましくないため、action
の中身は空白を指定して別のphpなどでデータを処理するのが一般的です。
method属性には、データの送信方法(HTTPメソッド)を指定します。以下の値を使い分けます。
- get:フォームのデータを、action属性に指定したパスの末尾に「?」で区切って追加したURLを送信します。method属性を省略した場合、getが初期値として設定されます。
- post:フォームのデータを、本文として送信します。
- dialog:フォームがdialog要素の中にある場合に使用します。送信時に親要素のダイアログを閉じます。
HTMLのお問合せフォームでは、「post」を利用することが多いです。
入力フォームを表示する
先ほど作成したform要素の中に、データを入力するためのinput要素を記述します。
<form method="post" action="sample">
<input type="text" name="name">
<form>
input要素のtype属性を「text」にすることで、1行のテキストフィールドを表示することできます。
※下記サンプルフォームはデフォルトのスタイルを一部修正しています