Tag relativi ai moduli

Questo articolo spiega i tag relativi ai moduli.

Questo spiega vari campi del modulo come input di testo e menu a tendina.

YouTube Video

Tag relativi ai moduli

Tag <form>

1<form action="/submit" method="post">...</form>

• Il tag <form> viene utilizzato per definire l'intero modulo.
• L'attributo action specifica la destinazione e l'attributo method specifica il metodo (GET o POST).
• Puoi anche specificare l'attributo target, simile al tag <a>.

Tag <input> (campo di input testuale)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> crea un campo di input di testo a riga singola. Gli utenti possono inserire qualsiasi testo.

• L'attributo placeholder specifica un testo descrittivo che appare quando il campo di input è vuoto. Questo aiuta gli utenti a comprendere facilmente l'input previsto. Questo testo scompare automaticamente quando si inizia a digitare.

  • placeholder è adatto per fornire informazioni supplementari e non è adatto per istruzioni importanti come l'input obbligatorio. In tali casi, dovresti usare un'etichetta.

Tag <input> (campo di input per password)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> crea un campo per l'inserimento di password. I caratteri inseriti sono nascosti e mascherati per garantire la sicurezza.

Tag <input> (campo di input per indirizzo email)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> crea un campo per l'inserimento di un indirizzo email e include la convalida per garantire il formato email corretto.

Tag <input> (casella di controllo)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> crea una casella di controllo. Quando ci sono più opzioni disponibili, gli utenti possono selezionare più elementi.

Tag <input> (pulsante di opzione)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> crea un pulsante di opzione che consente agli utenti di selezionare solo un'opzione da un insieme.

Tag <input> (pulsante di invio)

1<input type="submit" value="Submit">

• <input type="submit"> crea un pulsante per inviare i dati del modulo.
• Il valore dell'attributo value viene incluso nei dati del modulo quando viene inviato.

Tag <input> (Pulsante di ripristino)

1<input type="reset" value="Reset">

• <input type="reset"> crea un pulsante che ripristina tutti i valori di input nel modulo.

Tag <input> (campo nascosto)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> crea un campo nascosto che non viene visualizzato sullo schermo e viene utilizzato per inviare dati al backend quando il modulo viene inviato.

Tag <input> (selettore di colori)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> visualizza un selettore di colori e crea un campo di input per permettere agli utenti di selezionare un colore.

Tag <input> (campo di input data)

1<input type="date" name="birthday">

• <input type="date"> crea un campo di input per la data che visualizza un calendario per la selezione di una data.

Tag <input> (campo di input orario)

1<input type="time" name="appointment_time">

• <input type="time"> crea un campo per l'inserimento dell'ora e viene visualizzato un selettore di ora.

Tag <input> (campo di input file)

1<input type="file" name="resume">

• <input type="file"> crea un campo input per consentire agli utenti di selezionare e caricare file.
• L'attributo enctype del tag form deve essere impostato su multipart/form-data.

Tag <input> (numero)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> crea un campo di input numerico che permette di impostare il valore minimo, massimo e il passaggio (quantità di incremento/decremento).

Tag <input> (campo di selezione intervallo per numeri)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> crea un campo input in cui gli utenti possono selezionare un valore entro un intervallo utilizzando un cursore.

Tag <textarea>

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• Il tag <textarea> crea un campo di input di testo su più linee. È adatto per inserire testi lunghi o commenti.

Tag <select>

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• Il tag <select> crea un menu a tendina, e le opzioni sono definite con il tag <option>. Gli utenti possono selezionare uno o più elementi.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• Per abilitare selezioni multiple, aggiungi l'attributo multiple. Specificando questo attributo, le opzioni vengono visualizzate come una casella di elenco.

Tag <optgroup>

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• Il tag <optgroup> viene utilizzato per raggruppare elementi correlati insieme. L'attributo label ti permette di impostare un nome per il gruppo, offrendo opzioni chiare agli utenti anche se la lista è lunga.

Tag <label>

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• Il tag <label> definisce etichette per campi di input, checkbox e pulsanti radio, migliorando l'usabilità e l'accessibilità.
• Ad esempio, cliccare su un'etichetta può mettere a fuoco un campo di input o attivare/disattivare una casella di controllo.

Tag <fieldset>

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• Il tag <fieldset> raggruppa i controlli del modulo correlati, e il tag <legend> fornisce un titolo per il gruppo.

Tag <button>

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• Il tag <button> definisce un pulsante cliccabile che attiva l'invio del modulo o altre azioni.

  Quando è specificato type="button", funziona come un normale pulsante. Cliccando su di esso non viene inviato il modulo né attivate altre azioni predefinite. Si utilizza quando si desidera impostare azioni personalizzate con JavaScript.

  Quando è specificato type="submit", funziona come un pulsante di invio per il modulo. Quando si fa clic su questo pulsante, il modulo che lo contiene verrà inviato.

  Quando viene specificato type="reset", funziona come un pulsante di reset per il modulo. Facendo clic su di esso, tutti i campi di input del modulo verranno ripristinati al loro stato iniziale.

  Se l'attributo type non è specificato, alcuni browser potrebbero trattarlo come type="submit", quindi è consigliato specificare esplicitamente il tipo per garantire il comportamento previsto.

• Il tag <button> può includere altri contenuti HTML tra i tag di apertura e chiusura, rendendo possibile creare pulsanti con icone o testo complesso.

• Per un pulsante di invio usando il tag <input>, il valore dell'attributo value è incluso nei dati del modulo, ma con un tag <button>, non viene inviato di default.

  Specificando gli attributi name e value per un tag <button>, il suo valore può essere inviato come dati del modulo.

Tag <datalist>

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• Il tag <datalist> fornisce un elenco di opzioni selezionabili per l'elemento <input>. Gli utenti possono selezionare dall'elenco o inserire un proprio valore.

Tag <output>

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• Il tag <output> visualizza il risultato dei calcoli o delle interazioni dell'utente. È usato per visualizzare dinamicamente i risultati dei calcoli all'interno di moduli o script.
• Per l'attributo for, specifica gli ID degli elementi del modulo che desideri associare, separati da spazi.

Tag <progress>

1<progress value="70" max="100">70%</progress>

• Il tag <progress> mostra agli utenti il progresso di un'attività. Ad esempio, può indicare visivamente il progresso di un download di file o di un'installazione.

Tag <meter>

1<meter value="0.6">60%</meter>

• Il tag <meter> rappresenta una misurazione numerica all'interno di un intervallo noto. È utilizzato per visualizzare misurazioni come l'uso del disco o un indicatore di carburante all'interno di un intervallo specifico.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video