UNDERTALE風webサイト制作＃5

お疲れ様です。コーヒーです。

第12回はHTML＆CSSとWEBデザイン実践編の最終回とします！

HTMLとCSSでできる範囲のことは一通りやったため、次回からはなにか新しいことに挑戦していこうかなと思います。

前回は紹介ページのコンテンツ追加を行いました！

第11回：

https://stady-diary.hatenablog.com/entry/2020/08/24/185645?_ga=2.246794435.632011921.1599410921-1694477281.1543286277

今回はコンタクトページを作成しました。

元々は経歴ページを最後に作ろうと思っていたのですが、紹介するほどの経歴もないため変更いたしました。(笑)

今回作成したページ

今回実際に作成したページを紹介します。

名前、メールアドレス、メッセージのシンプルな構成です。

ポートフォリオサイトを見た人に感想を送ってもらえるように作成しました。

フォームの作成方法

フォームを作成するには<form>タグを使用します。 フォームで使用するパーツを<form>タグで囲むことで作成します。設定する属性は以下のようになります。

• action:データの送信先ページを指定
• method:データの転送方法の指定。主にget,post
• name:フォームの名前を指定

フォームのパーツ

フォームタグ内で使用するパーツを紹介します。<input>タグを使い、type属性でパーツを指定します。typeで指定できるパーツは以下のようなものがあります。

• text:1行テキストの入力欄作成
• radio:ラジオボタンの作成
• chekbox:チェックボックスを作成
• submit:送信ボタンの作成

 作成したコード

今回作成したコードが以下になります。参考になれば嬉しいです。

        <form  action="#">
          <div>
            <label for="name">お名前</label>
            <input type="text" id="name" name="your-name">
          </div>
          <div>
            <label for="email">メールアドレス</label>
            <input type="email" id="email" name="your-email">
          </div>
          <div>
            <label for="message">メッセージ</label>
            <textarea id="message" name="your-message"></textarea>
          </div>
          <input type="submit" class="button" value="送信">
        </form>

問い合わせフォームについて

今回問い合わせフォームを作成しましたが、これは見た目だけの作成になります。実際にメールの受信にはPHP等のプログラミング言語を使用する必要があります。

今回はこれで以上となります!

最後まで読んでいただきありがとうございます！！