本日はWeb制作初心者向けに、HTMLとCSSで簡単に作るお問い合わせフォームのコードの紹介と、その解説をしていきます。

もちろん、そのままコピペでもOKですし、タグの意味を覚えたい方は解説まで読んでいってください！

まずは今回の目的であるお問い合わせフォームの成果物を確認していきます。

僕のポートフォリオでもお問い合わせフォームを作成していまして、もう少し改良していきますが、とりあえずこの形が一般的に知られるお問い合わせフォームですね。

お問い合わせフォームをページの縦横中央に寄せたり、フォントを変えたりしていますが、そこはお好みでお願いしますので、今回コードは記載しません。

ちなみにページや親クラス内の縦横中央に寄せるやり方は色々ありますが、初心者でも簡単にできる方法を２つご紹介しています。気になる方は下記リンクからご参照ください。

では実際のコードと、その解説をしていきます。HTML・CSSのコードは以下になります。

See the Penお問い合わせ by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.

ある程度HTMLとCSSが理解できていて、コピーだけしたい方は是非ご利用ください。

まずはHTMLですが、使用していくのが以下のタグになります。

・formタグ・labelタグ・inputタグ・textareaタグ・buttonタグ

それぞれを解説していきます。

formタグは簡単に言うと、入力欄や送信ボタンなどお問い合わせフォームを大きく囲むタグで、中に囲った内容を指定した方法でサーバーに送る役割があります。

今回はまだ何も指定していませんが、method属性で指定した転送方法でサーバへ送信され、action属性で指定したアクションを呼び出します。コードとしては以下のようになります。

【