यह ट्यूटोरियल कैसे एक अच्छी फार्म केवल लेबल और एक HTML तालिका संरचना अनुकरण इनपुट टैग के साथ एक साफ सीएसएस डिजाइन का उपयोग करते हुए डिजाइन करने के लिए बताते हैं. आप अपने वेब परियोजनाओं के लिए अपने कस्टम फार्म डिजाइन करने के लिए सभी सीएसएस / HTML तत्वों का उपयोग कर सकते हैं:

चरण 1: मूल HTML संरचना बनाएँ

  <form> 
  > <div वर्ग = "box"> 
  <h1> संपर्क प्रपत्र: </ h1> 
  <label> 
  <span> पूरा नाम </ span> 
  class = "input_text" name = "name" id = "name" / > = "text" वर्ग = "input_text" नाम = "name" <input प्रकार = "name" / आईडी> 
  </ लेबल> 
  <label> 
  <span> ईमेल </ span> 
  class = "input_text" name = "email" id = "email" / > = "text" वर्ग = "input_text" नाम = "email" <input प्रकार = "email" / आईडी> 
  </ लेबल> 
  <label> 
  <span> विषय </ span> 
  class = "input_text" name = "subject" id = "subject" / > = "text" वर्ग = "input_text" नाम = "subject" <input प्रकार = "subject" / आईडी> 
  </ लेबल> 
  <label> 
  <span> संदेश </ span> 
  name = "feedback" id = "feedback" > </textarea> <textarea वर्ग = "message" नाम = "feedback" = "feedback"> </ textarea> आईडी 
  class = "button" value = "Submit Form"  / > = "button" वर्ग = "button" मूल्य <input प्रकार = "Submit Form" /> 
  </ लेबल> 
 
 
  </ div> 
  </ फार्म> 

चरण: 2 सीएसएस कोड बनाएँ

  ; padding : 0 ; } * (मार्जिन: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } शरीर (font: 100% सामान्य Arial, Helvetica, बिना सेरिफ़; पृष्ठभूमि: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } फार्म, इनपुट, textarea (मार्जिन: 0; padding: 0, रंग: # FFFFFF;) चुनें 

  div. बॉक्स ( 
  ; मार्जिन: 0 ऑटो; 
  चौड़ाई: 500px; 
  ; पृष्ठभूमि: # 222222; 
  स्थिति: रिश्तेदार; 
  टॉप: 50px; 
  # 262626 ; border: 1px solid # 262626; 
  ) 

  div. बॉक्स h1 (  
  ; रंग: # FFFFFF; 
  font-size: 18px; 
  पाठ-बदाल: uppercase; 
  5px 5px ; padding: 5px 0 5px 5px; 
  # 161712 ; सीमा-bottom: 1px solid # 161712; 
  # 161712 ; सीमा टॉप: 1px solid # 161712;  
  ) 

  div. बॉक्स लेबल ( 
  width: 100%; 
  ; प्रदर्शन: ब्लॉक; 
  ; पृष्ठभूमि: # 1C1C1C; 
  # 262626 ; सीमा टॉप: 1px solid # 262626; 
  # 161712 ; सीमा-bottom: 1px solid # 161712; 
  10px 0 ; padding: 10px 0 10px 0; 
  ) 

  div. बॉक्स लेबल अवधि ( 
  ; प्रदर्शन: ब्लॉक; 
  ; रंग: # bbbbbb; 
  font-size: 12px; 
  फ्लोट: छोड़ा; 
  चौड़ाई: 100px; 
  text-align: सही; 
  0 0 ; padding: 5px 20px 0 0; 
  ) 

  div. बॉक्स. input_text ( 
  ; padding: 10px 10px; 
  चौड़ाई: 200px; 
  ; पृष्ठभूमि: # 262626; 
  double # 171717 ; सीमा-bottom: 1px डबल # 171717; 
  double # 171717 ; सीमा टॉप: 1px डबल # 171717; 
  # 333333 ; सीमा-छोड़ा: 1px डबल # 333333; 
  # 333333 ; सीमा-सही: 1px डबल # 333333; 
  ) 

  div. बॉक्स. संदेश ( 
  ; padding: 7px 7px; 
  चौड़ाई: 350px; 
  ; पृष्ठभूमि: # 262626; 
  double # 171717 ; सीमा-bottom: 1px डबल # 171717; 
  double # 171717 ; सीमा टॉप: 1px डबल # 171717; 
  # 333333 ; सीमा-छोड़ा: 1px डबल # 333333; 
  # 333333 ; सीमा-सही: 1px डबल # 333333; 
  अतिप्रवाह: छुपा; 
  ऊँचाई: 150px; 
  ) 

  div. बॉक्स. बटन 
  ( 
  10px 0 ; मार्जिन: 0 0 10px 0; 
  ; padding: 4px 7px; 
  ; पृष्ठभूमि: # CC0000; 
  सीमा: 0px; 
  ; स्थिति: रिश्तेदार; 
  टॉप: 10px; 
  बाएँ: 382px; 
  चौड़ाई: 100px; 
  double # 660000 ; सीमा-bottom: 1px डबल # 660000; 
  double # 660000 ; सीमा टॉप: 1px डबल # 660000; 
  #FF0033 ; सीमा-छोड़ा: 1px डबल # FF0033; 
  #FF0033 ; सीमा-सही: 1px डबल # FF0033; 
  ) 

आखिर हम कर रहे हैं. हम पैदा की है एक अच्छे लग मेज के बिना फार्म. देखें उदाहरण

के तहत दायर: सीएसएस, व्यवस्थापक द्वारा Tutorials