Come Creare Campi Modulo Form

Sommario:

Come Creare Campi Modulo Form
Come Creare Campi Modulo Form

Video: Come Creare Campi Modulo Form

Video: Come Creare Campi Modulo Form
Video: COME CREARE MODULI COMPILABILI CON WORD 2024, Novembre
Anonim

Il trattamento dei dati che i visitatori inviano al server dopo la compilazione dei moduli web è gestito da un apposito programma (script). Pertanto, ha senso aggiungere campi a un modulo pubblicato su una pagina Web solo se nello script sono programmate funzioni per lavorare con questi campi. Se questa condizione è soddisfatta, resta da fare la parte relativamente semplice del lavoro di aggiungere tag al codice sorgente della pagina che formano i campi richiesti.

Come creare campi modulo form
Come creare campi modulo form

È necessario

Conoscenza di base dell'HTML

Istruzioni

Passo 1

L'operazione di formazione dei tag necessari può essere rilevata dall'editor di pagine, se si ha l'opportunità di utilizzare la modalità di modifica visiva al suo interno. Un tale editor può essere parte integrante del sistema di gestione dei contenuti: inseriscilo e carica una pagina con un modulo in cui devono essere aggiunti nuovi campi. Usa le operazioni di copia e incolla - seleziona e copia un paio di elementi esistenti (il campo di input e il testo ad esso associato), quindi fai clic sulla pagina in cui deve essere posizionato il campo aggiuntivo e incolla quello copiato.

Passo 2

Successivamente, modifica separatamente le proprietà di ciascun elemento della coppia. Basta selezionare la scritta con il mouse e digitare il nuovo testo, e per il campo di input utilizzare il pulsante nel pannello dell'editor che apre le sue proprietà. Nelle proprietà, almeno è necessario modificare il valore nel campo del nome: deve corrispondere al nome del campo programmato nello script di elaborazione. Ripeti copia/incolla per il set di campi richiesto e salva la pagina.

Passaggio 3

Se non è possibile accedere alla modifica visiva, aprire il codice sorgente della pagina in qualsiasi editor di testo o specializzato e aggiungere i tag necessari. Questo metodo richiede una certa conoscenza dell'HTML e delle tecniche di layout delle pagine web. Per aggiungere un semplice campo di testo al modulo, utilizzare il tag di input, aggiungendo il testo del valore all'attributo type. Oltre a questo attributo, è richiesto solo il nome: deve contenere il nome di questo campo modulo noto allo script del gestore. Utilizzando altri attributi, puoi impostare il numero di caratteri che determinano visivamente la lunghezza del campo di input (l'attributo size), il numero massimo consentito di caratteri (maxlength), i parametri di stile (stile), l'appartenenza alla classe (classe), ecc. Questo tag può essere visto nel codice, ad esempio in questo modo:

Passaggio 4

Per un campo di testo multilinea, usa il tag textarea. Si compone di due parti: apertura e chiusura. Nella prima, è necessario impostare il valore del nome e, utilizzando gli attributi rows e cols, è possibile impostare il numero di righe e colonne di questo elemento del modulo. Per esempio:

Passaggio 5

Altri tipi di campi modulo possono essere caselle di controllo: per formarli utilizzare anche il tag di input, ma a differenza di un campo di testo a riga singola, specificare il valore della casella di controllo nell'attributo type. Se questo elemento del modulo deve essere controllato, aggiungi l'attributo controllato al suo tag. Per esempio:

Passaggio 6

Per inserire una casella di selezione nel modulo e caricare un file, utilizzare lo stesso tag di input con il valore del file nell'attributo type. Per esempio:

Passaggio 7

Una costruzione più complessa forma un campo con un elenco a discesa. Deve contenere una coppia di tag select di apertura e chiusura. Posiziona coppie di tag di opzione in mezzo, ciascuna specificando una singola riga di selezione. I tag di apertura devono contenere l'attributo value (il suo valore sarà trasmesso al server), e tra le parti di apertura e chiusura, inserire il testo che il visitatore vedrà in questa riga dell'elenco. Ad esempio: Prima riga di selezione Seconda riga di selezione Terza riga di selezione

Consigliato: