Tipi di input HTML
Questo capitolo descrive i diversi tipi per l' <input>elemento HTML.
Tipi di input HTML
Ecco i diversi tipi di input che puoi utilizzare in HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Suggerimento: il valore predefinito typedell'attributo è "testo".
Tipo di input testo
<input type="text">definisce un
campo di input di testo a riga singola :
Esempio
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Nome di battesimo:Cognome:
Immettere la password di tipo
<input type="password">definisce un campo password :
Esempio
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Nome utente:Parola d'ordine:
I caratteri in un campo password sono mascherati (mostrati come asterischi o cerchi).
Tipo di input Invia
<input type="submit">definisce un pulsante per
inviare i dati del modulo a un gestore del modulo .
Il gestore del modulo è in genere una pagina del server con uno script per l'elaborazione dei dati di input.
Il gestore del modulo è specificato nell'attributo del modulo action
:
Esempio
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Se ometti l'attributo del valore del pulsante di invio, il pulsante riceverà un testo predefinito:
Esempio
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Tipo di ingresso Reset
<input type="reset">definisce un pulsante di ripristino
che ripristinerà tutti i valori del modulo ai valori predefiniti:
Esempio
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Se si modificano i valori di input e quindi si fa clic sul pulsante "Reset", i dati del modulo verranno ripristinati ai valori predefiniti.
Tipo di ingresso Radio
<input type="radio">definisce un pulsante di opzione .
I pulsanti di opzione consentono all'utente di selezionare SOLO UNA di un numero limitato di scelte:
Esempio
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Casella di controllo del tipo di input
<input type="checkbox">definisce una casella di controllo .
Le caselle di controllo consentono a un utente di selezionare ZERO o PIÙ opzioni di un numero limitato di scelte.
Esempio
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Pulsante tipo di ingresso
<input type="button">definisce un pulsante :
Esempio
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Tipo di input Colore
Viene utilizzato per i <input type="color">campi di input che dovrebbero contenere un colore.
A seconda del supporto del browser, nel campo di immissione può essere visualizzato un selettore colore.
Esempio
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Tipo di input Data
Viene utilizzato per i <input type="date">campi di input che devono contenere una data.
A seconda del supporto del browser, nel campo di immissione può essere visualizzato un selettore di data.
Esempio
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
Puoi anche utilizzare gli attributi mine maxper aggiungere restrizioni alle date:
Esempio
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
Tipo di input Data e ora locale
Specifica un campo di <input type="datetime-local">immissione di data e ora, senza fuso orario.
A seconda del supporto del browser, nel campo di immissione può essere visualizzato un selettore di data.
Esempio
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Tipo di input E-mail
Viene utilizzato per i <input type="email">campi di input che devono contenere un indirizzo e-mail.
A seconda del supporto del browser, l'indirizzo e-mail può essere convalidato automaticamente al momento dell'invio.
Alcuni smartphone riconoscono il tipo di e-mail e aggiungono ".com" alla tastiera in modo che corrisponda all'input e-mail.
Esempio
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Tipo di input File
Definisce un campo di <input type="file">
selezione dei file e un pulsante "Sfoglia" per i caricamenti di file.
Esempio
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Tipo di input Nascosto
Il <input type="hidden">
definisce un campo di input nascosto (non visibile a un utente).
Un campo nascosto consente agli sviluppatori Web di includere dati che non possono essere visualizzati o modificati dagli utenti quando viene inviato un modulo.
Un campo nascosto spesso memorizza il record del database che deve essere aggiornato quando viene inviato il modulo.
Nota: sebbene il valore non venga visualizzato all'utente nel contenuto della pagina, è visibile (e può essere modificato) utilizzando gli strumenti per sviluppatori di qualsiasi browser o la funzionalità "Visualizza sorgente". Non utilizzare input nascosti come forma di sicurezza!
Esempio
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
Tipo di input Mese
<input type="month">Consente all'utente di selezionare un mese e un anno .
A seconda del supporto del browser, nel campo di immissione può essere visualizzato un selettore di data.
Esempio
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Immettere il numero del tipo
Il <input type="number">definisce un campo di input
numerico .
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |