ボタン・選択肢・複数行

導入

テキスト欄以外にも、押すボタン、選ぶメニュー、長文を書く欄など、用途に合わせた部品があります。

説明

• <button> … 押せるボタン
• <textarea> … 複数行のテキスト入力
• <select> と <option> … ドロップダウンの選択肢

<textarea placeholder="ご意見をどうぞ"></textarea>

<select>
  <option>東京</option>
  <option>大阪</option>
</select>

<button>送信</button>

<select> は選択肢 <option> を並べたメニューを作ります。<button> は <input> と違い、中身にテキストを持つふつうの要素です。

やってみよう

上の例を打ち込み、複数行の入力欄・ドロップダウン・ボタンが表示されることを確かめましょう。ドロップダウンを開いて選択肢が出るか見てみてください。

演習

「赤」「青」の2つの <option> を持つ <select> を作ってください。