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: