いろいろなコントロール

フォームには、input要素の他にもコントロールがあります。それを紹介します。

textarea要素

まず紹介するのがtextarea要素です。これは、複数行入力ボックスです。

掲示板の投稿フォームなど文章を送信する場合は、このようなものが必要となります。

textareaにもname属性はinputと同じようにあります。ただし、value属性はありません。input要素のように初期値を指定する場合でも、value属性に長い文章や複数行の文章を指定することは難しいです。その代わり、textareaは空要素ではなく、その中身に初期値を書きます。初期値がない場合は空で、<textarea></textarea>のようにします。

また、そのためtextarea要素の中身はテキストだけです。

textarea要素特有の属性として、cols属性とrows属性があります。これらはテキストエリアのサイズ（大きさ）を指定するもので、colsは横幅（文字数）、rowsは縦幅（文字数）です。

他には、同じ入力ボックスということで、前回のinput要素（入力ボックス）と共通の属性も多いです。maxlength,placeholder,readonly,requiredなどが共通です。

さらに、wrap属性があります。これは"soft"または"hard"で、これはフォームが送信されるときに違いが出ます。デフォルトはsoftです。

テキストエリアは、端まで入力されると次の行に移ります。自分で改行して次の行に移ることも可能です。送信時、"hard"の場合は見た目通りに、つまりテキストエリアの端まで到達したところで勝手に改行が入って送信されます。"soft"の場合は自分でした改行しか反映されません。つまり、テキストエリアの幅以上の長さの行を送信することが可能です。

サンプル

さて、今回と前回で紹介した要素を使って簡単なサンプルを作ってみます。掲示板の投稿フォームです。

<form action="掲示板のURL" method="post">
<p>名前:<input type="text" size="30" placeholder="HNを入力して下さい" required></p>
<p>内容:<textarea cols="30" rows="8" placeholder="内容を入力して下さい" required></textarea></p>
<p>パスワード:<input type="password" size="10"><input type="submit" value="書きこむ"></p>
</form>

これを実際に表示すると次のようになります。

このようなフォームは、サーバーサイドで動くシステムやあるいはJavaScriptから利用できます。HTML講座なのでフォームデータの利用法については解説しませんが、興味があったら調べてみましょう。

select要素

次に紹介するのはselect要素です。これは、選択肢の中から1つを選ばせるというものです。

具体的には、このようなものです。選択肢1選択肢2選択肢3

各選択肢は、select要素の子のoption要素として表されます。選択肢の文字がoption要素の子となります。したがって、次のようになります。

<select>
<option>選択肢1</option>
<option>選択肢2</option>
<option>選択肢3</option>
</select>

フォームコントロールには多くの属性があります。次はselect要素・option要素の属性を紹介します。

まずselect要素ですが、input要素・textarea要素と同じくname属性があります。意味も同じです。

送信先に送るデータを意味するname属性は、seect要素ではなくoption要素に付きます。どれを選ぶかによって送るデータを変えなければいけないので当然といえますね。

したがって、それらを加えた基本形は次のようになります。

<select name="名前">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>

ちなみに、option要素のvalue属性が省略された場合は、その子テキスト（表示される選択肢と同じ文字列）がそのまま送られます。

次に紹介するのがsize属性です。これはその名のとおり、セレクトボックスのサイズを表すものです。サイズを大きくすると横長になるわけではなく、基本的には縦に長くなります。例えばサイズを4にした場合次のようになります。 選択肢1選択肢2選択肢3 選択肢4選択肢5選択肢6 自分の環境では、縦長の箱になりました。

さらに、multiple属性です。これは論理属性で、この属性があると複数選択が可能になります。

option要素

今度はoption要素に目を向けてみましょう。

まず紹介するのはselected属性です。これは論理属性で、あると最初その選択肢が選択された状態になっています。

もう1つはlabel属性です。これは、画面に表示される選択肢の文字列を指定します。前に解説した通り、これが無ければoption要素の子のテキストになります。逆に、label属性があればoption要素の子は意味が無いことになります。

optgroup要素

セレクトボックス関連で、もう1つ紹介すべき要素があります。それがoptgroup要素です。これはその名のとおり、option要素をグループ分けするためのもので、使い方は簡単で、optgroup要素でoption要素を囲むだけです。

各グループに名前をつけることができ、その名前はlabel属性で指定します。option要素と同じですね。

例えば、次のサンプルを表示するとこのようになります。 選択肢1-1 選択肢1-2 選択肢2-1 選択肢2-2 選択肢2-3 選択肢3-1 選択肢3-2 選択肢4

<select>
  <optgroup label="グループ1">
    <option>選択肢1-1</option>
    <option>選択肢1-2</option>
  </optgroup>
  <optgroup label="グループ2">
    <option>選択肢2-1</option>
    <option>選択肢2-2</option>
    <option>選択肢2-3</option>
  </optgroup>
  <optgroup label="グループ3">
    <option>選択肢3-1</option>
    <option>選択肢3-2</option>
  </optgroup>
  <option>選択肢4</option>
</select>

button要素

次に紹介するのはbutton要素です。これは、input要素と同じくボタンを作るものです。

それではinputで作るボタンと何が違うかというと、まずbutton要素は空要素ではありません。inputは空要素で、ボタンの場合value属性に表示される文字列を書きました。button要素の場合は、そうではなく子として文字列を指示します。したがって、次のようになります。

<button>ボタン</button>

button要素の特徴は、その子がフレージング・コンテンツであるということです。つまり、ただのテキストではなく、フレージング・コンテンツを用いてマークアップされたテキストをボタンの文字列とすることができます。具体例は、次のような感じです。

<button>押すと<em>大変</em>なことになります</button>

さて、こうしてできるボタンですが、実はtype属性でボタンの種類を指定することができます。その値は3種類あり、"submit","reset","button"です。それぞれ、送信ボタン、リセットボタン、ただのボタンです。デフォルトだと送信ボタンになっています。これは、<input type="submit">,<input type="reset">,<input type="button">と同じです。

たまに使う機会があるかもしれません。

ところで、button要素の子はフレージング・コンテンツであるといいましたが、実は制限があります。その制限とは、「子孫にインタラクティブ・コンテンツが無いこと」です。子孫とは、つまりbutton要素の中ということですね。

それではインタラクティブ・コンテンツとは何かというと、ユーザーが操作する要素のことです。フォームコントロールはユーザーが入力するものですからこれに含まれます。他にa要素などもそうです。