jQueryMobileのフォームテンプレート
プレビュー
↓別ウィンドウを開いて見る
フォーム
※おすすめQRコード読み取りアプリ
お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料
ポイント
- 「text-overflow」
- ellipsis:テキストが領域を超えてしまった場合、オーバーフローしたテキストを「...」で省略する
- clip:テキストが領域を超えてしまった場合には表示しない
- 「white-space」
- normal:ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示&ボックスの大きさに応じて自動的に改行
- pre:ソース中の連続する半角スペース・タブ・改行を、そのまま表示
- nowrap:ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示&ボックスの大きさにかかわらず自動的に改行しない
コード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>フォーム</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <div data-role="page" id="index" data-theme="b"> <div data-role="header" data-theme="b"> <h1>フォーム</h1> </div> <div data-role="content"> <h2 class="h1">フォームの種類</h2> <form action="form.php" method="post"> <!-- ▼入力フォーム --> <div data-role="fieldcontain"> <label for="name">入力フォーム</label> <input type="text" id="name"> </div> <!-- ▲入力フォーム --> <!-- ▼複数行入力ボックス --> <div data-role="fieldcontain"> <label for="comment">複数行入力ボックス</label> <textarea id="textarea" name="textarea"></textarea> </div> <!-- ▲複数行入力ボックス --> <!-- ▼検索ボックス --> <div data-role="fieldcontain"> <label for="search">検索ボックス</label> <input type="search" name="search" id="search" value=""> </div> <!-- ▲検索ボックス --> <!-- ▼スライダー --> <div data-role="fieldcontain"> <label for="slider">スライダー</label> <input type="range" name="slider" id="slider" value="25" min="0" max="100" data-highlight="true"> </div> <!-- ▲スライダー --> <!-- ▼フリップスイッチ --> <div data-role="fieldcontain"> <label for="flip">フリップスイッチ</label> <select id="flip" name="flip" data-role="slider"> <option value="no">No</option> <option value="yes">Yes</option> </select> </div> <!-- ▲フリップスイッチ --> <!-- ▼横方向ラジオボタン --> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>横方向ラジオボタン</legend> <input type="radio" name="type" id="type1" value="1" checked="checked"> <label for="type1">1</label> <input type="radio" name="type" id="type2" value="2"> <label for="type2">2</label> <input type="radio" name="type" id="type3" value="3"> <label for="type3">3</label> </fieldset> </div> <!-- ▲横方向ラジオボタン --> <!-- ▼縦方向ラジオボタン --> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>縦方向ラジオボタン</legend> <input type="radio" name="type" id="type1" value="1" checked="checked"> <label for="type1">1</label> <input type="radio" name="type" id="type2" value="2"> <label for="type2">2</label> <input type="radio" name="type" id="type3" value="3"> <label for="type3">3</label> </fieldset> </div> <!-- ▲縦方向ラジオボタン --> <!-- ▼横方向チェックボックス --> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>横方向チェックボックス</legend> <input type="checkbox" name="type1" id="type1" value="1" checked="checked"> <label for="type1">1</label> <input type="checkbox" name="type2" id="type2" value="2"> <label for="type2">2</label> <input type="checkbox" name="type3" id="type3" value="3"> <label for="type3">3</label> </fieldset> </div> <!-- ▲横方向チェックボックス --> <!-- ▼縦方向チェックボックス --> <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>縦方向チェックボックス</legend> <input type="checkbox" name="type1" id="type1" value="1" checked="checked"> <label for="type1">1</label> <input type="checkbox" name="type2" id="type2" value="2"> <label for="type2">2</label> <input type="checkbox" name="type3" id="type3" value="3"> <label for="type3">3</label> </fieldset> </div> <!-- ▲縦方向チェックボックス --> <!-- ▼セレクトメニュー --> <div data-role="fieldcontain"> <label for="select" class="select">セレクトメニュー</label> <select name="select" id="select" data-native-menu="false"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </div> <!-- ▲セレクトメニュー --> <!-- ▼送信ボタン/リセットボタン --> <fieldset class="ui-grid-a"> <div class="ui-block-a"><input type="button" value="キャンセル" data-theme="c" data-icon="delete"></div> <div class="ui-block-b"><input type="submit" value="送信" data-theme="b" data-icon="arrow-r"></div> </fieldset> <!-- ▲送信ボタン/リセットボタン --> </form> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> </body> </html>
CSS
.ui-header .ui-title, .ui-footer .ui-title { text-overflow: clip; white-space: nowrap; margin: .6em 20% .8em; } .ui-body-b { background:#CCC; background-image: -moz-linear-gradient(top,#FFF, #CCC); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFF),color-stop(1, #CCC)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF', EndColorStr='#CCC')"; } .ui-content .h1 { color: #5E87B0; font-size: 17px; text-shadow: 1px 0 0 #fff; } .ui-field-contain input.ui-input-text, .ui-field-contain textarea.ui-input-text { background-color:#fff; } .ui-field-contain:first-child { padding-top:0; }