Su siti Web, moduli e report aiutano gli utenti a svolgere le proprie attività in modo rapido ed efficiente. I dati di riepilogo sono presentati nei report, mentre i moduli vengono utilizzati per varie attività, tra cui la raccolta dei dati, la presentazione dei risultati delle query, il calcolo, ecc. Un modulo fornisce al cliente un modo sistematico per inserire le informazioni nel database e modificare direttamente i dati nelle strutture del database come le tabelle.

Questo articolo è incentrato sulla creazione e lo styling di forme usando HTML e CSS.

Come creare un modulo in HTML?

Per creare una forma in HTML, prima, utilizza il ""Elemento in HTML e quindi aggiungi ed elementi.

Per implicazioni pratiche, seguire le istruzioni fornite.

Passaggio 1: aggiungi l'intestazione
Ai fini di inserire un'intestazione in un documento HTML, utilizzare qualsiasi tag di intestazione da "

" A "

". In questo scenario, abbiamo usato il

etichetta.

Passaggio 2: crea forma
Successivamente, crea una forma con l'aiuto di ""Elemento e aggiungi i componenti del modulo.

Passaggio 3: aggiungi l'etichetta nel modulo
Dopodiché, inserisci il ""Tag all'interno del modulo che rappresenta una didascalia per un elemento in un'interfaccia utente. Inoltre, aggiungi il “per"Attributo all'interno del""Viene utilizzato per fare riferimento all'ID dell'elemento associato a questa etichetta. Per fare ciò, il valore dell'attributo "per" nel tag etichetta e il valore dell'attributo "ID" di ""Dovrebbe essere lo stesso.

Passaggio 4: crea il campo di input
Per aggiungere il campo di input nel modulo, usa il “"Elemento. Questo elemento rappresenta un campo dati digitato, di solito con un controllo del modulo per consentire all'utente di modificare i dati. All'interno del tag di input, aggiungere i seguenti attributi elencati di seguito:

• IL "tipo"L'attributo viene utilizzato per controllare il tipo di dati (e il controllo associato) dell'elemento. Esistono più valori possibili per questo attributo, incluso "testo","numero","data","parola d'ordine", e molti altri.
• "id"Attributo/Proprietà descrive un ID univoco per un elemento HTML.

Passaggio 5: crea un pulsante
Per aggiungere il pulsante sul modulo, utilizzare HTML ""Elemento e incorporare il testo da visualizzare sul pulsante:

Compila questo modulo

Nome di battesimo



Cognome



Il tuo Dob



Categoria di lavoro



Il tuo paese



Invia

Si può vedere che la forma è stata creata correttamente nell'HTML:

Passa verso la sezione successiva se si desidera modellare il modulo.

Come modellare una forma usando le proprietà CSS?

Per modellare la forma, ci sono varie proprietà CSS disponibili. Per fare ciò, accedi alla forma e modellalo come desiderato.

Passaggio 1: modellare la forma
Accedi al modulo in CSS e applica le seguenti proprietà:

modulo
Border: 3px punteggiato di verde;
Margine: 30px 80px;
imbottitura: 20px;
Testo-align: centro;
Background-color: RGB (194, 241, 194);

Qui:

• "confine"La proprietà CSS assegna un limite attorno all'elemento definito.
• "margine"Definisce uno spazio fuori dal confine.
• "imbottitura"Determina lo spazio vuoto attorno all'elemento all'interno del confine definito.
• "allineamento"La proprietà viene utilizzata per impostare l'allineamento del testo come"centro".
• "colore di sfondo"Definisce il colore del retro del confine.

Produzione

Passaggio 2: applicare lo stile su "etichetta"
Ora, accedi al "etichetta"E applica le proprietà CSS menzionate:

etichetta
colore blu;
Font in stile: corsivo;

Secondo lo snippet sopra:

• "colore"La proprietà imposta il colore per il testo. A tale scopo, il valore della proprietà specificata è impostato come "blu".
• "stile carattere"La proprietà specifica un carattere particolare per i dati dell'etichetta.

Produzione

Passaggio 3: elemento "input" di stile
Ora, accedi al "ingresso"Elemento con il": Hover"Selettore pseudo:

Input: Hover
Background-color: RGB (247, 202, 143);
Colore: verde;

Dopodiché, applica "colore di sfondo"Per impostare il colore sul retro del campo di input e"colore"Proprietà per definire il colore per il testo nel campo.

Produzione

Si tratta di creare e styling della forma in HTML/CSS.

Conclusione

Per creare e modellare la forma, in primo luogo, utilizza il “"Elemento allo scopo di creare un modulo in HTML. Quindi, usa "" E ""Elementi per inserire etichette e campi di input all'interno della forma. Successivamente, accedi al modulo e applica lo stile con l'aiuto delle proprietà CSS, tra cui "colore di sfondo","margine"," Border "e molti altri, secondo la tua scelta. Questo post ha spiegato il metodo per la creazione e lo styling della forma in HTML e CSS.