I moduli sono progettati per inviare dati dall'utente al server web. I moduli in HTML possono essere costituiti da campi di testo e aree di testo, caselle di controllo, pulsanti di opzione ed elenchi a discesa. Tutti questi sono elementi di forma. Ogni elemento serve a trasmettere un significato al sito.
Fondamentalmente, un modulo HTML è una pagina Web in cui vengono visualizzate le aree in cui inserire le proprie informazioni. Dopo aver compilato il modulo e fatto clic su Invia, le informazioni del modulo vengono compresse e inviate al server Web per l'elaborazione da parte di uno script lato server (file del gestore). Dopo l'elaborazione, ti verrà restituita un'altra pagina web come risposta. La figura seguente mostra chiaramente il funzionamento del modulo:
Non c'è niente di difficile nel creare moduli HTML. Il modo più semplice per avere un'idea dei moduli è analizzare un piccolo codice HTML e poi vedere come funziona. IN seguente esempio Viene mostrata la sintassi per creare un semplice modulo HTML:
Esempio: modulo HTML semplice
- Prova tu stesso "
Il mio primo modulo:
Nome:
Cognome:
Elemento
I moduli vengono inseriti nelle pagine Web utilizzando l'elemento . Fornisce un contenitore per tutto il contenuto del modulo, inclusi elementi come campi di testo e pulsanti, nonché eventuali altri tag Linguaggio HTML. Tuttavia, non può contenere un altro elemento
.
Per inviare il modulo al server utilizzare il pulsante “Invia”, lo stesso risultato si otterrà se si preme il tasto “Invio” all'interno del modulo. Se il pulsante "Invia" non è presente nel modulo, è possibile utilizzare il tasto "Invio" per inviare.
La maggior parte degli attributi degli elementi influenzare l'elaborazione del modulo, non il suo design. I più comuni sono azione E metodo. Attributo azione contiene l'URL a cui verranno inviate le informazioni nel modulo per l'elaborazione da parte del server. Attributo metodoè il metodo HTTP che i browser devono utilizzare per inviare i dati del modulo.
Elemento
Quasi tutti i campi del modulo vengono creati utilizzando l'elemento (dall'inglese input - input). Aspetto elemento cambiare a seconda del valore del suo attributo tipo:
Ecco alcuni valori degli attributi tipo:
Immissione di testo e password
Una delle più tipi semplici elementi del modulo è un campo di testo progettato per inserire testo da una riga. Questo tipo l'input di testo è impostato per impostazione predefinita e quindi è il campo di una riga che verrà visualizzato se si dimentica di specificare l'attributo tipo. Per aggiungere un campo di input di testo di una riga a un modulo, è necessario inserire l'elemento registrare l'attributo tipo con valore di testo:
Il campo di immissione della password è di tipo normale campo di testo. Supporta gli stessi attributi di un campo di testo a riga singola. Attributo nome imposta il nome del campo di inserimento della password che verrà inviato al server insieme alla password inserita dall'utente. Per creare un campo password, è necessario impostare l'attributo password su tipo(password (inglese) - password):
Un esempio di creazione di un modulo con un campo password:
Esempio: campo Password
- Prova tu stesso "
Il tuo accesso:
Parola d'ordine:
È possibile utilizzare l'attributo insieme a questo attributo lunghezza massima, il cui valore determina importo massimo caratteri che è possibile inserire questa linea. Puoi anche impostare la lunghezza del campo di input utilizzando l'attributo misurare. Per impostazione predefinita, la maggior parte dei browser limita la larghezza di un campo di testo a 20 caratteri. Per controllare la larghezza dei nuovi elementi del modulo, invece di un attributo misurare, ti consigliamo di utilizzare i fogli di stile a cascata (CSS).
Attributo valore specifica il valore che viene visualizzato per impostazione predefinita nel campo di testo quando il modulo viene caricato. Inserendo un valore predefinito nel campo, puoi spiegare all'utente esattamente quali dati e in quale formato desideri che l'utente inserisca qui. Questo è come un campione, perché è molto più conveniente per l'utente compilare il modulo vedendo un esempio davanti a sé.
Interruttori (radio)
Elemento tipo Radio crea interruttori che utilizzano il principio logico "OR", consentendo di selezionare solo uno tra diversi valori: se si seleziona una posizione, tutte le altre diventano inattive. La sintassi di base di un elemento toggle è:
Attributo nome per gli interruttori è richiesto e gioca ruolo importante combinando diversi elementi del pulsante di opzione in un gruppo. Per combinare gli interruttori in un gruppo, è necessario impostare stesso valore attributo nome E significato diverso attributo valore. Attributo valore imposta il valore del pulsante di opzione selezionato da inviare al server. Il valore di ciascun elemento del pulsante di opzione deve essere univoco all'interno del gruppo in modo che il server sappia quale opzione di risposta ha scelto l'utente.
Presenza di attributi controllato(dall'inglese - installato) sull'elemento switch indica quale delle opzioni proposte deve essere selezionata per impostazione predefinita durante il caricamento della pagina, se necessario. Questo attributo può essere impostato solo per un elemento pulsante di opzione del gruppo:
- Prova tu stesso "
Quanti anni hai?
- sotto i 18
- dalle 18 alle 24
- dalle 25 alle 35
- più di 35
L'attributo dell'azione.
Principale per elemento è un attributo azione, che specifica il gestore dati per il modulo. Un gestore dati è un file che descrive cosa fare con i dati del modulo. Il risultato di questa elaborazione è una nuova pagina HTML che viene restituita al browser. In altre parole, nell'attributo azione specifica il percorso URL di un file gestore sul server (a volte chiamato pagina di script) per l'elaborazione del modulo. La sintassi è la seguente:
Il file di elaborazione si trova sul server mytestserver.com nella cartella nomecartella e il nome dello script del server che elaborerà i dati - obrabotchik.php. Tutti i dati che hai inserito nel modulo sulla pagina web gli verranno trasferiti. L'estensione .php indica che il modulo specificato viene elaborato da uno script scritto in PHP. Il gestore stesso può essere scritto in un altro linguaggio, ad esempio potrebbe essere il linguaggio di scripting Python, Ruby, ecc.
Si consiglia di impostare sempre il valore dell'attributo azione. Se il form deve passare dei valori alla stessa pagina in cui si trova, fornire una stringa vuota come valore dell'attributo action: action="".
attributo del metodo
Attributo metodo specifica come le informazioni devono essere trasferite al server. Il metodo di invio del modulo scelto dipende dai dati che desideri inviare con il modulo. Il volume di questi dati gioca un ruolo importante qui. I più popolari sono due metodi per trasferire i dati di origine del modulo dal browser al server: OTTENERE E INVIARE. Il metodo può essere impostato su qualsiasi metodo scelto e, se non lo si specifica, verrà utilizzato quello predefinito OTTENERE. Consideriamo l'uso di ciascuno di essi.
Metodo POST
Metodo INVIARE i pacchetti formano i dati e li inviano al server senza che l'utente se ne accorga, poiché i dati sono contenuti nel corpo del messaggio. Browser Web, quando si utilizza il metodo INVIARE invia una richiesta al server composta da intestazioni speciali seguite dai dati del modulo. Poiché il contenuto di questa richiesta è disponibile solo per il server, il metodo INVIARE utilizzato per trasmettere dati riservati come password, dettagli di carte bancarie e altre informazioni personali degli utenti. Metodo INVIARE adatto anche per inviare grandi volumi di informazioni, poiché a differenza del metodo OTTENERE, non ha restrizioni sul numero di caratteri trasmessi.
Metodo OTTIENI
Come già sai, il compito principale di un browser è ricevere pagine web dal server. Quindi quando usi il metodo OTTENERE, il tuo browser recupera semplicemente la pagina web come sempre. Metodo OTTENERE racchiude anche i dati del modulo, ma li aggiunge alla fine dell'URL prima di inviare la richiesta al server. Per capire come funziona il metodo OTTENERE, vediamolo in azione. Apri il primo esempio di questa lezione (Esempio: Modulo HTML semplice) in Blocco note (ad esempio Notepad++) e apporta una piccola modifica al codice HTML:
