Textinput jQuery Mobile
Câmpurile de introducere sunt codificate cu elemente HTML standard, și jQuery Mobile le va stil pentru a arata atractiv și ușor de utilizat pentru dispozitivele mobile. Puteți utiliza , de asemenea , noile HTML5 <input> tipuri:
Exemplu
<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>
Încearcă - l singur » zonă de text
Utilizați <textarea> pentru intrări de text multi-linie.
Notă: Zona de text va crește în mod automat pentru a se potrivi linii noi pe măsură ce introduceți un text.
Exemplu
<label for="info">Additional Information:</label>
<textarea
name="addinfo" id="info"></textarea>
Încearcă - l singur » Căutare intrare
De intrare de type="search" este nou în HTML5, și definește un câmp de text pentru introducerea unei căutări:
Exemplu
<label for="search">Search:</label>
<input
type="search" name="search" id="search">
Încearcă - l singur » Butoane radio
Butoanele radio sunt folosite atunci când un utilizator poate selecta doar una dintr-un număr limitat de opțiuni.
Pentru a crea un set de butoane radio, adăugați o intrare cu type="radio" și o etichetă corespunzătoare. Înfășurați butoanele radio într - un <fieldset> Element. Puteți adăuga , de asemenea , o <legend> Element pentru a defini o legendă pentru <fieldset> .
Sfat: Utilizați data-role="controlgroup" , pentru a grupa butoanele împreună:
Exemplu
<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>
Încearcă - l singur » Casetele de selectare
Casetele de selectare sunt utilizate atunci când un utilizator poate selecta una sau mai multe opțiuni ale unui număr limitat de opțiuni:
Exemplu
<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>
Încearcă - l singur » Mai multe exemple
Pentru butoane radio de grup sau casetele orizontal, utilizați data-type="horizontal" de data-type="horizontal" :
Puteți încheia , de asemenea , un container de câmp în jurul valorii de <fieldset> :
Exemplu
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
Încearcă - l singur » Dacă doriți ca unul dintre butoanele pentru a fi "pre-selected" , utilizați HTML <input> atribut verificat:
Puteți plasa, de asemenea, forma în interiorul unui pop-up:
Exemplu
<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>
Încearcă - l singur »