Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script></head>
</head>
<body>
<!-- Page -->
<div data-role="page">
   <div data-role="header">
      <h1>jQuery Mobile Page</h1>
   </div>
 
   <div data-role="content">
      <form action="#" method="get">
         <!-- simple text box -->
         <div data-role="fieldcontain">
            <label for="text">Text Input:</label>
            <input type="text" name="text" id="text" value=""  />
         </div>
 
         <!-- textarea -->
         <div data-role="fieldcontain">
            <label for="textarea">Textarea:</label>
            <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
         </div>
 
         <!-- Search box -->
         <div data-role="fieldcontain">
            <label for="search">Search Input:</label>
            <input type="search" name="search" id="search" value=""  />
         </div>
 
         <!-- Flip toggle switch -->
         <div data-role="fieldcontain">
            <label for="flip">Flip toggle switch:</label>
            <select name="flip" id="flip" data-role="slider">
               <option value="off">Off</option>
               <option value="on">On</option>
            </select>
         </div>
 
         <!-- Slider -->
         <div data-role="fieldcontain">
            <label for="slider">Slider:</label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
         </div>
 
         <!-- Checkbox 1 -->
         <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
               <legend>CheckBox (vertical):</legend>
               <!-- Item 1 -->
               <input type="checkbox" name="checkbox-1a" id="checkbox-1a" />
               <label for="checkbox-1a">CheckBox 1</label>
               <!-- Item 2 -->
               <input type="checkbox" name="checkbox-2a" id="checkbox-2a" />
               <label for="checkbox-2a">CheckBox 2</label>
               <!-- Item 3 -->
               <input type="checkbox" name="checkbox-3a" id="checkbox-3a" />
               <label for="checkbox-3a">CheckBox 3</label>
               <!-- Item 4 -->
               <input type="checkbox" name="checkbox-4a" id="checkbox-4a" />
               <label for="checkbox-4a">CheckBox 4</label>
            </fieldset>
         </div>
 
         <!-- Checkbox 2 -->
         <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
               <legend>CheckBox (horizontal):</legend>
               <!-- Item 1 -->
               <input type="checkbox" name="checkbox-1b" id="checkbox-1b" />
               <label for="checkbox-1b">chk1</label>
 
               <!-- Item 2 -->
               <input type="checkbox" name="checkbox-2b" id="checkbox-2b" />
               <label for="checkbox-2b">chk2</label>
 
               <!-- Item 3 -->
               <input type="checkbox" name="checkbox-3b" id="checkbox-3b" />
               <label for="checkbox-3b">chk3</label>
            </fieldset>
         </div>
 
         <!-- Radio 1 -->
         <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
               <legend>Radio (vertical):</legend>
               <!-- Item 1 -->
               <input type="radio" name="radio-a" id="radio-1" value="radio-1" checked="checked" />
               <label for="radio-1">Radio 1</label>
 
               <!-- Item 2 -->
               <input type="radio" name="radio-a" id="radio-2" value="radio-2"  />
               <label for="radio-2">Radio 2</label>
 
               <!-- Item 3 -->
               <input type="radio" name="radio-a" id="radio-3" value="radio-3"  />
               <label for="radio-3">Radio 3</label>
            </fieldset>
         </div>
 
         <!-- Radio 2 -->
         <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
               <legend>Radio (horizontal):</legend>
               <!-- Item 1 -->
               <input type="radio" name="radio-b" id="radio-4" value="r1" checked="checked" />
               <label for="radio-4">R1</label>
 
               <!-- Item 2 -->
               <input type="radio" name="radio-b" id="radio-5" value="r2" />
               <label for="radio-5">R2</label>
 
               <!-- Item 3 -->
               <input type="radio" name="radio-b" id="radio-6" value="r3" />
               <label for="radio-6">R3</label>
            </fieldset>
         </div>
 
         <!-- Dropdown Menu -->
         <div data-role="fieldcontain">
            <label for="select">Select Menu:</label>
            <select name="select" id="select">
               <option value="item1">Select Item 1</option>
               <option value="item2">Select Item 2</option>
               <option value="item3">Select Item 3</option>
               <option value="item4">Select Item 4</option>
            </select>
         </div>
 
         <!-- Button -->
         <fieldset class="ui-grid-a">
            <div class="ui-block-a">
               <input type="reset" value="Reset" />
            </div>
            <div class="ui-block-b">
               <input type="submit" value="Submit" data-theme="b" />
            </div>
         </fieldset>
      </form>
    </div>
 
   <div data-role="footer">
      <h4>Footer</h4>
   </div>
 
</div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
chenyuyipro
0viewers