
こんにちは、ひつじのジョージです。
大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。
お問合せフォームのレイアウト(2)レッスンではフォームの入力項目を作っていきます。
このレッスンで新しく学ぶことは
- inputタグ
- textareaタグ
です。
inputはテキスト入力や送信ボタンを作る時に使います。
HTML の
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input<input>
要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。
また、textareaは複数行のテキストを入力する時に使います。
HTML の
https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea<textarea>
要素は、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。
テキスト入力という用途は似ていますが、使い分けるようにしましょう。
- inputタグの使い方
- textareaタグの使い方
このレッスンが終わるとHTML & CSS 学習レッスン 初級編が終わりです。
目次
お問合せフォームのレイアウト(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)レッスンではフォームの入力項目を作りました。
このレッスンで新しく学ぶことは
- inputタグ
- textareaタグ
です。
このレッスンでマスターすることはinputとtextareaの使い方です。
- inputタグの使い方
- textareaタグの使い方
inputはテキスト入力や送信ボタンを作る時に使います。
HTML の
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input<input>
要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。
また、textareaは複数行のテキストを入力する時に使います。
HTML の
https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea<textarea>
要素は、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。
テキスト入力という用途は似ていますが、使い分けるようにしましょう。
フォームの入力項目のタグでは終了タグが必要なものと必要でないものがあります。
混同しないように使って覚えていきましょう。
- inputタグに終了タグを付ける
- textareaタグに終了タグを付けていない