jQuery Mobile formu

jQuery Mobile, HTML formuna dokunmatik dostu ve güzel bir görünüm ekler.

jQuery Mobile form yapısı

jQuery Mobile, HTML form elementlerinin stillerini daha çekici ve kullanışlı hale getirmek için CSS kullanır.

jQuery Mobile'de aşağıdaki form kontrollerini kullanabilirsiniz:

  • Metin kutusu
  • Arama çubuğu
  • Tek seçim kutusu
  • Çekme kutusu
  • Seçim menüsü
  • Kaydırma çubuğu
  • Yansıtma değiştirici

jQuery Mobile formuyla çalışırken aşağıdaki bilgileri bilmelisiniz:

  • <form> elementi'ne method ve action özellikleri atanmalıdır
  • Her form element'e benzersiz bir "id" özelliği atanmalıdır. Bu id, sitesinin sayfalarında benzersiz olmalıdır. Bu, jQuery Mobile'nin tek sayfa navigasyon modelinin birçok farklı "sayfa"yı aynı anda sunmasına izin verdiğinden ötürü gereklidir.
  • Her form elemanının bir etiket (label) olması gerekir. Etiketin for özelliğini, elementin id'si ile eşleştirin.

Örnek

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

Kişisel Deneyim

Etiketi gizlemek için ui-hidden-accessible sınıfını kullanın. Bu, elementin placeholder özelliğini etiket olarak kullanmanız gerektiğinde oldukça yaygındır:

Örnek

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">İsim：</label>
  <input type="text" name="fname" id="fname" placeholder="İsim...">
</form>

Kişisel Deneyim

Alan Konteyneri

Etiket ve form elemanlarının geniş ekranlarda doğru şekilde görüntülenmesini sağlamak için data-role="fieldcontain" özellikli <div> veya <fieldset> elemanlarını etiket veya form elemanlarına sarın:

Örnek

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

Kişisel Deneyim

İpucu:fieldcontain özelliği, etiket ve form kontrollerinin stillerini sayfa genişliğine göre ayarlar. Sayfa genişliği 480px'den büyük olduğunda, etiket ve form kontrollerini aynı satıra yerleştirir. 480px'den küçük olduğunda, etiket form elemanının üzerinde yerleştirilir.

İpucu:jQuery Mobile'nın otomatik olarak tıklanabilir öğelere stil uygulamamasını önlemek için data-role="none" özelliğini kullanın:

Örnek

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"} data-role="none">

Kişisel Deneyim

jQuery Mobile'da Formu Gönderme

İpucu:jQuery Mobile formular otomatik olarak AJAX ile form gönderir ve sunucu yanıtı应用程序ın DOM'una entegre etmeye çalışır.