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

Bootstrapフォームでtextarea（複数行テキスト入力）を使う方法

Bootstrapのフォームで、住所やコメントなど複数行にわたるテキストを入力させたい場合には、<textarea>要素を使用します。単一行の<input type="text">とは異なり、ユーザーが自由に改行しながら長い文章を入力できるのが特徴です。

textareaの基本的な使い方

Bootstrapでtextareaを使う場合は、form-controlクラスを指定することで、他のフォーム部品と統一感のあるスタイルが自動的に適用されます。また、rows属性で表示する行数を指定できるため、入力項目に応じた高さに調整可能です。

主なポイント

  • form-controlクラス：Bootstrap標準のフォームデザインを適用する
  • rows属性：初期表示の行数（高さ）を指定する
  • placeholder属性：入力欄にヒントとなるガイドテキストを表示する

サンプルコード

以下は、テキスト入力欄とtextareaを組み合わせたフォームの実装例です。プレイヤー名・ランクは1行入力、プレイヤーの詳細情報には複数行入力のtextareaを使用しています。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Forms</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <form role = "form">
         <div class = "form-group">
            <label for = "name">Player</label>
            <input type = "text" class = "form-control" placeholder = "Player Name">
         </div>
         <div class = "form-group">
            <label for = "name">Rank</label>
            <input type = "text" class = "form-control" placeholder = "Player Rank">
         </div>
         <div class = "form-group">
            <label for = "name">Player Details</label>
            <textarea class = "form-control" rows = "3" placeholder = "Player Details"></textarea>
         </div>
      </form>
   </body>
</html>

実行結果の確認方法

上記のコードをHTMLファイルとして保存し、ブラウザで開くと、「Player」「Rank」のテキストボックスと、3行分の高さを持つ「Player Details」のtextareaが表示されます。textarea部分は右下のつまみをドラッグすることで、ユーザー自身がサイズを変更できる点もとの大きな違いです。

このように、Bootstrapではform-controlクラスを付けるだけで、inputとtextareaの見た目を統一できるため、整ったフォームを簡単に作成できます。

  1. HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

    Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f

  2. C#のConsoleクラスとは？主要プロパティの使い方を実例付きで解説

    C#のConsoleクラスは、コンソールアプリケーションにおける標準入力・標準出力・標準エラー出力の各ストリームを表すクラスです。テキストの表示や入力の読み取りだけでなく、文字色や背景色の変更、カーソル位置やサイズの制御など、コンソール操作に関するさまざまな機能が提供されています。ここでは、Consoleクラスの代表的なプロパティの使い方を、サンプルコードと実行結果とあわせて解説します。Console.CursorLeftプロパティコンソール上のカーソル位置（左端から数えた列位置）を変更するには、Console.CursorLeftプロパティを使用します。サンプルコードusing System