HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのtextareaタグとは？複数行テキスト入力フィールドの使い方と主要属性を徹底解説

Webページに複数行のテキスト入力欄を追加したい場合は、HTMLの<textarea>タグを使用します。rows属性とcols属性で入力欄のサイズを指定でき、主にフォーム内で使われ、ユーザーが複数行にわたる文章や詳細なコメントを自由に入力できるようになります。

textareaタグの主な属性一覧

<textarea>タグには、以下のような属性があります。

属性値説明
autofocusautofocusページ読み込み時に、自動的にこのテキストエリアへフォーカスを移すことを指定します。
cols数値表示可能な文字数（1行あたりの文字幅）に基づいて、テキストエリアの幅を指定します。
disableddisabledテキストエリアを無効化します。ユーザーは入力・編集できなくなります。
formform_idこのテキストエリアが属するフォーム（1つまたは複数）のIDを指定します。
maxlength数値テキストエリアに入力できる最大文字数を指定します。
nametext入力コントロールに名前を割り当てます。送信時にはこの名前がデータの識別に使われます。
placeholdertext入力前に表示される短いヒント文（プレースホルダー）を指定します。
readonlyreadonly入力コントロールを読み取り専用に設定します。ユーザーは値を変更できませんが、フォーカスを受け取ることが可能で、Tabキーによる移動対象にも含まれます。
requiredrequiredこのテキストエリアへの入力が必須であることを指定します。
rows数値表示される行数に基づいて、テキストエリアの高さを指定します。行数を超えるテキストが入力された場合は、スクロールバーで閲覧できます。
wraphard / softテキストエリア内でのテキストの折り返し方法を指定します。

textareaタグの使用例

以下のコードを実行すると、HTMLでtextareaを使用した複数行入力フィールドの動作を確認できます。

<!DOCTYPE html>
<html>
<head>
   <title>HTML textarea Tag</title>
</head>

<body>
   <form action="/cgi-bin/hello_get.cgi" method="get">
      大学に対してどのような改善をご希望ですか？
      <br>

      <textarea rows="4" cols="40" name="description">
         ここに詳細を入力してください...
      </textarea>
      <br>

      <input type="submit" value="送信" />
   </form>

</body>
</html>

この例では、rows="4"とcols="40"を指定することで、4行×40文字分の大きさを持つテキストエリアを作成しています。フォーム送信ボタンと組み合わせることで、ユーザーが入力した内容をサーバーへ送信できます。

  1. HTML DOMのInput Textオブジェクトとは？基本構文・プロパティ一覧と実例コードを解説

    HTML DOMのInput Textオブジェクトは、<input>要素のうちtype=textが指定された要素に対応するオブジェクトです。テキスト入力欄を表すこのオブジェクトは、新規に作成する場合はcreateElement()メソッドを、既存の要素へアクセスする場合はgetElementById()メソッドを使用します。本記事では、Input Textオブジェクトで利用できる主なプロパティの一覧と、基本的な構文、実際に動作するサンプルコードをわかりやすく解説します。Input Textオブジェクトの主なプロパティInput Textオブジェクトには、以下のようなプロパティが用意

  2. HTML入力フィールドのオートコンプリート（自動補完）を無効にする方法

    はじめにHTMLの入力フィールドでは、ブラウザのオートコンプリート（自動補完）機能によって、過去に入力した内容が候補として表示されることがあります。この機能を無効にしたい場合は、<input>要素にautocomplete属性を指定します。「off」を設定すれば無効になり、「on」を設定すれば有効になります。サンプルコード以下は、姓の入力欄ではオートコンプリートを無効にし、名の入力欄では有効にする例です。<!DOCTYPE html> <html> <head> <style> input{ font-size