Moduli in formato html. Moduli HTML
Ciao, cari lettori del sito blog. Proseguendo il nostro studio, passiamo a considerare i form e ad inserire i tag con i relativi attributi (), con i quali è possibile creare un'ampia varietà di form per il sito.
Qualunque sia l'argomento e il contenuto di una particolare risorsa web, molto probabilmente conterrà moduli in una forma o nell'altra: campi di testo, menu a discesa, vari pulsanti o interruttori. A proposito, in una delle pubblicazioni ho già parlato di elementi che aiutano a diversificare le forme.
Qual è lo scopo pratico di tutta la varietà di forme possibili? Innanzitutto sono necessari per inviare i dati inseriti dall'utente al server ai fini dell'ulteriore elaborazione utilizzando uno script appositamente creato (gestore).
Moduli HTML: come vengono creati utilizzando modulo e input
Come ho detto all'inizio, su qualsiasi sito web più o meno sviluppato deve essere presente una sorta di modulo web, o anche più moduli contemporaneamente. Per capire quanto siano importanti alla luce della conformità di una risorsa web ai requisiti moderni, è sufficiente darvi subito tre oggetti che utilizzano moduli basati sui tag form e input, che già dal nome non lasciano dubbi sulla loro necessità di un progetto in una direzione o nell’altra:
Se segui, ad esempio, un collegamento a un articolo sulla creazione di feedback (che consente a tutti gli utenti di inviare messaggi all'amministrazione del sito), quindi il codice HTML con un modulo che ha un'apertura (
) Parte:
È qui che il modulo gioca un ruolo fondamentale poiché avvia l'installazione del modulo web. Di per sé non visualizza un'area su una pagina web, ma funge da contenitore contenente altri tag.
Nel nostro caso (vedi screenshot sopra), questi ne includono diversi ingresso(questo tag HTML è singolo, in altre parole, non ha un componente di chiusura) e anche textarea, con diversi insiemi di attributi. Ognuno di essi definisce il proprio elemento incluso nel modulo.
16. Messa a fuoco automatica(nessun parametro) è un attributo logico che mette a fuoco il campo immediatamente quando viene caricata la pagina web, in conseguenza del quale è possibile inserire i dati senza fare clic su di essi. Non può essere applicato solo al tipo di input="hidden".
17. Disabilitato(senza valori) - disabilita per l'utente l'elemento del modulo a cui è stato aggiunto. Molto spesso viene utilizzato insieme agli script, dove vengono specificate le condizioni in base alle quali verrà attivato un elemento inaccessibile.
18. Modulo— associa l'elemento al modulo quando si trova all'esterno del contenitore
. Per collegare, un attributo id globale viene aggiunto al tag form e un attributo form al tag input, i cui valori sono gli stessi (ad esempio, id="data" e form="data") .19. Molteplici(nessun parametro) - imposta opzione a scelta multipla per l'utente e viene utilizzato solo insieme a type="file" e type="email".
Se utilizzi il campo di caricamento file, puoi selezionare più file dal tuo computer contemporaneamente utilizzando i tasti Ctrl o Maiusc. Se viene visualizzato un campo per l'inserimento di un indirizzo e-mail (type="email"), le e-mail devono essere inserite separate da virgole.
20. Necessario(nessun valore) – attiva la richiesta per l'utente di inserire dati. Pertanto, il browser blocca l'invio del modulo web se un campo obbligatorio viene lasciato vuoto e visualizza un messaggio corrispondente sulla necessità di compilarlo.
Questo attributo non viene utilizzato per i pulsanti grafici e standard (type="button | image"), così come per i campi di input nascosti (type="hidden").
21. Misurare— determina la larghezza del campo di testo in caratteri (adatto solo per elementi di tipo con parametri "email | password | cerca | tel | testo | url"). Il valore predefinito è 20 caratteri.
I successivi quattro attributi (22-25) per il tag input hanno quasi la stessa funzionalità di , ma per completezza li menzionerò brevemente.
22. Lunghezza massima— impone un limite al numero massimo di caratteri che possono essere immessi durante la compilazione di un campo di testo. Se si tenta di superare questo limite, ulteriori input verranno bloccati. Questo attributo è applicabile solo per elementi di testo con type="email | password | search | tel | text | url".
23. Lunghezza minima— impone un limite al numero minimo di caratteri richiesti da inserire nell'area di testo. Se si tenta di inviare dati contenenti meno caratteri, verrà visualizzato un breve messaggio che indicherà la necessità di integrare il contenuto del modulo e verrà fornita l'indicazione del numero di caratteri già inseriti. Le condizioni d'uso sono esattamente le stesse del caso di maxlength.
24. Segnaposto— puoi inserire un suggerimento (servirà da parametro) direttamente nel campo di testo, che scomparirà nel momento in cui l'utente inizierà a inserire i caratteri. Solo per i campi formati utilizzando parametri e-mail, password, ricerca, testo, tel, url attributo type del tag di input.
25. Sola lettura(nessun parametro) - indica che il testo precedentemente inserito nel campo è disponibile per la sola lettura e copia. Di solito viene utilizzato insieme agli script, dove vengono specificate le condizioni che, se soddisfatte, possono attivare questo elemento del modulo.
E infine, alcuni altri attributi che completano la funzionalità di vari elementi del modulo:
26. Modello— come valore, riflette un'espressione regolare in base alla quale vengono stabilite le regole per l'immissione delle informazioni. In questo caso, si consiglia di aggiungere inoltre un attributo titolo globale, come parametro del quale è possibile aggiungere testo esplicativo per aiutare gli utenti a compilare i campi. Il pattern viene applicato solo agli elementi email, password, ricerca, testo, telefono e URL. Capiamolo con un esempio. Ecco il codice per un modulo di registrazione semplificato (con ):
|
Login Parola d'ordine |
Per il campo login (tipo="testo"), viene specificata un'espressione regolare (5,) come valore del modello, che implica l'uso di caratteri latini e devono essere immessi almeno cinque caratteri.
Relativamente all'area di testo per la password (type="password"), il valore è impostato su (8,), che specifica l'immissione di caratteri esclusivamente latini in ogni caso (maiuscole e minuscole), nonché numeri, mentre il numero totale di tutti i caratteri non deve essere inferiore a otto.
Se le condizioni di input specificate vengono violate, il browser non consentirà l'invio di dati e visualizzerà un apposito avviso:
27. Src— definisce il percorso dell'immagine (URL, che è il suo valore) per visualizzare il pulsante grafico “immagine” (vedere la tabella dei parametri del tipo di input sopra).
28. Fare un passo— imposta il passo per gli elementi che forniscono una scelta di valori numerici (input type="data | datetime-local | mese | numero | intervallo | tel | ora | settimana.").
Può accettare qualsiasi numero intero o frazionario come parametro. Passaggio predefinito="1". Per impostare l'intervallo di input finale, puoi nuovamente utilizzare gli attributi min e max menzionati appena sopra. Per chiarezza, includeremo 2 elementi type="number" nel modulo di test. Per il primo impostare step="2" e per il secondo step="0,1":
|
Inserisci un valore compreso tra -10 e 10: Inserisci un valore compreso tra 0 e 1: |
29. Valore— imposta il valore dell'elemento del modulo che verrà passato al gestore. Una coppia nome-parametro viene inviata al server, dove il nome è determinato dall'attributo name del tag di input e il parametro è determinato dall'attributo value. Inoltre, per vari elementi del modulo il valore giocherà ruoli diversi:
- for type="button | reset | send" - imposta l'etichetta di testo sui pulsanti;
- for type="checkbox | radio | image" - identifica ciascuna casella di controllo, interruttore o pulsante grafico durante l'invio e l'elaborazione dei dati sul server;
- for type="password | text" - immediatamente durante il caricamento del modulo, visualizza il testo preliminare nel campo, che può essere modificato o completamente eliminato dall'utente;
- for type="file" (caricamento file) non si applica perché non influisce su questo elemento.
Esempio di utilizzo per ciascuna delle opzioni di cui sopra:
|
Seleziona CMS: W.P. Joomla |
Qui valore dell'attributo valore definisce i seguenti componenti di ciascun elemento: visualizza un frammento di testo per il campo type="text" ("Il tuo nome"), identifica ciascuno dei pulsanti di opzione ("1" e "2") impostati utilizzando type="radio", e attiva anche l'iscrizione sul pulsante ("Invia").
Un esempio di creazione di un bellissimo modulo HTML
Successivamente, proverò a presentarvi un modulo web di esempio, il cui codice include non solo combinazioni di tipi di input con valori diversi che formano campi di testo e pulsanti standard, ma anche, ad esempio, che consentono di iniziare a concentrarsi su un elemento non solo con un clic diretto del mouse, ma anche facendo clic sul testo.
Tieni presente che per ottenere un design unico, vengono inseriti singoli componenti del modulo, ciascuno con set di:
Indietro (larghezza massima: 350px; margine: 50px auto 0; imbottitura: 20px; sfondo:#f3ebe1; font-family:"Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1 input (display:block; margin- fondo: 10px; larghezza: 100%).in (padding-left:40px) .in input (larghezza: 100%) ..png) nessuna ripetizione; posizione-sfondo: 10px 10px) ..png) nessuna ripetizione; background-position:10px 10px) .form-4 input (display:blocco; altezza:50px; dimensione carattere:24px; larghezza:100%; cursore: puntatore)
Di conseguenza, tale modulo web assume il seguente schema:
Informazioni più complete sulla creazione di questo modulo specifico sono disponibili all'indirizzo questa pagina(a proposito, lì non solo puoi testare la funzionalità delle singole aree di testo inserendovi dei dati, ma anche sperimentare il modulo web modificando il codice HTML e/o le proprietà CSS, cambiandone completamente o parzialmente l'aspetto).
Il mio obiettivo era presentarti l'algoritmo per utilizzare diversi valori dell'attributo type e del tag form per creare vari moduli HTML sul sito. Spero che il compito sia completato. In ogni caso, condividi i tuoi pensieri su questo argomento diversificato nei commenti.
Naturalmente, nelle pubblicazioni successive continuerò a descrivere i principali tag del markup ipertestuale, quindi non dimenticare di iscriverti agli aggiornamenti del blog via e-mail. Inoltre, per rafforzare questo concetto, guarda un'altra lezione di Evgeniy Popov sulla creazione di un modulo di contatto.
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. L'esempio seguente mostra 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é qualsiasi altro tag 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 dell'elemento cambiare a seconda del valore del suo attributo tipo:
Ecco alcuni valori degli attributi tipo:
Immissione di testo e password
Uno dei tipi più semplici di elementi del modulo è un campo di testo, progettato per inserire testo su una singola riga. Questo tipo di input di testo è impostato per impostazione predefinita e pertanto è 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 è un tipo di campo di testo normale. 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 il numero massimo di caratteri che possono essere immessi in una determinata stringa. 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 è necessario e svolge un ruolo importante nella combinazione di diversi elementi di commutazione in un gruppo. Per combinare i pulsanti di opzione in un gruppo, è necessario impostare lo stesso valore dell'attributo nome e diverso valore dell'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:
Attributi
Imposta la codifica in cui il server può ricevere ed elaborare i dati. L'indirizzo del programma o del documento che elabora i dati del modulo. Abilita la compilazione automatica dei campi del modulo. Il metodo per codificare i dati del modulo. Metodo del protocollo HTTP. Nome del modulo. Sostituisce il controllo integrato dei dati del modulo per la correttezza dell'input. Il nome della finestra o del frame in cui il gestore caricherà il risultato restituito.Etichetta di chiusura
Necessario.
HTML5 IE Cr Op Sa Fx
Il risultato di questo esempio è mostrato in Fig. 1.
Riso. 1. Visualizzazione degli elementi del modulo in una finestra del browser
Tag HTML che definiscono i moduli HTML sul sito
Creiamo siti web e singole pagine su Internet per comunicare con i visitatori.
Moduli HTML vengono utilizzati per registrare i visitatori del sito, per sondaggi interattivi e votazioni, consentono di inviare messaggi, effettuare acquisti, ecc. HTML Il modulo è stato creato per uno scopo: raccogliere e successivamente trasmettere informazioni per l'elaborazione mediante uno script software o via e-mail.
Esempio di modulo HTML | Entra nel sito
Tag, attributi e valori
- -determinare la forma.
- name="" - definisce il nome del modulo.
- metodo="" - definisce il metodo di invio dei dati dal modulo. Valori: "get" (predefinito) e "post" . Viene spesso utilizzato il metodo "post", poiché consente di trasferire grandi quantità di dati.
- action="" - definisce l'URL al quale i dati vengono inviati per l'elaborazione. Nel nostro caso - enter_data.php ..
- - definire elementi del modulo come pulsanti, interruttori, campi di testo per l'immissione dei dati.
- type="text" - definisce un campo di testo per l'immissione dei dati.
- type="password" - definisce un campo per l'inserimento di una password, con il testo visualizzato sotto forma di asterischi o cerchi.
- type="checkbox" - definisce un pulsante di opzione.
- type="hidden" - definisce un elemento del modulo nascosto - utilizzato per trasferire informazioni aggiuntive al server.
- size="25" - lunghezza del campo di testo in caratteri.
- maxlength="30" - il numero massimo consentito di caratteri immessi.
- value="" - definisce il valore che verrà inviato per l'elaborazione se si riferisce a pulsanti di opzione o interruttori. Il valore di questo attributo come parte di un campo di testo o di un pulsante verrà mostrato come, ad esempio, Vasya o Login nell'esempio sopra.
Esempio di modulo HTML | Commenti sul sito
|
|