テキスト入力-input text







 ①テキスト入力 - text input  ☆ソース <label for="hoge">入力フォーム:</label> <input type="text" name="name" id="hoge" value="" />     labelのforとinputのidを一致させます(ここではhoge)。

  デモ


 ②テキスト入力(補足) - input type hoge  ☆ソース <div data-role="fieldcontain"> <label for="hoge">パスワード:</label> <input type="password" name="name" id="hoge" value="" /> </div> <div data-role="fieldcontain"> <label for="hoge">数字入力:</label> <input type="number" name="name" id="hoge" value="" /> </div> <div data-role="fieldcontain"> <label for="hoge">日付:</label> <input type="date" name="name" id="hoge" value="" /> </div> <div data-role="fieldcontain"> <label for="hoge">色:</label> <input type="color" name="name" id="hoge" value="" /> </div>     また、ラベルと入力エリアを横に並べたい場合は、上記のような書き方をします。

  デモ


 ③複数行のテキスト入力 - text area  ☆ソース <label for="hoge">テキストエリア:</label> <textarea name="textarea" id="hoge"></textarea>   デモ


 ④検索ボックス - search box  ☆ソース <label for="hoge">検索ボックス:</label> <input type="search" name="search" id="hoge" value="" />   デモ