コピペOK。初めてのお問い合せフォームを作ってみよう!

contact

Webデザイナー・エンジニアのりうやです。

HTML勉強中!!という方に向けて、
以下の超シンプルなお問い合わせフォームを例に

HTMLタグの解説をしていこうと思います!

スポンサーリンク

お問い合わせフォーム

今回は以下のサンプルを使用して、
お問い合わせフォーム制作でよく使用するHTMLタグ構造をご紹介します!

See the Pen 初めてのお問い合わせフォーム by Riuya Uetake (@deruloxxx) on CodePen.

1.form関連の要素を指定するformタグ

<form>~~</form>は入力、送信フォームを作成する際に使用し、

formタグの中にはユーザーがお問い合わせをする上で入力する
入力欄を記述します。

また、属性metod(データ送信方法の指定)、action(データ送信先の指定)を
使用することができ、お問合せフォームの仕様に合わせて選択してあげましょう!

2.label要素

上記サンプルお問合せフォームにある
“お名前”、”メールアドレス”、”お問合せカテゴリー”、”お問合せ内容”といった

ユーザー入力項目の項目名に使用します。

属性値、”for”、もしくは”form”を指定することで
ユーザーのエラー操作や未入力値をJavaScriptで発見することが
できるようになります。

3.input要素

ユーザーが入力することができる要素になります。

属性値、”type”を使用することで、テキスト入力、
他にもボタン押下や画像選択など様々なタイプの入力項目を作成する
ことができます。

4.select要素

selectタグの中に
<option>~</option>を用意してあげることでプルダウンメニューを作成することができます。

5.textarea要素

<input type=”text”>~</input>がテキスト1行の入力項目に対して、

textareaタグは複数行入力することができます。

属性値、”cols”で入力欄の幅、”rows”で入力欄の高さを指定しています。

まとめ

お問合せフォームで入力した値を実際に送信したりするには
PHPが必要になってきますが、

これでHTMLでのお問合せフォームは作成することができます。

お問合せフォームはWebサイトで最も重要といえる機能を兼ねているので
簡単そうに見えて実は複雑です。

上記のサンプルで紹介したことはほんの一部なので是非深掘りしてみてください!