テキスト入力-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="" /> 　デモ