LoginSignup
2

More than 3 years have passed since last update.

【HTML】お問い合わせフォームの作り方

Posted at

はじめに

こんにちは。

未来電子テクノロジーでインターンシップに参加している佐藤詩乃です。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

今回は、お問い合わせフォームの作り方をご紹介します。

お問い合わせフォームとは

お問い合わせフォームとは、閲覧者がウェブサイトのオーナーにメッセージを送ることができる欄です。

sukusyoo.png

このようなものです。

このフォームを作るHTMLコードをご紹介します。

お問い合わせフォームのコード

まず、見出しには h2タグを使用します。

見出し
<h2>お問い合わせ</h2>



次に、1行入力用のフォームを作ります。
ここでは、お問い合わせフォーム全体のdivを"contact-form"というクラスに指定します。
各フォームの見出しはpタグで指定し、1行入力用のフォームにはinputタグを使用してください。

1行入力用フォーム


 <div class="contact-form">

        <p>お名前(必須)</p>
        <input>

        <p>メールアドレス(必須)</p>
        <input>

        <p>佐藤への応援メッセージ(必須)</p>
        <input>


複数行入力用フォームには、textareaタグを使用します。

複数行入力用フォーム

<p>お問い合わせ内容(必須)</p>
        <textarea></textarea>


送信ボタンを作るためには、以下のコードを使います。

送信ボタン

        <div class="botton">
        <input class="contact-submit" type="submit" value="送信">
        </div>

これらをすべてまとめると、以下のコードになります。

まとめたコード
 <div class="contact-form">

        <p>お名前(必須)</p>
        <input>

        <p>メールアドレス(必須)</p>
        <input>

        <p>佐藤への応援メッセージ(必須)</p>
        <input>

        <p>お問い合わせ内容(必須)</p>
        <textarea></textarea>

        <div class="botton">
        <input class="contact-submit" type="submit" value="送信">
        </div>

        </div>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2