HTML - Moduli
I moduli HTML sono obbligatori, quando si desidera raccogliere alcuni dati dal visitatore del sito. Ad esempio, durante la registrazione dell'utente si desidera raccogliere informazioni come nome, indirizzo e-mail, carta di credito, ecc.
Un modulo prenderà l'input dal visitatore del sito e poi lo invierà a un'applicazione back-end come CGI, ASP Script o PHP script ecc. L'applicazione back-end eseguirà l'elaborazione richiesta sui dati passati in base alla logica di business definita all'interno l'applicazione.
Sono disponibili vari elementi del modulo come campi di testo, campi dell'area di testo, menu a discesa, pulsanti di opzione, caselle di controllo, ecc.
Il codice HTML <form> tag viene utilizzato per creare un modulo HTML e ha la seguente sintassi:
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Attributi del modulo
Oltre agli attributi comuni, di seguito è riportato un elenco degli attributi del modulo più frequentemente utilizzati:
| Suor n | Attributo e descrizione |
|---|---|
| 1 | action Script di backend pronto per elaborare i dati passati. |
| 2 | method Metodo da utilizzare per caricare i dati. I metodi più utilizzati sono GET e POST. |
| 3 | target Specificare la finestra o il frame di destinazione in cui verrà visualizzato il risultato dello script. Accetta valori come _blank, _self, _parent ecc. |
| 4 | enctype È possibile utilizzare l'attributo enctype per specificare come il browser codifica i dati prima di inviarli al server. I valori possibili sono - application/x-www-form-urlencoded - Questo è il metodo standard utilizzato dalla maggior parte dei moduli in scenari semplici. mutlipart/form-data - Viene utilizzato quando si desidera caricare dati binari sotto forma di file come immagini, file di parole ecc. |
Note- Puoi fare riferimento a Perl e CGI per i dettagli su come funziona il caricamento dei dati dei moduli.
Controlli del modulo HTML
Esistono diversi tipi di controlli del modulo che puoi utilizzare per raccogliere dati utilizzando il modulo HTML:
- Controlli di immissione del testo
- Controlli delle caselle di controllo
- Controlli radio box
- Seleziona Box Controls
- Caselle di selezione dei file
- Controlli nascosti
- Pulsanti cliccabili
- Pulsante Invia e reimposta
Controlli di immissione del testo
Esistono tre tipi di input di testo utilizzati nei moduli:
Single-line text input controls- Questo controllo viene utilizzato per gli elementi che richiedono solo una riga di input dell'utente, come caselle di ricerca o nomi. Vengono creati utilizzando HTML<input> etichetta.
Password input controls- Anche questo è un input di testo a riga singola, ma maschera il carattere non appena un utente lo inserisce. Vengono anche creati utilizzando il tag HTMl <input>.
Multi-line text input controls- Viene utilizzato quando all'utente è richiesto di fornire dettagli che possono essere più lunghi di una singola frase. I controlli di input multilinea vengono creati utilizzando HTML<textarea> etichetta.
Controlli per l'immissione di testo a riga singola
Questo controllo viene utilizzato per gli elementi che richiedono solo una riga di input dell'utente, come caselle di ricerca o nomi. Vengono creati utilizzando il tag HTML <input>.
Esempio
Ecco un esempio di base di un input di testo a riga singola utilizzato per prendere il nome e il cognome:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il tag <input> per la creazione del campo di testo.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | type Indica il tipo di controllo di input e per il controllo di input di testo verrà impostato text. |
| 2 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 3 | value Può essere utilizzato per fornire un valore iniziale all'interno del controllo. |
| 4 | size Consente di specificare la larghezza del controllo di immissione del testo in termini di caratteri. |
| 5 | maxlength Consente di specificare il numero massimo di caratteri che un utente può inserire nella casella di testo. |
Controlli di immissione della password
Anche questo è un input di testo a riga singola ma maschera il carattere non appena un utente lo inserisce. Vengono anche creati utilizzando il tag HTML <input> ma l'attributo type è impostato supassword.
Esempio
Di seguito è riportato un esempio di base di immissione di una password su una riga utilizzata per accettare la password dell'utente:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il tag <input> per la creazione del campo password.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | type Indica il tipo di controllo di input e per il controllo di input della password verrà impostato password. |
| 2 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 3 | value Può essere utilizzato per fornire un valore iniziale all'interno del controllo. |
| 4 | size Consente di specificare la larghezza del controllo di immissione del testo in termini di caratteri. |
| 5 | maxlength Consente di specificare il numero massimo di caratteri che un utente può inserire nella casella di testo. |
Controlli per l'immissione di testo su più righe
Viene utilizzato quando all'utente è richiesto di fornire dettagli che possono essere più lunghi di una singola frase. I controlli di input multilinea vengono creati utilizzando il tag HTML <textarea>.
Esempio
Di seguito è riportato un esempio di base di un input di testo multilinea utilizzato per prendere la descrizione dell'articolo:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il tag <textarea>.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 2 | rows Indica il numero di righe della casella dell'area di testo. |
| 3 | cols Indica il numero di colonne della casella dell'area di testo |
Controllo della casella di controllo
Le caselle di controllo vengono utilizzate quando è necessario selezionare più di un'opzione. Vengono anche creati utilizzando il tag HTML <input> ma l'attributo type è impostato sucheckbox..
Esempio
Ecco un esempio di codice HTML per un modulo con due caselle di controllo:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il tag <checkbox>.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | type Indica il tipo di controllo di input e per il controllo di input della casella di controllo verrà impostato checkbox.. |
| 2 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 3 | value Il valore che verrà utilizzato se la casella di controllo è selezionata. |
| 4 | checked Impostare su selezionato se si desidera selezionarlo per impostazione predefinita. |
Controllo tramite pulsante radio
I pulsanti di opzione vengono utilizzati quando tra molte opzioni, è necessario selezionare solo un'opzione. Vengono anche creati utilizzando il tag HTML <input> ma l'attributo type è impostato suradio.
Esempio
Ecco un esempio di codice HTML per un modulo con due pulsanti di opzione:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi per il pulsante di opzione.
| Suor n | Attributo e descrizione |
|---|---|
| 1 | type Indica il tipo di controllo di input e per il controllo di input della casella di controllo verrà impostato su radio. |
| 2 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 3 | value Il valore che verrà utilizzato se la casella radio è selezionata. |
| 4 | checked Impostare su selezionato se si desidera selezionarlo per impostazione predefinita. |
Seleziona Box Control
Una casella di selezione, chiamata anche casella a discesa, che fornisce la possibilità di elencare varie opzioni sotto forma di elenco a discesa, da cui un utente può selezionare una o più opzioni.
Esempio
Ecco un esempio di codice HTML per un modulo con una casella a discesa
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi importanti del tag <select> -
| Suor n | Attributo e descrizione |
|---|---|
| 1 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 2 | size Può essere utilizzato per presentare una casella di riepilogo a scorrimento. |
| 3 | multiple Se impostato su "multiple", consente a un utente di selezionare più voci dal menu. |
Di seguito è riportato l'elenco degli attributi importanti del tag <option> -
| Suor n | Attributo e descrizione |
|---|---|
| 1 | value Il valore che verrà utilizzato se è selezionata un'opzione nella casella di selezione. |
| 2 | selected Specifica che questa opzione deve essere il valore inizialmente selezionato al caricamento della pagina. |
| 3 | label Un modo alternativo di etichettare le opzioni |
Casella di caricamento file
Se desideri consentire a un utente di caricare un file sul tuo sito web, dovrai utilizzare una casella di caricamento file, nota anche come casella di selezione file. Anche questo viene creato utilizzando l'elemento <input> ma l'attributo type è impostato sufile.
Esempio
Ecco un esempio di codice HTML per un modulo con una casella di caricamento file:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Questo produrrà il seguente risultato:
Attributi
Di seguito è riportato l'elenco degli attributi importanti della casella di caricamento dei file:
| Suor n | Attributo e descrizione |
|---|---|
| 1 | name Utilizzato per dare un nome al controllo che viene inviato al server per essere riconosciuto e ottenere il valore. |
| 2 | accept Specifica i tipi di file accettati dal server. |
Controlli a pulsante
Esistono vari modi in HTML per creare pulsanti cliccabili. Puoi anche creare un pulsante cliccabile utilizzando il tag <input> impostando il suo attributo type subutton. L'attributo type può assumere i seguenti valori:
| Suor n | Tipo e descrizione |
|---|---|
| 1 | submit Questo crea un pulsante che invia automaticamente un modulo. |
| 2 | reset Questo crea un pulsante che reimposta automaticamente i controlli del modulo ai loro valori iniziali. |
| 3 | button Questo crea un pulsante che viene utilizzato per attivare uno script lato client quando l'utente fa clic su quel pulsante. |
| 4 | image Questo crea un pulsante cliccabile ma possiamo usare un'immagine come sfondo del pulsante. |
Esempio
Ecco un esempio di codice HTML per un modulo con tre tipi di pulsanti:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Questo produrrà il seguente risultato:
Controlli dei moduli nascosti
I controlli del modulo nascosto vengono utilizzati per nascondere i dati all'interno della pagina che in seguito possono essere inviati al server. Questo controllo si nasconde all'interno del codice e non viene visualizzato nella pagina effettiva. Ad esempio, il seguente modulo nascosto viene utilizzato per mantenere il numero di pagina corrente. Quando un utente farà clic sulla pagina successiva, il valore del controllo nascosto verrà inviato al server Web e lì deciderà quale pagina verrà visualizzata successivamente in base alla pagina corrente passata.
Esempio
Ecco un esempio di codice HTML per mostrare l'utilizzo del controllo nascosto:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Questo produrrà il seguente risultato: