jQuery Mobile - Native form elements & buttons(네이티브 요소와 버튼)

프레임웍에서 폼 요소와 버튼들을 touch input에 적합한 컨트롤들로 자동적으로 변환시켜 줍니다.
Data-role=”none”속성을 사용하면 어떤 폼 요소나 버튼들을 프레임웍에서 변환하지 않고 기본 요소로 사용할 수 있습니다. 모든 기본 스타일링은 그대로 사용하기 때문에 사용자 정의 스타일을 사용할 필요가 있습니다.

<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" data-role="none" />
</div>

<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea" data-role="none"></textarea>
</div>

<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" data-role="none" />
</div>

<div data-role="fieldcontain">
<label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="none">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" data-role="none" />
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" data-role="none" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" data-role="none" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" data-role="none" />
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" data-role="none" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" data-role="none" />
<label for="checkbox-6">b</label>
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" data-role="none" />
<label for="checkbox-7"><em>i</em></label>
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" data-role="none" />
<label for="checkbox-8">u</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" data-role="none" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" data-role="none" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" data-role="none" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" data-role="none" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Layout view:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" data-role="none" />
<label for="radio-choice-c">List</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" data-role="none" />
<label for="radio-choice-d">Grid</label>

<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" data-role="none" />
<label for="radio-choice-e">Gallery</label>
</fieldset>
</div>

<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1" data-role="none">

<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3" data-role="none">
<option>Choose...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>

<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>

<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>

<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>

<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>

<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>

<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>

<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>

<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>

<p><strong>Button</strong> based button:</p>
<button data-role="none">Button element</button>

<p><strong>Input type="button"</strong> based button:</p>
<input type="button" value="Input type=button" data-role="none" />

<p><strong>Input type="submit"</strong> based button:</p>
<input type="submit" value="Input type=submit" data-role="none" />

<p><strong>Input type="reset"</strong> based button:</p>
<input type="reset" value="Input type=reset" data-role="none" />

<p><strong>Input type="image"</strong> based button:</p>
<input type="image" src="http://jquerymobile.com/demos/1.0a4.1/docs//_assets/images/jquery-logo.png" style="width:120px; padding:5px; background:#fff; border:1px solid #999;" value="Input type=image" data-role="none" />
</div>