前回はinput要素のいろんなタイプを学びましたが、もっと長い文章を入力してもらう時はどうすればいいんですか？
前回学んだinput要素は一行の入力には最適だけど、お問い合わせフォームでメッセージを書いてもらう時など、複数行の長い文章には向いていないんだ。そんな時に使う専用の要素があるよ。
確かに、アンケートとかで都道府県を選ぶ時も、47個全部をラジオボタンで並べるより、もっとスマートな方法がありそうですね！
その通り！今日は2つの重要なフォーム要素を中心に学ぼう。textarea（複数行テキスト入力）とselect（プルダウンメニュー）だ。これらを覚えれば、前回学んだinput要素と組み合わせて、どんなフォームでも作れるようになるよ。
長い文章を入力してもらう - textarea要素
お問い合わせフォームのメッセージ欄、アンケートの感想欄、ブログの投稿フォームなど、複数行の長い文章を入力してもらう場面で活躍するのが <textarea> 要素です。input要素とは異なり、改行を含む長いテキストを自然に入力できます。
詳しく入力してください...
textarea要素の基本構造
HTMLで複数行テキストを入力するには<textarea>要素を使用します。textarea要素は開始タグと終了タグの間にデフォルトのテキストを配置できる特徴があります。
デフォルトテキスト（必要に応じて）
</textarea>
（<textarea></textarea>）
（フォーム送信時の識別名）
（label要素との関連付け）
（行数・文字数で基本サイズ）
（薄いグレーで表示される案内文）
（必要に応じて記述）
textarea要素の主要属性
| 属性 | 説明 | 使用例 | 備考 |
|---|---|---|---|
| name | サーバー送信時のデータ名 | name="message" | フォーム送信時の識別名 |
| id | ページ内での一意識別子 | id="message" | label要素との関連付けに使用 |
| rows | 表示行数 | rows="5" | 縦のサイズを指定 |
| cols | 表示文字数 | cols="50" | 横のサイズを指定 |
| placeholder | 入力ヒント | placeholder="ここに入力" | 薄いグレーで表示される案内文 |
rowsとcolsについて：現代のWebサイトではCSSでサイズを指定することが多いですが、基本的なサイズ指定としてrows・cols属性を理解しておくと良いでしょう。
textarea要素とinput要素の違い
- 改行対応 textarea要素は改行を含む複数行テキストを扱える
- タグ構造 開始タグと終了タグの間にデフォルト値を記述
- サイズ調整 rows・cols属性で表示サイズを指定可能
- リサイズ機能 ブラウザによってはユーザーがサイズ変更可能
textarea要素の書き方における重要な注意点
textarea要素では、開始タグと終了タグの間にあるすべての文字がデフォルトテキストとして認識されます。
特にインデント（タブや空白文字）が問題になりやすく、HTMLを美しく整形するためにインデントを入れると、それらの空白文字がそのままtextareaの内容として扱われてしまいます。
- 問題のあるコード：
<div>
<textarea name="message1">
ここにデフォルトテキスト <!-- ← この行の先頭にインデント（空白）があるため問題 -->
</textarea>
</div>
<div>
<textarea name="message2" placeholder="メッセージを入力">
</textarea> <!-- ← タグ間にインデント（空白）があるため、placeholderが表示されない -->
</div>このように書くと、行頭にインデント（空白文字）が入り、意図しない空白が表示されたり、placeholder属性が機能しなくなったりします。
- 正しいコード：
<!-- デフォルトテキストがある場合：インデントなしで記述 -->
<div>
<textarea name="message1">
ここにデフォルトテキスト
</textarea>
</div>
<!-- 空のtextarea：インデントなしで改行のみ -->
<div>
<textarea name="message2" placeholder="メッセージを入力してください">
</textarea>
</div>
<!-- またはtextarea要素を同じ行に記述し、インデントする -->
<div>
<textarea name="message3" placeholder="メッセージを入力してください"></textarea>
</div>重要なのはtextarea要素を改行した後に不要なインデント（タブや空白文字）を入れないことです。HTMLの整形のためのインデントには注意しましょう。
textarea要素の基本的な使い方を体験
textarea要素を使った、お問い合わせフォームの例です。属性などの値を変更して、表示がどう変わるか試してみましょう。
textarea要素を実際に触ってみると、右下の角をドラッグしてサイズが変更できますね！
その通り！多くのブラウザでは、ユーザーがtextarea要素のサイズを自由に調整できるようになっているんだ。長い文章を書く時にとても便利な機能だよ。
プルダウンメニューを作る - select要素
多くの選択肢から1つまたは複数を選んでもらう場面で活躍するのが <select> 要素です。都道府県選択、年齢選択、カテゴリ選択など、決まった選択肢の中から選んでもらう時に最適なフォーム要素です。
確かに都道府県を47個全部ラジオボタンで並べるのは見た目も悪いし、ユーザーも選びにくそうですね。
その通り！select要素なら限られたスペースで多くの選択肢を提供できるんだ。プルダウンメニューとして表示されるから、ページがすっきりして使いやすくなるよ。
select要素の基本構造
select要素は <select> タグと <option> タグを組み合わせて作成します。select要素がコンテナで、その中にoption要素で選択肢を定義していく構造です。
<option value="値1" >表示テキスト1</option>
<option value="値2" selected >表示テキスト2</option>
<option value="値3" >表示テキスト3</option>
</select>
（プルダウンメニュー本体）
（Ctrl/Cmdキーで複数選択）
（ユーザーが選ぶ項目）
（表示テキストと区別）
（option要素の中身）
（デフォルトで選ばれる項目）
select要素の主要属性
| 属性 | 説明 | 使用例 | 備考 |
|---|---|---|---|
| name | サーバー送信時のデータ名 | name="prefecture" | フォーム送信時の識別名 |
| id | ページ内での一意識別子 | id="prefecture" | label要素との関連付けに使用 |
| multiple | 複数選択を許可 | multiple | Ctrl/Cmd+クリック、Shift+クリック、ドラッグで複数選択可能 |
| size | 表示する選択肢の数 | size="5" | プルダウン→リストボックス形式に変更（通常は未指定） |
option要素の主要属性
| 属性 | 説明 | 使用例 | 備考 |
|---|---|---|---|
| value | サーバーに送信される値 | value="tokyo" | 表示テキストと異なる値を送信可能 |
| selected | 初期選択状態 | selected | ページ読み込み時にデフォルトで選択 |
| disabled | 選択不可状態 | disabled | グレーアウトして選択できない |
基本的なselect要素の作成
まずは基本的なselect要素を作ってみましょう。都道府県選択の例で実際の動作を確認してみます。
プルダウンメニューをクリックすると、選択肢が開いて選べるんですね！シンプルで使いやすいです。selected属性で初期選択もできるんですね。
その通り！selected属性を使うと、ページ読み込み時にデフォルトで選ばれる項目を指定できるんだ。ユーザーがよく選ぶ項目をあらかじめ選択しておくと便利だよ。
optionで表示テキストと送信値を分ける
option要素では、表示されるテキストとサーバーに送信される値を分けて設定できます。これにより、ユーザーには分かりやすい日本語を表示しつつ、システム内では英語の値を使うことができます。
<option value="tokyo" >東京都</option>
<option value="osaka" >大阪府</option>
<option value="kyoto" >京都府</option>
</select>
value属性の重要性
- 表示とデータの分離 ユーザーには分かりやすいテキスト、システムには処理しやすい値
- 国際化対応 表示言語が変わっても、value値は統一して管理可能
- データベース設計 英語の短縮形で保存することで、データ効率が向上
- プログラム処理 条件分岐などでvalue値を使用することで、処理が簡潔になる
optgroupで選択肢をグループ化
選択肢が多い場合は、<optgroup> 要素を使ってグループ化することで、より使いやすいプルダウンメニューを作成できます。
<select name="prefecture" id="prefecture">
<option value="">-- 選択してください --</option>
<optgroup label="関東地方">
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
<option value="chiba">千葉県</option>
</optgroup>
<optgroup label="関西地方">
<option value="osaka">大阪府</option>
<option value="kyoto">京都府</option>
<option value="hyogo">兵庫県</option>
</optgroup>
<optgroup label="中部地方">
<option value="aichi">愛知県</option>
<option value="shizuoka">静岡県</option>
<option value="gifu">岐阜県</option>
</optgroup>
</select>optgroupを使うと、選択肢がカテゴリ別に整理されて、とても見やすくなりますね！
その通り！特に都道府県選択で「関東地方」「関西地方」のように地域別に分けたり、商品カテゴリ別に分けたりする時に便利だよ。ユーザーが目的の選択肢を素早く見つけられるようになるんだ。
複数選択が可能なselect要素
multiple 属性を使うことで、複数の選択肢を同時に選択できるようになります。また、size 属性を組み合わせることで、同時に表示する選択肢の数を制御できます。
<form>
<select name="languages" multiple size="6>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
<option value="go">Go</option>
</select>
</form>multipleとsizeの使い方
- multiple属性 複数選択を可能にする（Ctrl/Cmd+クリック、ドラッグなどで複数選択）
- size属性 同時に表示する選択肢の数を指定（例：size=“6”で6行表示）
- リストボックス形式 プルダウンではなく、指定した行数のリスト形式で常時表示
- 複数選択の操作方法 Ctrl/Cmd+クリック、Shift+クリック、ドラッグで範囲選択
- ユーザビリティ 選択方法の説明を併記することが重要
- 単一選択でのsize使用 推奨されない（プルダウンの方が一般的）
size属性は、select要素で同時に表示する選択肢の数を指定します：
- size属性未指定 一般的なプルダウンメニュー（単一選択用）
- size属性指定 リストボックス形式（主に複数選択用）
通常のWebサイトでは、単一選択の場合はsize属性を指定せずプルダウンメニューとして使用し、複数選択の場合にsize属性と組み合わせてリストボックス形式で使用することが一般的です。
size=“6”にすると6行分の選択肢が見えて、multiple属性で複数選択できるんですね！
そうなんだ。size属性は特に複数選択の時に威力を発揮する。ユーザーが選択状況を一目で確認できるし、プルダウンを何度も開く必要がないから操作性が向上するんだよ。ただし、単一選択の場合は通常のプルダウンメニューの方が使いやすいことが多いね。
- 個別選択 Ctrl（Windows）やCmd（Mac）を押しながらクリックで、離れた項目を個別に選択
- 範囲選択 Shiftキーを押しながらクリックで、最初に選択した項目から範囲選択
- ドラッグ選択 マウスでドラッグして連続する複数項目を選択
- 全選択/解除 Ctrl+A（Windows）やCmd+A（Mac）で全選択（ブラウザによって対応状況が異なる）
前回の復習と組み合わせ
input要素との使い分け
前回学んだinput要素と今回学んだtextarea、select要素を適切に使い分けることで、ユーザーにとって使いやすいフォームを作成できます。それぞれの特徴と最適な使用場面を整理してみましょう。
詳しく書いてください...
フォーム要素選択の判断基準
- 一行テキスト入力
input type="text"名前 / 検索語 / 郵便番号など短い情報 - 形式付き入力
input type="email"/number/date指定形式での入力を促す - 排他的単一選択
input type="radio"性別 / 料金プラン / 支払い方法 - 複数選択可
input type="checkbox"興味分野 / メール配信 / 規約同意 - ファイル送信
input type="file"プロフィール画像 / 添付資料 / 履歴書 - 複数行文章
textareaお問い合わせ内容 / コメント / 自己紹介など長文 - 選択肢が多数
select都道府県 / カテゴリ / 年月日の一部など事前定義集合
- 入力頻度 何度も入力させたくない → 選択型（select / radio / checkbox）
- 入力ミス防止 値を限定したい → select / radio（自由入力を避ける）
- 視覚的負荷 選択肢が5個以下 → radio、10個以上 → select
- 縦スペース節約 radioが増えすぎるなら select へ再設計
- 長文化予測 文章になりそう → 初めから textarea を用意
- selectとradio、checkboxの使い分け
選択肢が少なく、すべてを一目で見せたい場合はradioやcheckboxを使い、選択肢が多い場合やスペースを節約したい場合はselectを使うと良いでしょう。
理解度チェッククイズ
それでは、textarea要素とselect要素についてクイズで理解度をチェックしてみよう！これまで学んだ内容をしっかりと身に付けているかな？
textarea要素・select要素ミニクイズ
<!-- 選択肢A -->
<textarea name="message" rows="5" cols="40">
デフォルトテキスト
</textarea>
<!-- 選択肢B -->
<textarea name="message" rows="5" cols="40">
デフォルトテキスト
</textarea>
<!-- 選択肢C -->
<textarea name="message" rows="5" cols="40" />
<!-- 選択肢D -->
<input type="textarea" rows="5" cols="40"><select name="prefecture">
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
</select>まとめ
textarea要素とselect要素を実際に使ってみて、どちらもとても便利ですね！特にoptgroupでグループ化する方法や、value属性の使い方がよく分かりました。
そうだね！この章では、textarea要素の複数行テキスト入力とselect要素のプルダウンメニューを学んだね。さらに重要なのは、「どの場面でどのフォーム要素を選ぶか」という選択基準も身につけたことだ。
フォーム要素の使い分けができると、ユーザーが入力しやすくなりますね。短いテキストはinput、長い文章はtextarea、多くの選択肢はselectというように。
まさにその通り！ユーザーの入力負担を減らし、間違いを防ぐのが良いフォーム設計の基本だからね。次回は、これまで学んだすべてのフォーム要素を組み合わせて、実際の登録フォームを完成させよう。
- textarea要素 rows・cols属性でサイズ調整、複数行テキスト入力に最適
- select要素 プルダウンメニューで多くの選択肢を効率的に表示
- optgroup要素 選択肢を論理的にグループ化して整理、ユーザビリティ向上
- multiple属性活用 複数選択を可能にし、ユーザーの選択肢を広げる
- 要素選択基準 入力内容と文字数に応じてinput・textarea・selectを使い分け
次回はフォームのユーザビリティとアクセシビリティです。ラベルの書き方、わかりやすいエラーメッセージなど、誰でも使いやすいフォームにするための実践的なテクニックを実例とともに学びます。