jQuery Mobile modulo di input
casella di testo jQuery Mobile
Inserire il campo attraverso l'HTML standard elementi di codifica, jQuery Mobile aggiungerà il loro stile per farlo sembrare più attraente e più facile da utilizzare su dispositivi mobili. È inoltre possibile utilizzare il nuovo HTML5 <input> Tipo:
Esempi
<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>
Prova »
Suggerimento: Usa segnaposto per specificare una breve descrizione che descrive il valore atteso del campo di input:
<input placeholder="sometext">
campo di testo
Per multi-riga di immissione testo può utilizzare <textarea>.
NOTA: Quando si digita il testo, i campi di testo saranno ridimensionate automaticamente per adattarsi alla riga appena aggiunta.
Esempi
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>
Prova »
casella di input di ricerca
type = "search" tipo di casella di input è nuovo in HTML5, che è definito come un testo di input campi di ricerca:
Esempi
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>
Prova »
pulsante Radio
Quando gli utenti selezionano un numero limitato di selezionare una sola opzione quando si utilizzano i pulsanti di opzione.
Al fine di creare una serie di pulsanti di opzione, aggiungere l'ingresso e la relativa etichetta con type = "radio" è. Il pulsante di scelta racchiuso all'interno dell'elemento <fieldset>. È inoltre possibile aggiungere un titolo <legend> elemento per definire <fieldset>.
Suggerimento: Usa data-role = "controllo alimentati" per mettere insieme:
Esempi
<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>
Prova »
casella di controllo
Quando l'utente seleziona una o più opzioni in un numero limitato di scelte, scatole di uso di controllo:
Esempi
<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>
Prova »
Altri esempi
Per una combinazione di pulsanti di opzione orizzontali o caselle di controllo, utilizzare il tipo di dati = "orizzontale":
È inoltre possibile utilizzare un campo Contenitore circondato da <fieldset>:
Esempi
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>
Prova »
Se si desidera che il pulsante in una attributi pre-selezionato, utilizzare il codice HTML <input> è controllato:
È possibile pop in sulla forma:
Esempi
<Div data-role = "pop-up" id = "myPopup" class = "ui-content">
<Form method = "post" action = "demoform.php">
<Div>
<H3> Informazioni accesso </ h3>
<Label for = classe "usrnm" = "ui-nascosto-accessibile"> Nome utente: </ label>
<Input type = "text" name = "user" id = "usrnm" segnaposto = "username">
<Label for = classe "pswd" = "ui-nascosto-accessibile"> Password: </ label>
<Input type = "password" name = "passw" id = "pswd" segnaposto = "password">
</ Div>
</ Form>
</ Div>
Prova »