Latest web development tutorials

jQuery를 모바일 입력을 형성

jQuery를 모바일 텍스트 입력 상자

요소를 코딩 표준 HTML을 통해 필드를 입력 jQuery를 모바일은 모바일 기기에 사용하는 것이 더 매력적이고 더 쉽게 보이게하기 위해 자신의 스타일을 추가합니다. 또한 새로운 HTML5 <입력> 입력을 사용할 수 있습니다 :

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="fullname">全名:</label>
<input type="text" name="fullname" id="fullname">

<label for="bday">生日:</label>
<input type="date" name="bday" id="bday">

<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="你的电子邮箱..">
</div>
</form>

»시도

팁 : 자리 입력 필드의 예상 값을 설명하는 간단한 설명을 지정합니다 :

<input placeholder="sometext">

텍스트 필드

멀티 라인 텍스트 입력은 <텍스트 영역> 사용할 수 있습니다.

참고 : 텍스트를 입력 할 때 텍스트 필드가 자동으로 새로 추가 된 행에 맞게 크기가 조정됩니다.

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>

»시도


검색 입력 창

= "검색"을 입력 입력 상자의 유형은 입력 텍스트 검색 필드로 정의 HTML5, 새로운 기능입니다 :

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>

»시도


라디오 버튼

라디오 버튼을 이용할 경우 사용자가 선택한 하나의 옵션의 수가 제한을 선택할 때.

입력과 TYPE = "무선"으로 해당 라벨, 라디오 버튼의 시리즈를 생성 추가하기 위해서이다. 의 <FIELDSET> 요소 내에 동봉 된 라디오 버튼을 누릅니다. 또한 <전설> 요소를 정의하는 <FIELDSET> 제목을 추가 할 수 있습니다.

팁 : 데이터-역할 = "controlgroup은"버튼을 함께 넣어 :

<form method="post" action="demo_form.php">
<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="demo_form.php">
<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>

»시도


예

더 많은 예제

또는 수평 라디오 버튼의 조합은 데이터 유형 = "수평"을 사용 체크 박스를 선택 :

<fieldset data-role="controlgroup" data-type="horizontal">

»시도

또한 <FIELDSET>로 둘러싸인 컨테이너 필드를 사용할 수 있습니다 :

<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>

»시도

당신은 미리 선택된의 HTML <입력>을 사용하는 체크 특성에 버튼을 원하는 경우 :

<input type="radio" checked>
<input type="checkbox" checked>

»시도

당신은 양식에 팝업 수 있습니다 :

<a href="#myPopup" data-rel="popup" class="ui-btn보기 팝업 양식 </a> ui-btn-inline">

<사업부의 데이터 역할 = "팝업"ID = "MyPopup을"클래스 = "UI 콘텐츠">
<양식 방법 = "게시물"행동 = "demoform.php">
<DIV>
<H3> 로그인 정보 </ H3>
<= "usrnm"클래스 레이블 = "UI - 숨겨진 접근"> 이름 : </ 라벨>
<입력 유형 = "텍스트"이름 = "사용자"ID = "usrnm"자리 = "이름">
<라벨 = "PSWD"클래스 = "UI - 숨겨진 접근"> 비밀번호 : </ 라벨>
<입력 유형 = "암호"이름 = "passw"ID = "PSWD"자리 = "암호">
</ DIV>
</ FORM>
</ DIV>

»시도