Una guida dettagliata per iniziare con i moduli HTML

Modulo HTML

Panoramica

I moduli HTML sono richiesti quando si desidera raccogliere alcuni dati dalla persona che visita il sito Web. Ad esempio, quando ti registri / accedi per applicazioni come Uber, Netflix o Facebook, inserisci informazioni come Nome, Email e Password tramite moduli HTML.

Ora impareremo tutti gli elementi richiesti per la creazione di un modulo.

NOTA: ho già aggiunto lo stile usando i CSS e quindi i miei elementi appariranno diversi, ma funzioneranno esattamente allo stesso modo.
Se vuoi rendere i tuoi elementi simili ai miei, puoi trovare il mio file CSS nei link indicati di seguito:
CSS personalizzato: https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
Normalizza CSS:
https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Elemento di forma

Questo è il primo elemento che impareremo. Questo elemento avvolge tutti gli altri elementi che entrano nella nostra forma. Questo è l'elemento del modulo.

Il nostro modulo non invierà i dati da nessuna parte perché non è collegato a un server. Per connettere il nostro modulo a un server ed elaborare i nostri dati, possiamo utilizzare qualsiasi linguaggio lato server come Node, Python, Ruby o PHP. La parte dell'elaborazione dei dati comporta due importanti attributi collegati all'elemento modulo. Diamo un'occhiata a quegli attributi.

attributi:

  1. action: l'attributo action è l'indirizzo web (URL) di un programma che elabora le informazioni inviate dal nostro modulo.
  2. metodo: è il metodo HTTP utilizzato dal browser per inviare il modulo, i possibili valori sono POST e GET.
  • POST: i dati dal corpo del modulo vengono inviati al server.
  • OTTIENI: i dati vengono inviati all'interno dell'URL e i parametri sono separati da un punto interrogativo.
Nota: non è possibile nidificare i moduli all'interno di un altro modulo. Ciò significa che non puoi avere un elemento
all'interno di un altro elemento .

Elemento di input

L'elemento input è l'elemento modulo più comunemente usato. Viene utilizzato per creare un campo di testo in cui l'utente può digitare alcune informazioni, ad esempio e-mail, password, ecc.

Creiamo un campo di testo in cui l'utente può digitare il proprio nome.

Nota: l'elemento di input è un tag a chiusura automatica, quindi non è necessario digitare un tag di chiusura per abbinare il tag di apertura.

Ho aggiunto tre attributi nel tag di input sopra. Diamo un'occhiata a ciascuno in dettaglio.

genere

L'attributo type indica che tipo di input vogliamo. Se diamo un valore di testo all'attributo type, quello che intendiamo qui è che il valore che stiamo inserendo nel campo di input è di tipo text. Esistono molti valori possibili per questo attributo particolare. Alcuni valori possibili sono email, tel per telefono e password ecc.

Esempio: quando accedi a uno dei tuoi account (Amazon / Netflix), devi inserire due cose: e-mail e password. Quindi, in questo caso particolare, viene utilizzato l'elemento di input. L'attributo type è dato rispettivamente con il valore di email e password.

id

L'attributo ID non è obbligatorio, ma è una buona idea aggiungerne uno. In alcuni casi, questo è utile per il targeting di elementi con CSS / JavaScript. L'attributo ID viene aggiunto in modo da poter associare le etichette a controlli di modulo specifici.

nome

L'attributo name è necessario. Quando un modulo viene inviato al codice lato server, il server può comprendere i dati del modulo ed elaborare i valori in modo appropriato.

segnaposto

È un breve suggerimento che viene visualizzato nel campo di input prima che l'utente inserisca un valore. Quando l'utente inizia a digitare nel campo di input, il segnaposto scompare.

Vediamo come appaiono alcuni altri elementi di input di base.

Nota: l'utilizzo di valori diversi per l'attributo type produce risultati diversi. Ad esempio, puoi fare in modo che l'input sia di tipo e-mail, testo o password, ecc. Tutti mostrano un comportamento leggermente diverso, che vedrai di seguito.

Più elementi di input (testo, e-mail, password)

Elemento di input multiplo (testo, e-mail, password)

Elementi di input senza segnaposto (a sinistra) e con l'attributo segnaposto (a destra)

Elemento Textarea

A volte una singola riga di testo non è sufficiente e un semplice elemento di input non funziona. Ad esempio, alcuni siti Web dispongono di un modulo di contatto per consentire alle persone di digitare domande o messaggi. In questi casi, è meglio usare l'elemento textarea.