Dan tutorja jispjega kif jitfasslu tajjeb forma użu nadif CSS disinn ma biss tikketta u input tags biex jissimulaw l HTML tabella istruttura. Tista 'tuża kollha CSS / HTML elementi li disinn tiegħek custom formola tiegħek web proġetti:

Pass 1: Oħloq bażiku HTML istruttura

 > <h1> Contact Form : </h1> <label> <span> Full name </span> <input type = "text" class = "input_text" name = "name" id = "name" / > </label> <label> <span> Email </span> <input type = "text" class = "input_text" name = "email" id = "email" / > </label> <label> <span> Subject </span> <input type = "text" class = "input_text" name = "subject" id = "subject" / > </label> <label> <span> Message </span> <textarea class = "message" name = "feedback" id = "feedback" > </textarea> <input type = "button" class = "button" value = "Submit Form" / > </label> </div> </form> <form> <div klassi = "box"> <h1> Kuntatt Form: </ h1> <label> <span> Isem sħiħ </ span> <input tip = "test" class = "input_text" name = "name" id = "name" /> </ tikketta> <label> <span> Email </ span> <input tip = "text" klassi = "input_text" name = "email" id = "email" /> </ tikketta> <label> <span> Suġġett </ span> <input tip = "text" klassi = "input_text" name = "subject" id = "subject" /> </ tikketta> <label> <span> Message </ span> <textarea klassi = "message" isem = "feedback" id = "feedback"> </ textarea> <input tip "button" klassi = = = "button" valur "Submit Form" /> </ tikketta> </ div> </ form> 

Pass: 2 Oħloq CSS Kodiċi

 ; padding : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; background : # 161712 ; } form,input,select,textarea { margin : 0 ; padding : 0 ; color : #ffffff ; } div .box { margin : 0 auto ; width : 500px ; background : # 222222 ; position :relative ; top : 50px ; border : 1px solid # 262626 ; } div .box h1 { color : #ffffff ; font-size : 18px ; text-transform :uppercase ; padding : 5px 0 5px 5px ; border-bottom : 1px solid # 161712 ; border-top : 1px solid # 161712 ; } div .box label { width : 100 %; display : block ; background : #1C1C1C ; border-top : 1px solid # 262626 ; border-bottom : 1px solid # 161712 ; padding : 10px 0 10px 0 ; } div .box label span { display : block ; color : #bbbbbb ; font-size : 12px ; float :left ; width : 100px ; text-align :right ; padding : 5px 20px 0 0 ; } div .box .input_text { padding : 10px 10px ; width : 200px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; } div .box .message { padding : 7px 7px ; width : 350px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; overflow :hidden ; height : 150px ; } div .box .button { margin : 0 0 10px 0 ; padding : 4px 7px ; background : #CC0000 ; border : 0px ; position : relative ; top : 10px ; left : 382px ; width : 100px ; border-bottom : 1px double # 660000 ; border-top : 1px double # 660000 ; border-left : 1px double #FF0033 ; border-right : 1px double #FF0033 ; } * (Margin: 0; padding: 0;) (korp font: 100% normali Arial, Helvetica, sans-Serif; background: # 161712;) forma, input, tagħżel, textarea (margin: 0; padding: 0; color: # ffffff;) div. kaxxa (margin: 0 auto; width: 500px; background: # 222222; position: relattiva; top: 50px; fruntiera: 1px solidu # 262626;) div. kaxxa h1 (color: # ffffff; font - size: 18px; test jittrasformaw: kbar; padding: 5px 0 5px 5px; fruntiera tal-qiegħ: 1px solidu # 161712; border-top: 1px solidu # 161712;) div. kaxxa tikketta (wisa ': 100%; display: block; background: # 1C1C1C; border-top: 1px solidu # 262626; fruntiera tal-qiegħ: 1px solidu # 161712; padding: 10px 0 10px 0;) div. kaxxa tikketta span (display: block; color: # bbbbbb; font-size: 12px; float: xellug; width: 100px; test tallinja: id-dritt; padding: 5px 20px 0 0;) div. kaxxa. input_text (padding: 10px 10px; width: 200px; background: # 262626; fruntiera tal-qiegħ: 1px double # 171717; border-top: 1px double # 171717; transkonfinali-left: 1px double # 333333; transkonfinali-lemin: 1px double # 333333;) div. kaxxa. messaġġ (padding: 7px 7px; width: 350px; background: # 262626 ; fruntiera tal-qiegħ: 1px double # 171717; border-top: 1px double # 171717; transkonfinali-left: 1px double # 333333; transkonfinali-lemin: 1px double # 333333; overflow: moħbija; għoli: 150px;) div. kaxxa. buttuna (margin: 0 0 10px 0; padding: 4px 7px; background: # CC0000; fruntiera: 0px; position: relattiva; top: 10px; left: 382px; width: 100px; fruntiera tal-qiegħ: 1px double # 660000; fruntiera - top: 1px double # 660000; transkonfinali-left: 1px double # FF0033; fruntiera-lemin: 1px double # FF0033;) 

finalment aħna jsir. Ħloqna tajba tfittex forma mingħajr tabella. View Eżempju

Iffajljati taħt: css, tutorials by admin