Jak vytvořit skládaný formulář v CSS

Jak vytvořit skládaný formulář v CSS

CSS patří do jedinečné třídy jazyků, známých jako stylové jazyky. Používá se hlavně k definování prezentace vaší webové stránky. Zatímco HTML vám umožňuje určit, jak má být vaše stránka strukturována, k jejímu stylu se používají CSS. V opačném případě skončíte s docela neatraktivním webem.





Zaměření na CSS je jedním z lepších způsobů, jak zlepšit přitažlivost vašeho webu, zejména pokud jde o zlepšení uživatelského dojmu. Tímto způsobem můžete také zvýšit svůj provoz. Pro začátek můžete použít skládaný formulář.



Co je skládaný formulář?

Skládaný formulář vám umožňuje vytvořit specializovaný formulář, kde můžete umístit štítky a vstupy na sebe, místo abyste je umístili do vodorovného vzoru.





Zde je návod, jak to udělat.

Kódujte HTML

Použijte prvek HTML, , ke zpracování vašich údajů. Přidejte popisky pro příslušná pole a přiřaďte příslušná vstupní pole. V tomto příkladu žádáme uživatele, aby uvedli své celé jméno a e -mailovou adresu s typem vstupu formuláře text , zatímco rozevírací nabídka se vytváří pomocí vyberte id aby jim pomohla vybrat si obor.







What Is a Stacked Form?


Here's how you create a stacked form.



Full Name

Email Address

Department

Information Technology
Customer Support
Sales





Spuštěním této části kódu se však vytvoří pouze nevýrazný tvar bez vertikálního stohování polí. A právě tam budete muset přidat CSS.



modrá obrazovka Windows 10 při spuštění

Kódujte část CSS

Nyní vytvořte samostatný list stylů a přidejte jej do HTML před značku body:


Dále vyberte tělo HTML, typy vstupů a kontejner a upravte je pomocí CSS. To bude zahrnovat experimentování s různými vlastnostmi CSS, jako je rodina písem, šířka, odsazení, okraj, zobrazení, ohraničení atd., A přidejte požadované hodnoty. Tímto způsobem skončíte se skládaným formulářem, který vyhovuje vašim přesným preferencím. Zde je pří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;
}

Zkontrolujte výstup níže.

Nyní můžete v CSS vytvořit skládaný formulář

V tomto článku jste se naučili, jak vytvořit skládaný formulář v CSS. S praxí budete schopni upřesnit své formuláře a učinit váš web uživatelsky přívětivějším.

jak nainstalovat minecraft na linux

Název programovací hry je „praxe“. Zdokonalujte své dovednosti CSS den za dnem výstavními projekty a staňte se stylovým webdesignérem a efektivnějším webovým vývojářem.

Podíl Podíl tweet E-mailem 10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minut

Potřebujete pomoc s CSS? Nejprve zkuste tyto základní příklady kódu CSS a poté je použijte na své vlastní webové stránky.

Číst dále Související témata
  • Programování
  • Vývoj webu
  • CSS
O autorovi Usman Ghaní(4 publikované články)

Usman je obchodník s obsahem, který pomohl několika podnikům s organickým růstem na digitálních platformách. Má rád programování i psaní, což znamená, že technické psaní je něco, co ho velmi baví. Když nepracuje, Usman rád tráví čas sledováním televizních pořadů, sledováním kriketu a čtením o analytice dat.

Více od Usmana Ghaniho

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru