HTML5 Proprietà modulo

Proprietà HTML5 nuova forma

di HTML5 <form> e <input> tag aggiunge diverse nuove proprietà.

<form> nuovi attributi:

• completamento automatico
• novalidate

<input> Nuove proprietà:

• completamento automatico
• autofocus
• modulo
• FormAction
• formenctype
• formmethod
• formnovalidate
• formtarget
• altezza e larghezza
• lista
• min e max
• multiplo
• modello (regexp)
• segnaposto
• richiesto
• passo

<Form> / <input> attributo di completamento automatico

attributo autocomplete specifica il campo di modulo o di input dovrebbe avere completamento automatico.

Quando gli utenti iniziano a digitare nel campo di completamento automatico, il browser deve visualizzare le opzioni per compilare questo campo.

attributoautocomplete possibile elemento di modulo è acceso, e l'elemento di ingresso è spento: Tip.

Nota: applicare autocomplete tag <form>, e le seguenti tipologie di tag <input>: text, search, url, telefono , e-mail, la password, datepickers, gamma e colore.

Esempi

modulo HTML a completamento automatico aperto (un campo di input di spegnimento completamento automatico):

<Form action = "demo-form.php" autocomplete = "on"> Nome : <input type = "text" name = "fname"> <br> Cognome: <input type = "text" name = "lname"> <br> E-mail: <input type = "email" name = "email" autocomplete = "off"> <br> <Input type = "submit"> </ Form>

Prova »

Suggerimento: Alcuni browser, potrebbe essere necessario attivare la funzionalità di completamento automatico, al fine di raccogliere la proprietà.

<Form> proprietà novalidate

Una proprietà booleana immobili novalidate.

attributo novalidate specifica quando l'invio del modulo non deve convalidare l'input forma o dominio.

Esempi

Senza la verifica invio dei dati del modulo

<Form action = "demo-form.php" novalidate> E-mail: <input type = "email" name = "user_email"> <Input type = "submit"> </ Form>

Prova »

<Input> attributo autofocus

attributo autofocus è un attributo booleano.

attributo autofocus specifica quando la pagina viene caricata, il dominio ricevono automaticamente messa a fuoco.

Esempi

Let "Nome" campo di immissione inserire la messa a fuoco automatica al caricamento della pagina:

First name:<input type="text" name="fname" autofocus>

Prova »

<Input> Proprietà modulo

attributo specifica un campo di inserimento modulo appartiene a uno o più moduli.

Suggerimento: per citare più di una forma, utilizzare un elenco separato da spazi.

Esempi

Situato nel Modulo di fuori del campo di input si riferisce al modulo HTML (il modulo è ancora un ingresso modulo fa parte):

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

Prova »

<Input> proprietà FormAction

La proprietà FormAction è usato per descrivere l'URL del modulo di presentazione.

Il FormAction attributi di override <form> nel attributo action.

Nota: L'attributo FormAction type = "submit" e type = "image".

Esempi

HtmlForm invia il seguente modulo contiene pulsante due diversi indirizzi:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

Prova »

<Input> proprietà formenctype

formenctype attributo descrive il modulo viene inviato per la codifica dei dati del server (solo per il metodo di modulo form = "post" modulo)

modifiche locali delle proprietà formenctype ENCTYPE attribuire elementi del modulo.

Principale: Questo tipo di attributo = "submit" e type = "image" utilizzato in combinazione.

Esempi

Il primo pulsante Invia per inviare i dati del form è codificato per impostazione predefinita, il secondo pulsante di invio per "multipart / form-data" formato di codifica per inviare i dati del modulo:

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

Prova »

<Input> proprietà formmethod

attributo formmethod definisce l'invio del modulo strada.

Proprietà formmethod che copre il <form> di attributo il metodo di elemento.

Nota: questo attributo può essere utilizzato con type = "submit" e type = "image" utilizzato in combinazione.

Esempi

Ridefinire il modulo di presentazione a titolo di esempio:

<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

Prova »

<Input> proprietà formnovalidate

proprietà novalidate è una proprietà booleana.

attributo novalidate descrive i <input> elementi non devono essere convalidati quando il modulo viene inviato.

attributi formnovalidate sovrascrivono attributo novalidate <form> elemento.

Nota: formnovalidate attributo type = "submit per l'uso con

Esempi

Due pulsanti inviare il modulo (non applicabile con verifica):

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

Prova »

<Input> proprietà formtarget

attributo formtarget specifica un nome o una parola chiave per indicare i dati di visualizzazione ricevuti dopo il modulo viene inviato.

Le modifiche locali delle proprietà formtarget <form> attributo target dell'elemento.

Nota: formtarget attributo type = "submit" e digitare = "image" utilizzato in combinazione.

Esempi

Due pulsanti inviare il modulo visualizzato in diverse finestre:

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>

Prova »

attributi <input> altezza e larghezza

altezza e larghezza attributi specifici per il tipo di immagine di <input> altezza dell'immagine tag e larghezza.

Nota: altezza e larghezza proprietà valgono solo per il tipo di immagine tag <input>.

Suggerimento: L'immagine di solito specificare l'altezza e la larghezza attributi.Se l'immagine impostare l'altezza e la larghezza dello spazio richiesto per l'immagine quando verrà mantenuto la pagina. Senza questi attributi, il browser non conosce la dimensione dell'immagine, e non può mettere da parte lo spazio adeguato. Foto durante il processo di caricamento influenzeranno il layout di pagina cambiamento (anche se l'immagine è stata caricata).

Esempi

Definisce un'immagine pulsante di invio, utilizzare l'altezza e la larghezza attributi:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Prova »

<input> proprietà di elenco

attributo lista DataList specifica i campi di input. DataList è una lista di opzioni per i campi di input.

Esempi

Predefiniti in <DataList> in <input> valore:

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Prova »

<Input> min e max attributi

min, max, e gli attributi di passo sono utilizzati come tipi di input che contengono numeri o date Limited (vincoli).

Nota: min, max, e gli attributi passo si applicano ai seguenti tipi di tag <input>: data raccoglitori, il numero e la gamma.

Esempi

<Input> elementi della impostazioni minime e massime:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Prova »

<input> più proprietà

attributo multiple è un attributo booleano.

più specifica degli attributi elemento <input> Per selezionare più valori.

Nota: più proprietà si applicano ai seguenti tipi di tag <input>: e-mail e file:

Esempi

Carica più file:

Select images: <input type="file" name="img" multiple>

Prova »

<Input> proprietà modello

attributo modello descrive una espressione regolare utilizzata per convalidare il valore degli elementi <input>.

Nota: l'attributo modellosi applica ai seguenti tipi di tag <input>: text, search, url, tel , email, e la password.

Suggerimento: E 'utilizzato per il mondiale titolo attributo descrive la modalità.

Suggerimento: è possibile nel nostro JavaScript tutorial per conoscere il contenuto di una espressione regolare

Esempi

L'esempio seguente mostra un tre lettere contengono solo campo di testo (non numeri o caratteri speciali):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Prova »

<Input> attributo segnaposto

attributo placeholder fornisce un suggerimento (suggerimento), descrivono il valore atteso del campo di input.

Un breve promemoria verrà visualizzato sul campo di immissione prima del valore input dell'utente.

Nota: l'attributo placeholdersi applica ai seguenti tipi di tag <input>: text, search, url, telefono , e-mail e la password.

Esempi

campo di inserimento t testo del prompt:

<input type="text" name="fname" placeholder="First name">

Prova »

<Input> attributo obbligatorio

attributo richiesto è un attributo booleano.

attributo richiesto specifica che un campo di input deve essere riempito (non vuota) prima della presentazione.

Nota: gli attributi richiestiper le seguenti tipologie di tag <input>: text, search, url, telefono , email, password, data raccoglitori, il numero, checkbox, radio e file.

Esempi

Non campi di input vuoto può:

Username: <input type="text" name="usrname" required>

Prova »

<input> attributi passo

attributo step per il campo di input specifica gli intervalli di numero legale.

Se passo = "3", i numeri legali potrebbero essere -3,0,3,6, ecc

Suggerimento: attributo stepin grado di creare un valore massimo regionale e gli attributi min.

Nota: attributo passo tipi utilizzati in combinazione con il seguente tipo: numero, gamma, data, datetime , datetime-local, il mese, il tempo e la settimana.

Esempi

Predeterminato passo passo ingresso 3:

<input type="number" name="points" step="3">

Prova »

HTML5 tag <input>