コントロールボタン<select>タグ<textarea>タグ<button>タグ終わりにこんにちは、後藤です。今回は、ホームページを運用していく上で必須と言っても過言ではない、お問い合わせフォームなどを作成するときに使用する、フォームについて解説していきます。<form>タグまず、フォームを作成するには、後述するフォームコントロールをグループ化するために<form>タグで囲う必要があります。<form>タグを使用する際には、action属性とmethod属性を記述しましょう。action属性では、入力データの送信先を指定します。method属性では、送信方法を指定します。このように記述します。method=”post”>//フォームコントロールや説明</form>フォームコントロールフォームコントロールは、次のタグを利用して作成します。<input>:各種入力フィールドやボタン<select>:選択肢<textarea>:複数行のテキストフィールド<button>:ボタンname属性フォームコントロールはname属性でコントロール名を指定する必要があります。分かりやすい名前を付けておきましょう。メールアドレスを入力するコントロールには、「name=”mail”」と指定します。コントロール名を省略した場合、データが送信されないので注意しましょう。項目名と入力フィールドに関連性を持たせるために、<label>タグを使用します。二通りの方法があります。一つ目は、<label>タグで項目名と入力フィールドを囲う方法。name=”mail”></label>二つ目は、フォームコントロールにIDを指定し、<label>にfor属性を指定する方法。IDとfor属性には、同じ名前を指定します。id=”mail”><input>タグ<input>タグでは、type属性を指定することによって、様々な入力フィールドやボタンを作成することができます。type属性を省略した場合、「text」で処理されます。このように記述します。閉じタグは必要ありません。name=”~”>以下に一覧を記述します。数値:number大まかな数値:rangeカラーピッカー:color選択肢チェックボックス:checkboxラジオボタン:radioチェックボックスでは複数の選択が、ラジオボタンでは一つのみの選択が可能です。value属性で送信する値を指定します。選択肢をグループ化するためには、同じname属性を指定します。value="rabbit">ウサギ</label>特殊なコントロールファイルアップロード:file隠しフィールド:hiddenボタン送信ボタン:submit画像ボタン:imageリセットボタン:resetボタン:button<select>タグ<select>タグでは選択肢をプルダウン形式で表示できます。選択肢は<option>タグで指定します。value属性で送信する値を指定します。このように記述します。value="rabbit">ウサギ</option></select><textarea>タグ<textarea>タグでは、複数行のテキストフィールドを作成できます。横幅はcols属性で文字数、高さはrows属性で行数を指定することも可能です。このように記述します。閉じタグが必要なことに注意してください。name="~"></textarea><button>タグ<button>タグを利用すると、囲ったコンテンツをボタンとして機能させることができます。ボタンの機能はtype属性で指定します。alt="メールを送信"></button>終わりに今回は、お問い合わせフォームなどに利用されるフォームについて解説しました。簡単な部分だけを解説しましたが、まだまだフォームにはいろいろな機能があります。name属性の記述を忘れてしまうとデータが送信されないので、name属性の記述は忘れないようにしましょう。この記事を書いた人linkstory株式会社LinkStoryのスタッフです。hatenabookmark2019年度の新卒採用スタートしました。