Buona giornata, appassionati di sviluppo web e coloro che vogliono creare il proprio sito web. Prima di allora, tutte le mie pubblicazioni erano dedicate agli elementi di base del linguaggio, ai modi per creare vari oggetti di contenuto, alla loro formattazione, strutturazione, ecc. Avendo padroneggiato gli argomenti precedenti, puoi già creare un sito web abbastanza buono. Tuttavia, sarebbe incompleto senza l’argomento di oggi: “Creazione di moduli in html”.
Questa sezione della lingua è molto importante. Quindi prenditi il tempo per studiarlo. Attenzione speciale, altrimenti la risorsa web creata non verrà rilasciata in produzione. Pertanto, dopo aver letto l'articolo, imparerai a cosa servono i moduli, quali tag vengono utilizzati per creare e potrai anche provare esempi specifici sulla pratica. Iniziamo!
Cos'è un modulo e come funziona?
Modulo– questo è uno degli oggetti più importanti, destinato allo scambio di dati informativi tra il server e l'utente.
In poche parole, se desideri creare un negozio online con la possibilità di ordinare prodotti sul sito Web, richiedere la registrazione su una risorsa Web e lavorare con gli account o fornire ai clienti feedback dai responsabili dell'azienda, non puoi fare a meno dei moduli.
Il modulo viene specificato utilizzando elemento speciale linguaggio html .
Tieni presente che il documento di codice può contenere diverse dichiarazioni di tag , tuttavia, è possibile inviare una sola richiesta al server per elaborare i dati. Questo è il motivo per cui le informazioni che vengono inserite dall'utente nei campi previsti e si riferiscono a moduli diversi non dovrebbero essere dipendenti. Inoltre, non è consentito annidare i moduli uno dentro l'altro.
Per chi è impaziente e desideroso di dare una rapida occhiata alla rappresentazione del codice, ho allegato un semplice esempio di utilizzo di un pannello con campo testo per password con pulsante:
| 1 2 3 4 5 6 7 8 9 10 11 12 |
|
Forse ora non è molto chiaro cosa e come interagisce in questo piccolo programma, tuttavia, ti garantisco che dopo aver letto tutto l'articolo sarai in grado di creare applicazioni molto più complesse.
Invio dei dati al lato server
Per inviare le informazioni digitate (o selezionate) in una finestra di dialogo, è necessario utilizzare il meccanismo standard: Pulsante Invia.
Il codice per tale metodo è simile al seguente:
Quando esegui la riga presentata, verrà visualizzato un pulsante con la scritta: "Invia".
Un altro modo per inviare dati al lato server è premere il tasto Invio nella finestra di dialogo.
Dopo aver confermato l'invio delle informazioni specificate, queste non arrivano immediatamente al server. Innanzitutto viene elaborato dal browser e risulta nella forma “nome=valore”.
Il parametro dell'attributo è responsabile del nome tipo etichetta e per il valore: i dati immessi dall'utente. Successivamente, la stringa convertita viene passata al gestore, che molto spesso è specificato nell'attributo azione elemento .
Il parametro dell'azione in sé non è richiesto e in alcuni casi non lo è affatto. Ad esempio, se una pagina del sito Web è scritta con utilizzando php o js, l'elaborazione avviene su pagina corrente e non sono necessari collegamenti.
Per una migliore comprensione del quadro complessivo del funzionamento del sito, vorrei aggiungere che sul server i dati vengono elaborati utilizzando altri linguaggi. Pertanto, i linguaggi lato server sono considerati: Python, php, linguaggi simili a C (C#, C, ecc.), Java e altri.
Ora vorrei fermarmi e parlare più approfonditamente dell'elemento . Se spieghi in un linguaggio semplice, Quello necessario per creare campi di testo, pulsanti di opzione, vari pulsanti, campi nascosti, caselle di controllo e altri oggetti.
Non è necessario associare il tag , tuttavia, se è necessario elaborare i record degli utenti o inserirli, ad esempio, in un database, non è possibile fare a meno di un contenitore.
Attributi principali di questo elemento linguaggio di markup ipertestuale sono:
- Testo– crea un campo di testo;
- Invia– crea un pulsante per l'invio dei dati al server;
- Immagine– è responsabile del pulsante con l'immagine;
- Ripristina– imposta un pulsante per cancellare il modulo;
- Parola d'ordine– imposta un campo di testo specifico per le password;
- Casella di controllo– responsabile dei campi con caselle di controllo;
- Radio– responsabile dei campi con la selezione di un elemento;
- Pulsante– crea un pulsante;
- Nascosto– utilizzato per i campi nascosti;
- File– imposta il campo responsabile dell'invio dei file.
Metodi di trasmissione delle informazioni
Esistono 2 modi per trasferire i dati dell'utente sul lato server: Ottenere E Inviare. Questi metodi eseguono la stessa azione, ma differiscono significativamente l'uno dall'altro. Pertanto, prima di menzionarli, conosciamo le loro caratteristiche.
| Inviare | Ottenere | |
| Dimensioni dei documenti trasmessi | Limitato al lato server. | Massimo – 4KB. |
| Come vengono visualizzate le informazioni inviate | Disponibile solo se visualizzato tramite estensioni del browser o altri prodotti software speciali. | Immediatamente disponibile per tutti. |
| Utilizzo dei segnalibri | Non è possibile aggiungere ai segnalibri, poiché le richieste non vengono ripetute (tutte le pagine si collegano a un indirizzo). | Qualsiasi pagina con una richiesta può essere salvata come segnalibro e ripristinata in seguito. |
| Memorizzazione nella cache | Basato paragrafo precedente tutte le richieste in un'unica pagina. | Ogni pagina può essere memorizzata nella cache separatamente. |
| Scopo | Utilizzato per l'inoltro file di grandi dimensioni(libri, immagini, video, ecc.), messaggi, commenti. | Ottimo per cercare i valori richiesti su una risorsa web o per inviare brevi messaggi di testo. |
Al fine di indicare quale delle due modalità di trasferimento dei dati deve utilizzare il browser, nell'elemento utilizzare il parametro fornito metodo(Per esempio, metodo="pubblica").
Diamo un'occhiata al secondo esempio. Creiamo un modulo in cui dovrai inserire i tuoi dati personali (nome e cognome, data di nascita) e creare una password. Successivamente inviamo tutto questo al server utilizzando il metodo Inviare.
Inserisci i tuoi dati personali!
Ad esempio, per inserire una data, sono presenti interruttori per il numero di ciascun parametro (giorno, mese e anno), nonché un pannello a discesa con il calendario stesso per comodità.
Creazione di un pannello di registrazione
Sono stati trattati i tag e gli attributi di base. Ecco perché è il momento di creare un modulo di registrazione completo utilizzando lo stile markup CSS e controllando i dati inseriti. Ovviamente dai un'occhiata lavoro del server non avremo successo con loro, ma il design e dettagli importanti noi forniremo.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
Ti consiglio di risparmiare questo codice programmi in un documento con estensione .html e codifica utf-8 e aprire quest'ultimo in una finestra del browser. Vedrai un pannello di registrazione in tutto il suo splendore con campi per inserire il tuo nome, cognome, e-mail e password ripetuta. Nota che quando avvii la pagina, il cursore si posiziona immediatamente nel primo campo di testo. Questa tecnica si ottiene attraverso l'attributo messa a fuoco automatica.
Tutta l'interattività - campi di input, caselle di controllo, pulsanti di opzione, elenchi a discesa, pulsanti - sono moduli web e i loro elementi. Lasci un commento nel modulo, ti registri utilizzando il modulo, accedi tramite il modulo, utilizzi il modulo di ricerca, voti nei sondaggi, carichi file, iscriviti: fai tutto questo utilizzando i moduli web.
Organizzazione interna
Il modulo in realtà è composto da due parti: progettazione visiva e uno script che elabora i dati immessi. Per scrivere uno script, devi conoscere uno dei linguaggi di programmazione. Non li studieremo qui, quindi analizzeremo il componente HTML: impareremo come creare un'interfaccia del modulo, supponendo che da qualche parte abbiamo già uno script che lo elabora.
Il modulo HTML viene creato utilizzando coppia di tag , all'interno del quale si trovano i tag dei suoi elementi.
Tag
Prima di mostrare gli esempi, esaminiamo i tag.
. Crea un modulo. Se confronti il modulo con la tabella, il tag svolge lo stesso ruolo del tag Esistono altri attributi, ma vengono utilizzati estremamente raramente.
. Un tag interessante con il quale puoi creare qualsiasi elemento di input, quale è specificato attributo tipo. A rigor di termini, questo tag può essere utilizzato al di fuori del modulo, ma in questo caso non sarà possibile specificare l'indirizzo del gestore e l'elemento della pagina non sarà funzionale. Senso Descrizione Bandiere. Con il loro aiuto puoi scegliere più opzioni contemporaneamente Pulsante di selezione del file Campo nascosto, non visibile nel browser Pulsante con un'immagine Campo di immissione della password. Un campo di testo normale, ma i caratteri immessi sono nascosti dietro gli asterischi (*) Interruttori. Quasi caselle di controllo, ma con il loro aiuto puoi selezionare solo una delle opzioni proposte Pulsante per reimpostare i dati del modulo sui valori originali Pulsante per inviare dati al server. Di solito li premi per confermare l'input - Salva, applica, OK Campo di testo Molti nuovi valori sono apparsi in HTML5, ma sfortunatamente finora (giugno 2016) sono supportati solo parzialmente. Ora che tutti i tag sono noti, creiamo un piccolo modulo di autorizzazione, i cui dati verranno elaborati dal file script.php, situato nella cartella con la pagina HTML. Il codice sarà così.
Diamo un'occhiata ad alcune delle sue parti. - creare un modulo elaborato dal file script.php. I dati vengono trasmessi utilizzando il metodo GET. <
fratello>
- tag di transizione alla riga successiva. <
ingresso nome="
login"
tipo="
testo"
misurare="25"
lunghezza massima="30"
valore="Michail">- creare un campo di testo con il nome login, largo 25 caratteri. Specifichiamo Mikhail come valore predefinito in modo che l'utente possa capire cosa e come inserire. <
ingresso nome="
passaggio"
tipo="
parola d'ordine"
misurare="25"
lunghezza massima="30"
valore="">
- creare un campo per l'inserimento della password (i simboli vengono sostituiti con asterischi). Larghezza del campo - 25, lunghezza massima password: 30 caratteri. <
Selezionare><
opzione valore="
C1">Ospiteopzione><
opzione valore="
C2">Amministratoreopzione>Selezionare>
- creare un semplice elenco a discesa di due elementi. <
ingresso nome="
salva"
tipo="
casella di controllo"
valore="
SÌ">Ricorda- aggiungi una casella di controllo e scrivi un testo esplicativo. <
fratello><
ingresso tipo="
invia"
nome="
accedere"
valore="Accedi">- creare un pulsante, cliccando il quale si avvia il processo di trattamento dei dati.
- chiudere il modulo. Nel browser, il modulo web sarà simile all'immagine seguente. Puoi compilarlo, ma affinché inizi a funzionare, devi scrivere il codice e salvarlo in un file script.php accanto alla pagina HTML. Considerando l'essenziale Tag HTML non possiamo fare a meno di toccare questo argomento elemento importante come le forme. Il feedback è spesso necessario sulle pagine web. Ad esempio, compilazione di un modulo sul sito, registrazione, autorizzazione, commenti, ecc. In tutti questi casi l'utente compila apposite aree (campi form) della pagina, dopodiché i dati vengono inviati al server. Per creare feedback vengono utilizzati i moduli. La forma è un frammento Documento HTML destinato all'input dell'utente. La figura mostra un modulo di registrazione degli studenti sul sito web di un istituto scolastico. Un contenitore viene utilizzato per creare un modulo Struttura nella sua forma più semplice: Ogni modulo deve anche avere pulsanti di invio, progettato per inviare dati dopo aver compilato il modulo. Struttura dei pulsanti: Quindi, per registrare quasi tutti gli elementi del modulo, viene utilizzato il tag con l'attributo tipo. Per creare un pulsante che reimposta tutti i dati dai moduli, viene utilizzata la seguente struttura: Per creare campo di testo(campo testo) c'è un parametro di testo. Vengono utilizzati i seguenti parametri: nome – nome del campo; dimensione – per il campo in simboli; maxlength – il numero massimo possibile di caratteri nel campo; valore: informazioni visualizzate nel modulo per impostazione predefinita Esempio di immissione di un modulo con due campi di testo: Il risultato del modulo è mostrato in figura. Se è necessario inseriscilo nel campo di testo un gran numero di informazioni, ad esempio un commento utilizza la forma di un'area di testo, creata utilizzando un tag Il risultato del codice che lavora con l'area di testo è mostrato in figura. Elemento successivo i moduli sono elenchi che consentono di effettuare una scelta da un insieme di valori presentato. I tag ti consentono di creare un modulo di elenco Struttura della voce dell'elenco: Affinché l'elemento venga evidenziato al caricamento della pagina, è necessario nel tag Un metodo di selezione simile è rappresentato dagli elementi del modulo checkbox e radiobutton. La differenza tra questi elementi è che una casella di controllo consente di effettuare selezioni multiple, mentre un pulsante di opzione consente solo una singola selezione. Struttura di una casella di controllo e di un pulsante di opzione: testo Pulsante di opzione: testo Negli elementi specificati nella struttura, l'attributo controllato viene utilizzato per impostazione predefinita per evidenziare la casella di controllo e il pulsante di opzione. Nella figura è mostrato un esempio di utilizzo di una casella di controllo, un pulsante di opzione e un codice HTML. Un altro elemento del modulo è un pulsante, specificato utilizzando l'attributo tag type con il pulsante valore: Nel codice specificato per la creazione di un pulsante è presente un parametro onclick, che solitamente specifica il codice in un linguaggio di programmazione per eseguire una particolare azione quando si fa clic su questo pulsante: Per visualizzare un messaggio in una finestra speciale, utilizzare il comando JavaScript – aler. Il risultato dell'esempio è mostrato in figura. Per inserire un'immagine in un pulsante, utilizzare il codice mostrato nel seguente esempio: Durante la registrazione e l'accesso ai siti Web, viene utilizzato un campo con un test nascosto, visualizzato come stelle. Questo è l'elemento del modulo password: La registrazione al sito è spesso suddivisa in più pagine e ciascuna successiva deve contenere informazioni della precedente. Per nascondere le informazioni trasmesse, viene utilizzato l'elemento del modulo nascosto: L'elemento del modulo nascosto sarà invisibile nella finestra del browser. Per caricare file sul server, i moduli hanno un elemento file. Di seguito è presentato un codice di esempio per caricare file sul server: Pertanto, in questo argomento abbiamo esaminato gli elementi del modulo per la creazione di varie pagine HTML che, insieme ai gestori di script su un computer o server, consentono di sviluppare applicazioni Web a tutti gli effetti. Spesso sui siti Web è possibile trovare pagine con moduli HTML inseriti al loro interno. I moduli Web rappresentano un modo conveniente per ricevere informazioni dai visitatori del tuo sito. Un esempio di ciò è -, - che fornisce feedback ai visitatori del sito e agli sviluppatori. I moduli sono utili anche per gli sviluppatori di siti durante lo sviluppo di un CMS, che consente loro di mantenere la proprietà principale del sito: la pertinenza. Questo articolo tratta le nozioni di base sulla creazione di moduli HTML, sulla loro elaborazione e sui modi per trasferire dati dai moduli sullo schermo agli script PHP. Tag E
definire l'inizio e la fine del modulo. Tag del modulo iniziale contiene due attributi: azione E metodo. L'attributo action contiene l'URL dello script che deve essere richiamato per elaborare lo script. Attributo metodo indica al browser che tipo di richiesta HTTP utilizzare per inviare il modulo; valori possibili INVIARE E OTTENERE. La differenza principale tra i metodi POST e GET è il modo in cui vengono trasferite le informazioni. Nel metodo GET i parametri vengono passati attraverso la barra degli indirizzi, ad es. essenzialmente nell'intestazione della richiesta HTTP, mentre nel metodo POST i parametri vengono trasmessi attraverso il corpo della richiesta HTTP e non si riflettono in alcun modo nella barra degli indirizzi.
Questo modulo HTML contiene un elemento navigare, che apre una finestra di dialogo per la selezione di un file da caricare sul server. Quando premi il pulsante "Trasferisci file", il file viene passato allo script del gestore. Quindi è necessario scrivere uno script di gestione azione.php. Prima di scrivere il gestore, dobbiamo decidere in quale directory copieremo il file: if(isset($_FILES ["miofile"])) // Se il file esiste Se ti fidi che gli utenti carichino file sul tuo server, devi essere estremamente attento. Gli aggressori possono incorporare codice "cattivo" in un'immagine o in un file e inviarlo al server. In questi casi, è necessario controllare rigorosamente il download dei file. Questo esempio dimostra la creazione di una directory e la copia di un file in quella directory sul server. Vorrei anche dimostrare un esempio con l'elemento casella di controllo. Questo elemento è leggermente diverso dagli altri elementi in quanto se non è uno degli elementi casella di controllo’a non è selezionata, allora la variabile superglobale $_POST restituirà un valore vuoto:
if (!empty($_POST ["miocolore"])) echo $_POST ["miocolore"]; // Se è selezionato almeno 1 elemento
. Ad esso sono allegati i seguenti attributi.
Modulo di esempio
elementi del modulo... 
1) Crea un modulo semplice
Commento
{
$catalogo = "../immagine/" ; // Il nostro catalogo
if (is_dir($catalogo)) // Se tale directory esiste
{
$miofile = $_FILES [ "miofile" ][ "nome_tmp" ]; // File temporaneo
$nome_miofile = $_FILES [ "miofile" ][ "nome" ]; // Nome del file
if(! copia ($miofile, $catalogo)) echo "Errore durante la copia del file". $nome_miofile // Se la copia del file non è riuscita
}
altrimenti mkdir("../immagine/" ); // Se tale directory non esiste, la creeremo
}
?>
Commento
altrimenti eco "Seleziona valore";
?>
I migliori articoli sull'argomento
