ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

長さを変更できるテキスト入力欄を作る(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ページ目をご参照下さい。

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

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます