HTML

HTML

COME UTILIZZARE I TAG

Cos'È un tag in html?

TAG IN HTML

In HTML, il tag è un elemento che viene utilizzato per definire l'inizio e la fine di un'area di contenuto all'interno di una pagina web. Il tag viene indicato utilizzando parentesi angolari "<>" e contiene una parola o un insieme di parole che rappresentano l'elemento HTML, come ad esempio "p" per un paragrafo, "img" per un'immagine, "a" per un link, "div" per un'area di contenuto generica, e così via.

TAG PRINCIPALI:

Label

Form

Button

Input

Select

Output

Datalist

Textarea

Optgroup

Fieldset

IL TAG FORM

01

Il tag HTML <form> è utilizzato per creare un formulario interattivo in una pagina web. Il tag <form> può contenere diversi elementi HTML, come campi di input, pulsanti, caselle di controllo, tabelle ecc.

Il tag <form> ha diversi attributi, tra cui l'attributo "action" che indica la pagina del server web che elabora i dati del formulario, e l'attributo "method" che specifica il metodo HTTP utilizzato per inviare i dati del formulario al server. Il metodo più comune è "POST", che invia i dati del formulario in modo sicuro al server.

ESEMPIO

IL TAG BUTTON

02

Il tag <button> in HTML viene utilizzato per creare un pulsante interattivo sulla pagina web. Questo tag può essere utilizzato per una vasta gamma di scopi, come l'invio di un modulo, l'avvio di un'azione, la visualizzazione di un'immagine o l'apertura di una finestra pop-up.

ESEMPIO

IL TAG SELECT

03

Il tag <select> in HTML viene utilizzato per creare un menu a tendina, ovvero un elenco di opzioni tra cui l'utente può scegliere una sola voce. L'elemento <select> deve essere utilizzato insieme all'elemento <option>, che definisce ciascuna opzione dell'elenco. Il testo visualizzato per ogni opzione viene definito all'interno dell'elemento <option>, mentre il valore associato all'opzione viene specificato tramite l'attributo <value>. Il tag <select> è molto utile per creare form in HTML, consentendo agli utenti di selezionare una opzione da un elenco predefinito.

ESEMPIO

IL TAG TEXTAREA

04

Il tag <textarea> in HTML viene utilizzato per creare un'area di testo multi-linea, dove l'utente può inserire o modificare il testo. A differenza dell'elemento <input>, che consente solo l'inserimento di una riga di testo, l'elemento <textarea> consente di inserire più righe di testo. Il tag "textarea" è molto utile per creare form in HTML, quando è necessario che gli utenti inseriscano una quantità significativa di testo, come ad esempio nei commenti o nei messaggi.

ESEMPIO

IL TAG FIELDSET

05

Il tag HTML <fieldset> viene utilizzato per creare un gruppo di campi di input all'interno di un form. Il tag <fieldset> è utilizzato per raggruppare insieme campi di input correlati in un form e può includere un tag <legend> per fornire un'indicazione del contenuto della sezione. Il tag <fieldset> è utile per organizzare i campi di input in un modo più chiaro e leggibile, migliorando l'esperienza utente del form.

ESEMPIO

IL TAG LABEL

06

Il tag HTML <label> viene utilizzato per creare una descrizione o un'etichetta per un elemento di input in un form. Il tag <label> è associato a un campo di input tramite l'attributo "for", che specifica l'ID del campo di input a cui l'etichetta è associata. In questo modo, quando l'utente clicca sull'etichetta, il campo di input corrispondente viene attivato. Il tag "label" è importante per l'accessibilità del sito web, in quanto consente agli utenti che utilizzano lettori di schermo di comprendere il significato dei campi di input e delle informazioni richieste.

ESEMPIO

IL TAG INPUT

07

Il tag <input> è uno dei tag più importanti in HTML, in quanto permette di creare campi di input all'interno di un form. Esso può essere utilizzato per creare campi di testo, caselle di controllo, pulsanti di opzione, menu a discesa, campi di selezione, campi di inserimento di date e ora e molti altri. Il tipo di campo di input viene specificato tramite l'attributo <type>, che può assumere una vasta gamma di valori, tra cui <text>, <checkbox>, <radio>, <select>, <date>, <time> e molti altri.

ESEMPIO

IL TAG OUTPUT

08

Il tag <output> viene utilizzato per rappresentare il risultato di un calcolo o di un'elaborazione effettuata dal sito web. Esso consente di visualizzare i risultati di calcoli o di processi dinamici, come ad esempio la somma di due numeri inseriti dall'utente. Il tag <output> può contenere il risultato di una funzione JavaScript o di un calcolo effettuato da un server.

IL TAG DATALIST

09

Il tag <datalist> viene utilizzato per creare un elenco di opzioni predefinite che possono essere selezionate da un campo di input. Questo tag è utilizzato in combinazione con il tag <input> di tipo <text> o <search>. L'elenco di opzioni viene specificato tramite i tag <option> all'interno del tag <datalist>. Quando l'utente inizia a digitare all'interno del campo di input, vengono visualizzate le opzioni corrispondenti all'interno della lista a discesa, rendendo più facile la selezione dell'opzione desiderata.

ESEMPIO

IL TAG OPTGROUP

10

Il tag <optgroup> viene utilizzato per creare gruppi di opzioni all'interno di un menu a discesa o di un campo di selezione. Esso consente di organizzare le opzioni in categorie o sotto-categorie, migliorando l'usabilità e la leggibilità del menu. Gli elementi di opzione all'interno del tag "optgroup" vengono raggruppati in base al valore dell'attributo <label>, che specifica il nome del gruppo.

ESEMPIO

<form action="process.php" method="POST"> <label for="name">Nome:</label> <input type="text" id="name" name="name"> <br> <label for="email">Email:</label> <input type="email" id="email" name="email"> <br> <input type="submit" value="Invia"> </form>

TAG FORM

<html> <button type="button" onclick="alert('Hai cliccato il pulsante!')">Clicca qui</button> </html>

TAG BUTTON

<html> <label for="frutta-preferita">Seleziona la tua frutta preferita:</label> <select id="frutta-preferita" name="frutta-preferita"> <option value="mela">Mela</option> <option value="banana">Banana</option> <option value="arancia">Arancia</option> <option value="kiwi">Kiwi</option> <option value="pesca">Pesca</option> </select> </html>

TAG SELECT

<html> <label for="commento">Lascia un commento:</label> <textarea id="commento" name="commento" rows="4" cols="50"> </textarea> </html>

TAG TEXTAREA

<html> <fieldset> <legend>Informazioni personali</legend> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome"><br> <label for="cognome">Cognome:</label> <input type="text" id="cognome" name="cognome"><br> </fieldset> </html>

TAG FIELDSET

<html> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome"> </html>

TAG LABEL

<html> <label for="email">Email:</label> <input type="email" id="email" name="email" required> </html>

TAG INPUT

<html> <label for="automobile">Seleziona un'automobile:</label> <input list="automobili" id="automobile" name="automobile"> <datalist id="automobili"> <option value="BMW"> <option value="Fiat"> <option value="Ford"> <option value="Mercedes"> <option value="Peugeot"> <option value="Renault"> </datalist> </html>

TAG DATALIST

<html> <label for="automobile">Seleziona un'automobile:</label> <select id="automobile" name="automobile"> <optgroup label="Auto italiane"> <option value="fiat">Fiat</option> <option value="alfa">Alfa Romeo</option> <option value="lancia">Lancia</option> </optgroup> <optgroup label="Auto tedesche"> <option value="bmw">BMW</option> <option value="audi">Audi</option> <option value="mercedes">Mercedes</option> </optgroup> <optgroup label="Auto giapponesi"> <option value="toyota">Toyota</option> <option value="nissan">Nissan</option> <option value="honda">Honda</option> </optgroup> </select> </html>

TAG OPTGROUP