jQuery Mobile formu giriş elementleri

jQuery Mobile metin girişi

Giriş alanları standart HTML elementleri ile yazılmıştır, jQuery Mobile bunlar için mobil cihazlara özel güzel ve kullanışlı stiller uygular. Ayrıca yeni HTML5 <input> türlerini kullanabilirsiniz:

Örnek

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Tam ad:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Doğum günü:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">E-posta:</label>
    <input type="email" name="email" id="email" placeholder="E-posta adresiniz..">
  </div>
</form>

Kişisel Olarak Deneyin

Hint:Placeholder kullanarak kısa bir ipucu belirleyin, giriş alanının beklendiği değeri tanımlayın:

<input placeholder="sometext">

Metin kutusu

<textarea> kullanarak çok satırlı metin girişi gerçekleştirin.

Açıklama:Metin kutusu, girdiğiniz metin satırlarına uyum sağlamak için otomatik olarak genişler.

Örnek

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

Kişisel Olarak Deneyin

Ara çubuğu

Giriş türü type="search", HTML5'teki yeni türdür ve arama kelimelerini girmek için metin alanı tanımlamak için kullanılır:

Örnek

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

Kişisel Olarak Deneyin

Tek seçenek düğmesi

Kullanıcı sınırlı sayıda seçenekten birini seçtiğinde, tek seçenek düğmesi kullanılır.

Bir seçenek grubu oluşturmak için type="radio" olan bir input elementi ve ilgili label ekleyin. Seçenekleri <fieldset> elementi içinde paketleyin. Ayrıca <legend> elementi ekleyerek <fieldset> başlığını tanımlayabilirsiniz.

Hint:Use the data-role="controlgroup" attribute to group these buttons:

Örnek

<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>

Kişisel Olarak Deneyin

Checkbox

Checkboxes are used when the user selects one or more options from a limited number of options:

Örnek

<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>

Kişisel Olarak Deneyin

More examples

To group radio buttons or checkboxes horizontally, use the data-type="horizontal" attribute:

Örnek

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

Kişisel Olarak Deneyin

You can also use fieldset container to wrap <fieldset>:

Örnek

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

Kişisel Olarak Deneyin

Bir düğmeyi "önbelirtmek" istiyorsanız, HTML <input> etiketinin checked özelliğini kullanın:

Örnek

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

Kişisel Olarak Deneyin