jQuery를 모바일 텍스트 입력
입력 필드는 표준 HTML 요소로 코딩하고, jQuery를 모바일은 매력적이고 사용하기 쉬운 모바일 장치에 대한보고 그 스타일을 것입니다. 또한 새로운 HTML5 사용할 수 있습니다 <input> 유형 :
예
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input
type="text" name="fullname" id="fullname">
<label
for="bday">Date of Birth:</label>
<input type="date" name="bday"
id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
</form>
»그것을 자신을 시도 텍스트 영역
사용 <textarea> 멀티 라인 텍스트 입력을위한입니다.
참고 : 텍스트 영역이 자동으로 텍스트를 입력 할 때 새로운 라인에 맞게 성장할 것입니다.
예
<label for="info">Additional Information:</label>
<textarea
name="addinfo" id="info"></textarea>
»그것을 자신을 시도 검색 입력
입력 type="search" HTML5의 새로운 기능이며, 검색을 입력하기위한 텍스트 필드를 정의합니다 :
라디오 버튼
사용자가 단지 제한된 개수의 선택 중 하나를 선택할 때의 라디오 버튼을 사용한다.
라디오 버튼 세트를 만들려면,과 입력을 추가 type="radio" 와 대응하는 레이블입니다. A의 라디오 버튼을 감싸 <fieldset> 요소입니다. 또한 추가 할 수 있습니다 <legend> 에 대한 캡션을 정의하는 요소를 <fieldset> .
팁 : 사용 data-role="controlgroup" , 그룹에 버튼을 함께 :
예
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose your
gender:</legend>
<label
for="male">Male</label>
<input
type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input
type="radio" name="gender" id="female" value="female">
</fieldset>
</form>
»그것을 자신을 시도 체크 박스
체크 박스는 사용자가 선택의 제한된 수의 하나 이상의 옵션을 선택할 수있을 때 사용된다 :
예
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose as many
favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input
type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input
type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input
type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
»그것을 자신을 시도 더 예
수평 그룹 라디오 버튼이나 체크 박스에, 사용 data-type="horizontal" :
당신은 또한 주위에 필드 컨테이너를 포장 할 수 있습니다 <fieldset> :
예
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
»그것을 자신을 시도 당신이 원하는 경우 버튼 중 하나가되게합니다 "pre-selected" 의 HTML 사용 <input> 확인 속성 :
또한 팝업 내부의 양식을 배치 할 수 있습니다 :
예
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>
<div
data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.asp">
<div>
<h3>Login information</h3>
<label for="usrnm" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="usrnm" placeholder="Username">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">
</div>
</form>
</div>
»그것을 자신을 시도