W tworzeniu stron internetowych formularz jest używany do przechowywania informacji w bazie danych w zorganizowanym sposób i do konwersji ich bezpośrednio na obiekty bazy danych, takie jak tabele, listy i inne. Upoważnia również użytkownika do kontrolowania interfejsu użytkownika poprzez zebranie danych. Dodatkowo użytkownik może również ustawić wyrównanie formularza zgodnie z preferencją.

W tym artykule wyjaśnimy:

• Metoda 1: Jak wyrównać formularz w HTML?
• Metoda 2: Jak wyrównać formularz w CSS?

Metoda 1: Jak wyrównać formularz w HTML?

Możesz użyć „„Element do zaprojektowania formularza na stronie HTML. Ponadto użytkownicy mogą ustawić wyrównanie formularza w HTML za pomocą stylizacji inline.

Aby wyśrodkować formularz w HTML, wypróbuj podaną procedurę.

Krok 1: Wstaw nagłówek

Po pierwsze, dodaj nagłówek za pomocą znacznika nagłówka HTML. W tym przypadku „

”Tag jest używany.

Krok 2: Utwórz formularz

Następnie skorzystaj z „„Element do utworzenia formularza na stronie HTML. Aby to zrobić, postępuj zgodnie z podanymi instrukcjami:

• „„styl”Atrybut służy do ustawienia stylizacji elementu. Atrybut stylu zastąpi każdy styl za pomocą właściwości CSS bezpośrednio w HTML. W tym scenariuszu wartość atrybutu „styl” jest ustalana jako „Justify-Content: Center" I "Wyświetlacz: Flex".
• „„Justify-Content: Center„Wbudowane CSS jest wykorzystywane do ustawienia zawartości elastycznego pojemnika, gdy nie wypełniają całej osi głównej.
• Używając "Wyświetlacz: Flex”W elementach korzeni elementy dziecięce automatycznie dostosują się do automatycznej szerokości i wysokości.
• Wstaw „„”Element i określ typ wejścia jako„tekst”I nazwa jako„szukaj".
• "typ”Atrybut służy do kontrolowania typu danych elementu wejściowego.
• „„wartość”Atrybut określa wartość„" element. Jest również używany inaczej dla różnych typów wejściowych:

Wypełnij formularz

Wpisz swoje imię

Można zauważyć, że formularz jest tworzony i wyrównany centrum na stronie HTML:

Metoda 2: Jak wyrównać formularz w CSS?

Aby wyrównać formularz w CSS, sprawdź podane instrukcje.

Krok 1: Zrób kontener DIV

Początkowo zrób kontener DIV za pomocą „div”Element i dodaj atrybut klasowy o określonej nazwie.

Krok 2: Utwórz formularz

Następnie utwórz formularz z pomocą „”Tag i wstaw następujący element między elementem formularza:

• „„”Element zapewnia etykietę dla elementu w interfejsie użytkownika.
• "”Jest wykorzystywany do tworzenia interaktywnych elementów sterujących formularzy internetowych do odbierania danych od użytkownika. Aby to zrobić, dodaj „typ”,„nazwa", I "symbol zastępczy".
• "symbol zastępczy„Atrybut jest wykorzystywany do dodania wartości w polu formularza do wyświetlania:

Wpisz swoje imię:




Wprowadź swój email:

Wyjście

Krok 5: formularz stylu

Uzyskaj dostęp do kontenera Div za pomocą selektora atrybutów i określ nazwę kontenera. Następnie zastosuj właściwości CSS wspomniane w poniższym bloku kodu:

.Central-Form
Justify-Content: Center;
Wyświetlacz: Flex;
Margines: 40px 50px;
Border: 3Px stały niebieski;
Wyściółka: 30px;
kolor tła: RGB (208, 205, 248);

Tutaj:

• "justify-content”Właściwość CSS określa, w jaki sposób przeglądarka rozpowszechnia przestrzeń między elementami zawartości i wokół niego wzdłuż głównej osi pojemnika Flex i osi inline kontenera siatki.
• "wyświetlacz”Służy do ustawienia zachowania wyświetlania elementu.
• "margines”Służy do dodawania przestrzeni poza zdefiniowaną granicą wokół elementu.
• "granica”Określa granicę wokół elementu.
• "wyściółka”Określa przestrzeń wokół zdefiniowanego elementu wewnątrz granicy.
• "kolor tła”Ustawia kolor tła na tylnej części elementu.

Można zauważyć, że formularz jest wyrównany:

Nauliśmy cię metody wyrównania formularza w centrum.

Wniosek

Aby wyrównać formę, istnieją różne metody. Pierwszym jest wykorzystanie metody stylizacji inline w HTML. Po drugie, użytkownik może również zastosować właściwości CSS po uzyskaniu dostępu do formularza w CSS. Aby to zrobić, „justify-content„Własność o wartości”Centrum" I "wyświetlacz" ustawiony jako "przewód”Są wykorzystywane do ustawiania wyrównania formularza w centrum. Ten post wykazał metodę wyrównania formularza.