Paano Lumikha ng isang Naka-stack na Form sa CSS

Ang CSS ay kabilang sa isang natatanging klase ng mga wika, na kilala bilang mga style sheet na wika. Pangunahin itong ginagamit upang tukuyin ang pagtatanghal ng iyong web page. Habang hinahayaan ka ng HTML na tukuyin kung paano dapat mabuo ang iyong pahina, ito ang CSS na ginagamit upang i-istilo ito. Kung hindi man, magtatapos ka sa isang medyo hindi nakaka-apela na website.

Ang pagtuon sa CSS ay isa sa mga mas magagandang paraan upang mapabuti ang apela ng iyong website, lalo na pagdating sa pagpapahusay ng karanasan ng iyong gumagamit. Sa ganitong paraan, maaari mo ring dagdagan ang iyong trapiko. Para sa mga nagsisimula, maaari kang gumamit ng isang nakasalansan na form.

Ano ang Isang Nakasalansan na Form?

Pinapayagan ka ng isang nakasalansan na form na lumikha ng isang dalubhasang form kung saan maaari mong ilagay ang iyong mga label at input sa tuktok ng bawat isa, sa halip na ilagay ang mga ito sa isang pahalang na pattern.

Narito kung paano mo ito magagawa.

Code ang HTML

Gamitin ang elemento ng HTML, , upang maproseso ang iyong impormasyon. Magdagdag ng mga label para sa mga nauugnay na patlang at italaga ang nauugnay na mga patlang ng pag-input. Sa halimbawang ito, hinihiling namin sa mga gumagamit na ibigay ang kanilang buong pangalan at email address na may uri ng pag-input ng form text , samantalang ang isang drop-down na menu ay nilikha sa pamamagitan ng piliin ang id upang matulungan silang pumili ng kanilang industriya.

  
  
  
  
What Is a Stacked Form?
  
Here's how you create a stacked form.
  
  
Full Name  
  
Email Address  
  
Department  
  
Information Technology  
Customer Support  
Sales

Gayunpaman, ang pagpapatakbo ng piraso ng code na ito ay makakagawa lamang ng isang form na walang mura nang walang patayo na stacking ang mga patlang. At doon ka kakailanganing magdagdag ng CSS.

i-install ang office 2016 nang walang microsoft account

Code ang Bahagi ng CSS

Ngayon, lumikha ng isang hiwalay na sheet ng estilo at idagdag ito sa iyong HTML bago ang body tag:

Susunod, piliin ang katawan ng iyong HTML, mga uri ng pag-input, at lalagyan at i-istilo ang mga ito sa pamamagitan ng CSS. Isasama rito ang pag-eksperimento sa iba't ibang mga pag-aari ng CSS, tulad ng font-family, lapad, padding, margin, display, border, atbp, at idaragdag ang iyong mga ginustong halaga. Sa ganitong paraan, magtatapos ka sa isang nakasalansan na form na nababagay sa iyong eksaktong mga kagustuhan. Narito ang isang halimbawa.

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

Suriin ang output sa ibaba.

Ngayon Maaari kang Lumikha ng isang Naka-stack na Form Sa CSS

Sa artikulong ito, natutunan mo kung paano lumikha ng isang nakasalansan na form sa CSS. Sa pagsasanay, magagawa mong pinuhin ang iyong mga form at gawing mas user-friendly ang iyong website.

kung paano i-save ang adobe ilustrador bilang png

Ang pangalan ng laro ng programa ay 'pagsasanay'. Igasa ang iyong mga kasanayan sa CSS araw-araw sa mga proyekto sa eksibisyon upang maging isang naka-istilong web designer at mas mahusay na developer ng web.

Magbahagi Magbahagi Mag-tweet Email 10 Mga Simpleng Halimbawa ng CSS Code na Maaari Mong Malaman sa loob ng 10 Minuto

Kailangan mo ng tulong sa CSS? Subukan ang mga pangunahing halimbawang CSS code upang magsimula, pagkatapos ay ilapat ang mga ito sa iyong sariling mga web page.

Basahin Susunod Mga Kaugnay na Paksa

Programming
Pag-unlad sa Web
CSS

Tungkol sa May-akda Usman Ghani(4 na Artikulo Nai-publish)

Si Usman ay isang nagmemerkado sa nilalaman na tumulong sa maraming mga negosyo na may organikong paglago sa mga digital platform. Gusto niya ang parehong programa at pagsusulat, na nangangahulugang ang teknikal na pagsulat ay isang bagay na nasisiyahan siya nang husto. Kapag hindi gumagana, nasisiyahan si Usman sa paggugol ng oras sa panonood ng mga palabas sa TV, pagsunod sa cricket, at pagbabasa tungkol sa data analytics.

Higit pa Mula kay Usman Ghani

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe