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

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

HTMLで複数行のテキスト入力欄を作成するには、<textarea>タグを使用します。cols属性とrows属性を指定することで、テキストエリアのサイズを自由に調整できます。このタグは主に<form>タグの中で使われ、お問い合わせフォームのコメント欄など、ユーザーが複数行にわたる文章を入力できるようにしたい場合に活用されます。

それでは、<textarea>タグで利用できる主な属性を一覧で確認していきましょう。

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


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

サンプルコード

次のコードを実行すると、HTMLで複数行のテキスト入力欄を作成できます。

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

   <body>
      <form action = "/cgi-bin/hello_get.cgi" method = "get">
         What improvements you want in College?
         <br>
         <textarea rows = "5" cols = "60" name = "description">
            Enter details here...
         </textarea><br>
         <input type = "submit" value = "submit" />
      </form>
   </body>
</html>

この例では、rows="5"で5行分の高さ、cols="60"で60文字分の幅を持つテキストエリアを作成しています。初期値として「Enter details here...」というテキストが表示され、送信ボタンを押すと入力内容がname="description"としてサーバーへ送信されます。用途に応じてplaceholderやmaxlengthなどの属性を組み合わせると、より使いやすいフォームになります。

  1. HTMLで順序付きリスト（番号付きリスト）を作成する方法

    HTMLで順序付きリスト（番号付きリスト）を作成するには、<ol>タグを使用します。順序付きリストは<ol>タグから開始し、個々のリスト項目は<li>タグで定義します。各項目には自動的にマーカーが付与され、その種類は「数字」「アルファベット」「ローマ数字」などから選択できます。何も指定しない場合のデフォルトは「数字」です。サンプルコード以下のコードを実行すると、HTMLでの順序付きリストの使い方を確認できます。<!DOCTYPE html> <html>    <body>    

  2. HTMLで条件付きコメントを作成する方法を解説

    HTMLの条件付きコメント（Conditional Comments）は、Internet Explorerだけを対象とした特別なコメント構文です。通常のコメントに条件式を追加した形式で、指定した条件に一致するバージョンのInternet Explorerのみが、コメント内のコードやタグを実行します。この機能はInternet Explorer 5以降でサポートされています。条件付きコメントに対応していないブラウザは、この構文を単なる普通のコメントとして認識するため、内容が実行されることはありません。つまり、IE向けだけに特定のCSSやJavaScriptを読み込ませたい場合などに便利な仕組み