Nello sviluppo web, viene utilizzato un modulo per archiviare le informazioni in un database in modo organizzato e per convertirle direttamente in oggetti di database, come tabelle, elenchi e altri. Autorizza inoltre l'utente a controllare l'interfaccia utente raccogliendo i dati. Inoltre, l'utente può anche impostare l'allineamento del modulo secondo la propria preferenza.

In questo articolo, spiegheremo:

• Metodo 1: come centrare allineare una forma in HTML?
• Metodo 2: come centrare allineare una forma in CSS?

Metodo 1: come centrare allineare una forma in HTML?

Puoi utilizzare il ""Elemento per progettare un modulo sulla pagina HTML. Inoltre, gli utenti possono impostare l'allineamento del modulo in HTML con l'aiuto dello stile in linea.

Per allineare una forma in HTML, prova la procedura dichiarata.

Passaggio 1: inserire un'intestazione

Prima di tutto, aggiungi un'intestazione con l'aiuto di un tag di intestazione HTML. In questo caso, il "

"Viene utilizzato il tag.

Passaggio 2: creare un modulo

Successivamente, utilizza il “"Elemento per creare un modulo sulla pagina HTML. Per fare ciò, segui le istruzioni fornite:

• IL "stile"L'attributo viene utilizzato per impostare lo stile in linea di un elemento. L'attributo di stile sovrascriverà qualsiasi stile utilizzando le proprietà CSS direttamente in HTML. In questo scenario, il valore dell'attributo "stile" è impostato come "giustificare il contenuto: centrale" E "Visualizza: Flex".
• IL "giustificare il contenuto: centrale"Inline CSS viene impiegato per posizionare il contenuto del contenitore flessibile quando non riempiono l'intero asse principale.
• Usando "Visualizza: Flex"Negli elementi di radice, gli elementi figlio si allineano automaticamente con la larghezza e l'altezza automatica.
• Inserire un “"Elemento e specificare il tipo di input come"testo"E il nome come"ricerca".
• "tipo"L'attributo viene utilizzato per il controllo del tipo di dati dell'elemento di input.
• IL "valore"L'attributo determina il valore di un""Elemento. Viene anche usato in modo diverso per diversi tipi di input:

Compilare il modulo

Inserisci il tuo nome

Si può vedere che il modulo è creato e allineato al centro in una pagina HTML:

Metodo 2: come centrare allineare una forma in CSS?

Per allineare un modulo in CSS, controlla le istruzioni dichiarate.

Passaggio 1: crea un contenitore div

Inizialmente, crea un contenitore div con l'aiuto di "div"Elemento e aggiungi un attributo di classe con un nome particolare.

Passaggio 2: creare un modulo

Successivamente, crea una forma con l'aiuto di ""Tag e inserire il seguente elemento tra l'elemento modulo:

• IL ""L'elemento fornisce l'etichetta per un elemento in un'interfaccia utente.
• ""È utilizzato per la creazione di controlli interattivi per i moduli basati sul Web per ricevere dati dall'utente. Per farlo, aggiungi "tipo","nome", E "segnaposto".
• "segnaposto"L'attributo viene utilizzato per aggiungere il valore nel campo del modulo per visualizzare:

Inserisci il tuo nome:




Inserisci il tuo indirizzo email:

Produzione

Passaggio 5: forma di stile

Accedi al contenitore Div con l'aiuto di un selettore di attributi e specifica il nome del contenitore con esso. Quindi, applica le proprietà CSS menzionate nel blocco del codice seguente:

.forma centrale
giustificare contento: centro;
display: flex;
Margine: 40px 50px;
bordo: 3px blu solido;
imbottitura: 30px;
Background-color: RGB (208, 205, 248);

Qui:

• "giustificare il contenuto"La proprietà CSS definisce come il browser distribuisce spazio tra gli elementi di contenuto e intorno all'asse principale di un contenitore flessibile e l'asse in linea di un contenitore a griglia.
• "Schermo"Viene utilizzato per impostare il comportamento di visualizzazione di un elemento.
• "margine"Viene utilizzato per aggiungere lo spazio all'esterno del limite definito attorno all'elemento.
• "confine"Specifica il bordo attorno all'elemento.
• "imbottitura"Determina lo spazio attorno all'elemento definito all'interno del confine.
• "colore di sfondo"Imposta il colore di sfondo sul retro dell'elemento.

Si può osservare che la forma è centrata allineata:

Ti abbiamo insegnato il metodo per allineare la forma al centro.

Conclusione

Per allineare una forma, ci sono vari metodi. Il primo è utilizzare il metodo di styling in linea in HTML. In secondo luogo, l'utente può anche applicare le proprietà CSS dopo l'accesso al modulo in CSS. Per farlo, il "giustificare il contenuto"Proprietà con il valore"centro" E "Schermo" impostato come "flettere"Sono utilizzati per impostare l'allineamento della forma al centro. Questo post ha dimostrato il metodo per allineare la forma.