長さを変更できるテキスト入力欄を作る(2ページ目)

STEP.0 テキスト入力欄のHTML

ここでは、最初に以下のようなHTMLで作られたテキスト入力欄があり、そこに「編集領域の増減機能」を加える場合として解説します。
form要素の中にtextarea要素を使って入力欄を作っている、シンプルなフォームです。
※掲示板にせよメッセージフォームにせよ、実際には名前入力欄や送信ボタンなどもっとたくさんの要素や属性の記述があるはずですが、ここでは説明を分かりやすくするために省略しています。

<form name="exform">
   <p>
      コメント：<br>
      <textarea cols="21" rows="5" name="excomment"></textarea><br>
   </p>
</form>

フォーム（form要素）には「exform」という名称が付加されています。 テキスト入力欄（textarea要素）には「excomment」という名称が付加されています。 これらの名称は何でも構いません。 既にあるフォームを利用する場合は、そのフォームで使われている名称をそのまま使って構いません。

上記のHTMLを表示させると、以下のように見えます。

STEP.1 テキスト入力欄にボタンを加える

先ほどのHTMLにinput要素を2つ加えて、増減機能用のボタンを作りましょう。

<form name="exform">
   <p>
   コメント：<br>
   <textarea cols="21" rows="5" name="excomment"></textarea><br>
   <input type="button" value="▼広げる(X)" accesskey="X">
   <input type="button" value="▲狭める(C)" accesskey="C">
   </p>
</form>

上記のHTMLを表示させると、以下のように見えます。

※ここではまだ何もスクリプトを記述していませんので、ボタンをクリックしても何も起こりません。

input要素のtype属性に値「button」を指定すると、ボタンを作れます。 value属性の値には「▼広げる(X)」などのようにボタン表面に表示する文字列を指定します。
また、accesskey属性を使ってボタンにアクセスキーを割り振っています。 これによって、「広げる」ボタンは[Alt]＋[X]などのキーを押下することでも押せるようになります。
※アクセスキーで使われるキーの組み合わせは、OSやブラウザによって異なります。詳しくはこの記事の1ページ目をご参照下さい。

次に、このボタンをクリックすることで編集領域が増減するようスクリプトを記述しましょう。