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

HTMLでテキストエリア（textarea）を表示する方法【属性一覧とサンプルコード付き】

HTMLでテキストエリア（複数行のテキスト入力欄）を表示するには、<textarea>タグを使用します。<textarea>タグは、フォーム内に配置して使用する要素で、ユーザーが複数行にわたるテキストを入力できるコントロールを定義します。

textareaタグの主な属性

<textarea>タグでは、以下の属性を指定できます。

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

テキストエリアの表示例

以下のコードを実行すると、HTMLでテキストエリアを表示できます。

<!DOCTYPE html>
<html>
<head>
    <title>HTML textareaタグの例</title>
</head>
<body>
    <form action="/cgi-bin/hello_get.cgi" method="get">
        科目を入力してください
        <br />
        <textarea rows="5" cols="50" name="description">
        </textarea>
        <input type="submit" value="送信" />
    </form>
</body>
</html>

この例では、rows="5"とcols="50"を指定することで、5行×50文字分のサイズを持つテキストエリアを作成しています。name属性に「description」を設定することで、フォーム送信時にその名前でデータが送られます。

  1. HTMLでテキストを右から左（RTL）に表示する方法【CSSのdirectionプロパティ】

    HTMLでテキストを右から左（Right-to-Left：RTL）に表示するには、CSSのdirectionプロパティを使用します。style属性と組み合わせることで、特定の要素に対してインラインスタイルとして文字の方向を指定できます。 directionプロパティに指定できる値 directionプロパティでは、以下の3つの値を設定できます。 No.値と説明 1ltr左から右へ記述する（デフォルトの方向） 2rtl右から左へ記述する 3initial初期値に戻す style属性を使った指定方法 テキストを右から左に表示する場合は、style属性でCSSのdirectionプロパテ

  2. 【HTML】textareaタグで複数行のテキスト入力エリアを作成する方法

    HTMLで複数行のテキスト入力欄を作成するには、<textarea>タグを使用します。cols属性とrows属性を指定することで、テキストエリアのサイズを自由に調整できます。このタグは主に<form>タグの中で使われ、お問い合わせフォームのコメント欄など、ユーザーが複数行にわたる文章を入力できるようにしたい場合に活用されます。 それでは、<textarea>タグで利用できる主な属性を一覧で確認していきましょう。 属性値説明 autofocusautofocusページ読み込み時に、テキストエリアへ自動的にフォーカスを当てることを指定します。 cols