L'HTML form è una parte cruciale dello sviluppo web che consente agli utenti di interagire con un sito Web e inviare dati a un server. Form vengono utilizzati per un'ampia gamma di scopi, come la raccolta delle form informazioni dell'utente, l'elaborazione dell'input dell'utente e l'abilitazione delle azioni dell'utente su un sito web. In questo articolo, esploreremo gli attributi e i diversi tipi di campi di input, elementi di selezione, aree di testo e pulsanti comunemente utilizzati in HTML form.
Campi di input
<input type="text">: crea un campo di immissione testo in cui gli utenti possono inserire caratteri alfanumerici.<input type="password">: Visualizza un campo di immissione della password che maschera i caratteri immessi.<input type="email">: Fornisce la convalida e-mail per i campi di input che richiedono un indirizzo e-mail valido.<input type="number">: Limita l'input solo ai valori numerici.<input type="checkbox">: rappresenta una casella di controllo che gli utenti possono selezionare o deselezionare.<input type="radio">: rappresenta un pulsante di opzione che consente agli utenti di selezionare un'opzione da un gruppo di opzioni.<input type="file">: consente agli utenti di selezionare e caricare i file.<input type="submit">: Visualizza un pulsante che invia form quando viene cliccato.<input type="reset">: Visualizza un pulsante che riporta form al suo stato iniziale.<input type="date">: Fornisce un selettore di date per la selezione delle date.<input type="time">: consente agli utenti di inserire i valori temporali.
Seleziona Elementi
<select>: crea un menu a discesa con opzioni selezionabili.<option>: definisce un'opzione all'interno del menu a discesa, posizionata all'interno del<select>tag.<optgroup>: Raggruppa le opzioni correlate all'interno del menu a discesa.<select multiple>: consente agli utenti di selezionare più opzioni contemporaneamente tenendo premuto il tasto Ctrl(o il tasto Comando su Mac) mentre si fa clic.
Aree di testo
<textarea>: crea un campo di immissione testo su più righe in cui gli utenti possono inserire e modificare blocchi di testo più lunghi. Può essere ridimensionato e configurato con attributi come rows e cols per definirne le dimensioni.
Bottoni
<button>: Rappresenta un pulsante che può attivare varie azioni all'interno di un file form. Può essere utilizzato per inviare un form, tramite form una funzione JavaScript o passare a una pagina diversa.
Esempio di utilizzo:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="submit">Submit</button>
</form>
Questo esempio mostra l'utilizzo di vari form elementi, inclusi input campi, textarea, e un pulsante. Sentiti libero di personalizzare gli elementi e gli attributi in base alle tue esigenze specifiche. checkbox select dropdown submit form