ウェブ学のすすめ

Study of Web Design & Programing

jQueryMobileのフォームテンプレート

jQueryMobile

プレビュー


↓別ウィンドウを開いて見る
フォーム

↓QRコード

※おすすめ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>&copy; 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;
}