Halmozott űrlap létrehozása CSS -ben

Halmozott űrlap létrehozása CSS -ben

A CSS a nyelvek egyedi osztályához tartozik, amelyet stíluslapnyelvnek neveznek. Elsősorban a weboldal prezentációjának meghatározására szolgál. Míg a HTML lehetővé teszi az oldal felépítésének megadását, a CSS -t kell használni a stílus kialakításához. Ellenkező esetben meglehetősen tetszetős webhelyet kap.





A CSS -re való összpontosítás az egyik legjobb módja annak, hogy javítsa webhelye vonzerejét, különösen, ha a felhasználói élmény javításáról van szó. Így növelheti forgalmát is. Kezdetnek használhat halmozott űrlapot.





Mi az a halmozott űrlap?

A halmozott űrlap lehetővé teszi speciális űrlap létrehozását, ahol a címkéket és a bemeneteket egymásra helyezheti, ahelyett, hogy vízszintes mintázatba helyezné őket.





Így teheti meg.

Kódolja a HTML -t

Használja a HTML elemet, , adatainak feldolgozásához. Adjon hozzá címkéket a megfelelő mezőkhöz, és rendelje hozzá a megfelelő beviteli mezőket. Ebben a példában arra kérjük a felhasználókat, hogy adják meg teljes nevüket és e -mail címüket az űrlap beviteli típusával szöveg , míg egy legördülő menü jön létre válassza ki az azonosítót hogy segítse őket az iparág kiválasztásában.







What Is a Stacked Form?


Here's how you create a stacked form.



Full Name

Email Address

Department

Information Technology
Customer Support
Sales





Ennek a kódrészletnek a futtatása azonban csak lágy formát eredményez a mezők függőleges egymásra rakása nélkül. És itt kell hozzáadnia a CSS -t.





megtudja, kié a telefonszám

Kódolja a CSS részt

Most hozzon létre egy külön stíluslapot, és adja hozzá a HTML -kódhoz a body tag előtt:


Ezután válassza ki a HTML szövegtörzsét, a beviteli típusokat és a tárolót, és formázza őket CSS -en keresztül. Ez magában foglalja a különböző CSS-tulajdonságokkal, például betűtípus-családdal, szélességgel, kitöltéssel, margóval, megjelenítéssel, szegéllyel stb. Végzett kísérletezést, és a kívánt értékek hozzáadását. Így egy halmozott űrlapot kap, amely megfelel az Ön preferenciáinak. Íme egy példa.






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;
}

Ellenőrizze az alábbi kimenetet.

Most halmozott űrlapot hozhat létre CSS -ben

Ezzel a cikkel megtanulta, hogyan hozhat létre halmozott űrlapot CSS -ben. A gyakorlattal finomíthatja űrlapjait, és felhasználóbarátabbá teheti webhelyét.

A Microsoft Store nem működik Windows 10

A programozó játék neve „gyakorlat”. Csinosítsa CSS -készségeit nap mint nap kiállítási projektekkel, hogy stílusos webdesignerként és hatékonyabb webfejlesztővé váljon.

Részvény Részvény Csipog Email 10 egyszerű CSS -példa, amelyet 10 perc alatt megtanulhat

Segítségre van szüksége CSS munkájában? Először is próbálja ki ezeket az alapvető CSS -kódpéldákat, majd alkalmazza őket saját weboldalain.

Olvassa tovább
Kapcsolódó témák
  • Programozás
  • Webfejlesztés
  • CSS
A szerzőről Usman Ghani(4 cikk megjelent)

Usman tartalom -marketingszakember, aki számos vállalkozásnak segített a digitális platformok organikus növekedésében. Szereti a programozást és az írást is, ami azt jelenti, hogy a technikai írást nagyon élvezi. Amikor nem dolgozik, Usman szívesen tölti az időt a tévéműsorok nézésével, a krikett követésével és az adatelemzésről.

Továbbiak Usman Ghani -tól

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide