Bootstrapのtextareaに注意書きみたいなヘルプを付け加える
textareaがあって、その下に「※1000文字以内で入力してください」みたいな、薄いグレーの文字で、注意書きが書いてあるサイトを見かけると思う。
具体的にはこんな感じの。
このヘルプの文字を出すには、「help-block」というクラスを指定すればいい。
上の画像を表示するためのコードはこちら。
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>フォームのサンプル</h1> <form method="post" action="hoge"> <div class="form-group"> <label for="name" class="control-label">名前</label> <input type="text" name="name" id="name" placeholder="名前を入力" class="form-control"> </div> <div class="form-group"> <p class="control-label"><b>性別</b></p> <div class="radio-inline"> <input type="radio" value="1" name="gender" id="man"> <label for="man">男性</label> </div> <div class="radio-inline"> <input type="radio" value="2" name="gender" id="woman"> <label for="woman">女性</label> </div> </div> <div class="form-group"> <p class="control-label"><b>趣味</b></p> <div class="checkbox-inline"> <input type="checkbox" value="soccer" name="interests" id="interest_soccer"> <label for="interest_soccer">サッカー</label> </div> <div class="checkbox-inline"> <input type="checkbox" value="basketball" name="interests" id="interest_basketball"> <label for="interest_basketball">バスケットボール</label> </div> <div class="checkbox-inline"> <input type="checkbox" value="baseball" name="interests" id="interest_baseball"> <label for="interest_baseball">野球</label> </div> <div class="form-group"> <label for=" introduction" class="control-label">自己紹介文</label> <textarea name="introduction" id="introduction" cols="45" rows="8" placeholder="自己紹介文を書いてください" class="form-control"></textarea> <!-- 注意書きは以下 --> <p class="help-block">※1200文字以内で書いてください</p> </div> </form> </div> </body> </html>