jQuery Mobile 폼 입력 요소

jQuery Mobile 텍스트 입력

입력 필드는 표준 HTML 요소로 작성되며, jQuery Mobile는 이들을 모바일 기기에 대한 아름다운 미적과 쉬운 스타일로 설정합니다. 또한 새로운 HTML5 <input> 유형을 사용할 수 있습니다:

예제

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <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">이메일:</label>
    <input type="email" name="email" id="email" placeholder="귀하의 이메일 주소..">
  </div>
</form>

직접 시도해 보세요

提示：placeholder를 사용하여 입력 필드의 예상 값을 설명하는 짧은 힌트를 지정하세요:

<input placeholder="sometext">

텍스트 상자

다중 행 텍스트 입력을 위해 <textarea>를 사용하세요.

주의:텍스트 상자는 입력한 텍스트 행에 맞춰 자동으로 확장됩니다.

예제

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">추가 정보:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

직접 시도해 보세요

검색 상자

입력 유형 type="search"는 HTML5에서 새로운 유형으로, 검색 단어를 입력하는 텍스트 필드를 정의하는 데 사용됩니다:

예제

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

직접 시도해 보세요

단일 선택 버튼

사용자가 제한된 수의 옵션 중 하나를 선택할 때 단일 선택 버튼을 사용합니다.

단일 선택 버튼 집합을 생성하려면 type="radio"의 input 요소와相应的 label을 추가하세요. <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 data-role="controlgroup" data-type="horizontal">

직접 시도해 보세요

您也可以使用域容器来包装 <fieldset>：

예제

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
  </fieldset>
</div>

직접 시도해 보세요

하나의 버튼을 "선택"하려면, HTML <input> 태그의 checked 속성을 사용하세요:

예제

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

직접 시도해 보세요