プロゲートのお問合せフォームのレイアウト(2)レッスンの解説とよくあるミス

2021年11月30日

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

お問合せフォームのレイアウト(2)レッスンではフォームの入力項目を作っていきます。

このレッスンで新しく学ぶことは

inputタグ
textareaタグ

です。

inputはテキスト入力や送信ボタンを作る時に使います。

HTML の <input> 要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

また、textareaは複数行のテキストを入力する時に使います。

HTML の <textarea> 要素は、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea

テキスト入力という用途は似ていますが、使い分けるようにしましょう。

マスターすること

inputタグの使い方
textareaタグの使い方

このレッスンが終わるとHTML & CSS 学習レッスン初級編が終わりです。

1 お問合せフォームのレイアウト(2)レッスンの答え
2 input, textareaのよくあるミス
- 2.1 よくあるミス1：inputタグに終了タグを付ける
- 2.2 よくあるミス2：textareaタグに終了タグを付けていない
3 まとめ：input, textareaの使い方をマスターしよう

お問合せフォームのレイアウト(2)レッスンの答え

このレッスンの答えは以下のとおりです。

編集した部分のみ表示します。

index.htmlではこのレッスンで新しく学ぶinput, textareaでフォームの入力項目を作っていきます。

<div class="contact-form">
  <h3 class="section-title">お問い合わせ</h3>
  <p>メールアドレス（必須）</p>
  <!-- <input>要素を追加してください -->
  <input>
        
  <p>お問い合わせ内容（必須）</p>
  <!-- <textarea>要素を追加してください -->
  <textarea></textarea>
        
  <p>※必須項目は必ずご入力ください</p>
  <!-- <input>要素を追加してください -->
  <input class="contact-submit" type="submit" value="送信">
        
</div>

stylesheet.cssでは今までに学んだCSSプロパティを使ってスタイリングします。

/* inputとtextareaのCSSを指定してください */
input, textarea {
  width: 400px;
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 20px;
  font-size: 18px;
  border: 1px solid #dee7ec;
}

/* contact-submitのCSSを指定してください */
.contact-submit {
  background-color: #dee7ec;
  color: #889eab;
}

input, textareaのよくあるミス

フォームの入力項目のタグでは終了タグが必要なものと必要でないものがあります。

混同しないように使って覚えていきましょう。

よくあるミス

inputタグに終了タグを付ける
textareaタグに終了タグを付けていない

よくあるミス1：inputタグに終了タグを付ける

<!-- <input>に終了タグは付けない-->
<input></input>

inputタグには終了タグは必要ありません。

inputタグの属性で様々な指定をしていきます。

よくあるミス2：textareaタグに終了タグを付けていない

<!-- <textarea>に終了タグは付ける-->
<textarea>

textareaでは終了タグが必要です。

inputでは終了タグが必要なかったので混同してしまいますが、それぞれ覚えましょう。

まとめ：input, textareaの使い方をマスターしよう

お問合せフォームのレイアウト(2)レッスンではフォームの入力項目を作りました。