HTML講座 / textarea・select・option・buttonを使う

複数行の入力にはtextarea、用意した候補から選ぶ場合はselectとoptionを使います。buttonには用途に応じてsubmit、reset、buttonを明示し、意図しない送信を防ぎます。

textareaで複数行を入力する

labelと関連付け、nameを付けて送信項目を定めます。rowsやcolsは表示サイズの目安で、入力できる最大文字数ではありません。必要ならmaxlengthなどを別に指定します。

<label for="message">Your message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

初期内容は開始タグと終了タグの間に書きます。inputのようにvalue属性へ書く方法とは異なります。初期内容を入れずに例を示したい場合は、placeholderと案内文の違いを確認します。

selectとoptionで候補を用意する

selectが入力欄全体、optionが個々の候補です。画面に見える文言と送信値は分けられます。

<label for="topic">Topic</label>
<select id="topic" name="topic">
  <option value="order">Orders</option>
  <option value="delivery">Delivery</option>
  <option value="other">Other</option>
</select>

例えば「Orders」と表示されても、送信するのはvalue="order"のorderです。初期選択を指定するselectedと、操作後の現在の選択は区別します。multipleを付けると複数選択になりますが、操作方法が環境で違うため、選び方の説明も確認してください。

一つのフォームで送信値とリセットを比較する

次の完全なコードをcontrols.htmlとして保存して開きます。複数行を入力し、選択肢を変え、フォームデータを表示する操作とリセットを比較します。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form controls practice</title>
  <style>
    textarea, select { box-sizing: border-box; max-width: 100%; font: inherit; }
    textarea { width: 24rem; }
  </style>
</head>
<body>
  <h1>Practice contact controls</h1>
  <form id="controls-form" method="get">
    <p><label for="topic-choice">Topic</label>
      <select id="topic-choice" name="topic" required>
        <option value="">Choose a topic</option>
        <option value="order">Orders</option>
        <option value="delivery">Delivery</option>
      </select></p>
    <p><label for="message-text">Message</label>
      <textarea id="message-text" name="message" rows="4">Test question</textarea></p>
    <button type="submit">Inspect entered values</button>
    <button type="reset">Restore initial values</button>
  </form>
</body>
</html>

textareaの改行を含む値や、選択肢の送信値が一覧へ反映されることを確認します。リセットは常に空にする操作ではなく、文書に指定した初期状態へ戻す操作です。確認後はファイルを再読み込みして同じ条件から再実行できます。送信要求の確認方法はGET・POSTとフォームデータと合わせて使います。

buttonのtypeを明示する

フォーム内のbuttonは、typeを省くと通常送信ボタンとして扱われます。単なる表示切り替えなどで送信したくない場合はtype="button"を指定します。

<form method="get">
  <label for="note">Note</label>
  <textarea id="note" name="note" rows="4"></textarea>
  <button type="submit">Submit</button>
  <button type="reset">Reset entries</button>
</form>

submitは送信、resetは初期状態への復元、buttonはそれ自体では送信しない通常のボタンです。押せる見た目の要素だけを作るより、意味に合う標準部品を使う方がキーボード操作も扱いやすくなります。仕様はtextarea、select、buttonのMDNリファレンスで確認できます。