Ako vytvoriť skladaný formulár v CSS

Ako vytvoriť skladaný formulár v CSS

CSS patrí do jedinečnej triedy jazykov, známych ako jazyky so štýlmi. Používa sa hlavne na definovanie prezentácie vašej webovej stránky. HTML vám síce umožňuje určiť, ako by mala byť vaša stránka štruktúrovaná, ale na jej štýl sa používa CSS. V opačnom prípade skončíte s celkom neatraktívnym webom.





Zameranie na CSS je jedným z lepších spôsobov, ako zvýšiť príťažlivosť vašich webových stránok, najmä pokiaľ ide o zvýšenie pohodlia používateľov. Takýmto spôsobom môžete tiež zvýšiť návštevnosť. Na začiatok môžete použiť skladaný formulár.





Čo je to skladaný formulár?

Skladaný formulár vám umožňuje vytvoriť špecializovaný formulár, kde môžete štítky a vstupy umiestniť na seba, a nie ich umiestňovať do horizontálneho vzoru.





Takto to môžete urobiť.

Kódujte HTML

Použite prvok HTML, , na spracovanie vašich informácií. Pridajte štítky pre relevantné polia a priraďte príslušné vstupné polia. V tomto prípade žiadame používateľov, aby spolu s typom vstupu formulára zadali svoje úplné meno a e -mailovú adresu text , pričom rozbaľovacia ponuka sa vytvára pomocou vyberte id pomôcť im vybrať si odvetvie.







What Is a Stacked Form?


Here's how you create a stacked form.



Full Name

Email Address

Department

Information Technology
Customer Support
Sales





Spustenie tohto kúska kódu však vytvorí iba nevýrazný tvar bez vertikálneho stohovania polí. A práve tam budete musieť pridať CSS.





ako získať lacné Windows 10

Kódujte časť CSS

Teraz vytvorte samostatný hárok štýlov a pridajte ho do svojho HTML pred značku body:


Potom vyberte telo HTML, typy vstupov a kontajner a upravte ich štýl pomocou CSS. To bude zahŕňať experimentovanie s rôznymi vlastnosťami CSS, ako je rodina písem, šírka, odsadenie, okraj, zobrazenie, orámovanie atď., A pridanie preferovaných hodnôt. Takýmto spôsobom skončíte so skladaným formulárom, ktorý vyhovuje vašim presným preferenciám. Tu je príklad.






body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}

Skontrolujte výstup nižšie.

Teraz môžete v CSS vytvoriť skladaný formulár

V tomto článku ste sa dozvedeli, ako vytvoriť skladaný formulár v CSS. Vďaka praxi budete môcť zdokonaliť svoje formuláre a urobiť váš web užívateľsky prívetivejším.

ako skontrolujem svoju základnú dosku

Programovacia hra sa nazýva „prax“. Zdokonaľujte svoje CSS zručnosti každý deň pomocou výstavných projektov, aby ste sa stali štýlovým webovým dizajnérom a efektívnejším webovým vývojárom.

zdieľam zdieľam Tweet E -mail 10 jednoduchých príkladov kódu CSS, ktoré sa môžete naučiť za 10 minút

Potrebujete pomoc s CSS? Na začiatok vyskúšajte tieto základné príklady kódu CSS a potom ich použite na vlastných webových stránkach.

Čítajte ďalej
Súvisiace témy
  • Programovanie
  • Vývoj webových aplikácií
  • CSS
O autorovi Usman Ghani(4 publikované články)

Usman je marketér obsahu, ktorý pomohol niekoľkým firmám s organickým rastom na digitálnych platformách. Má rád programovanie aj písanie, čo znamená, že technické písanie ho veľmi baví. Keď nepracuje, Usman rád trávi čas sledovaním televíznych relácií, sledovaním kriketu a čítaním o analytike dát.

Viac od Usmana Ghaního

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber