Si të krijojnë të mira looking formë pa tabelë, css, Tutorials |

Si të krijojnë të mira looking formë pa tabelë

Tutorial Kjo shpjegon se si të hartojnë një formë të mirë duke përdorur një pastër CSS design me etiketë dhe vetëm tags input të stimulohet një strukturë HTML table. Ju mund të përdorni të gjitha faqeve css / HTML elementet për të dizajnuar për formën tuaj custom tuaj web projekte:

form-17

Hapi 1: Krijo HTML baze struktura


  <form> 
  > <div klasës "box" => 
  <h1> Contact Form: </ H1> 
  <label> 
  <span> emrin e plotë </ span> 
  class = "input_text" name = "name" id = "name" / > <input type = "text" klasës = "input_text" emri = "name" id = "name" /> 
  </ label> 
  <label> 
  <span> Email </ span> 
  class = "input_text" name = "email" id = "email" / > <input type = "text" klasës = "input_text" emri = "email" id = "email" /> 
  </ label> 
  <label> 
  <span> Subject </ span> 
  class = "input_text" name = "subject" id = "subject" / > <input type = "text" klasës = "input_text" emri = "subject" id = "subject" /> 
  </ label> 
  <label> 
  <span> Mesazh </ span> 
  name = "feedback" id = "feedback" > </textarea> <textarea klasës = "message" emri = "feedback" id = "feedback"> </ textarea> 
  class = "button" value = "Submit Form"  / > <input type = "button" klasës "button" = Vlera = "Submit Form" /> 
  </ label> 
 
 
  </ div> 
  </ forme>

Hapi: 2 Krijo CSS Kodi


  ; padding : 0 ; } * (Margin: 0; mbushje: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } organ (font: normal 100% Arial, Helvetica, sans-shrift me dhëmbëza; background: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } formë, input, zgjidhni, textarea (margin: 0; mbushje: 0; color: # FFFFFF;) 

  div. kuti ( 
  ; margin: 0 auto; 
  width: 500px; 
  ; background: # 222222; 
  pozicionin: relative; 
  top: 50px; 
  # 262626 ; kufitare: 1px solid # 262626; 
  ) 

  div. kuti H1 (  
  ; color: # FFFFFF; 
  font-size: 18px; 
  text-transformojë: uppercase; 
  5px 5px ; mbushje: 5px 0 5px 5px; 
  # 161712 ; kufiri-bottom: 1px solid # 161712; 
  # 161712 ; kufiri-top: 1px solid # 161712;  
  ) 

  div. kuti label ( 
  width: 100%; 
  ; display: block; 
  ; background: # 1C1C1C; 
  # 262626 ; kufiri-top: 1px solid # 262626; 
  # 161712 ; kufiri-bottom: 1px solid # 161712; 
  10px 0 ; mbushje: 10px 0 10px 0; 
  ) 

  div. kutisë etiketën span ( 
  ; display: block; 
  ; color: # bbbbbb; 
  font-size: 12px; 
  hedh në qarkullim: la; 
  width: 100px; 
  text-lidhur: right; 
  0 0 ; mbushje: 5px 20px 0 0; 
  ) 

  div. kuti. input_text ( 
  ; mbushje: 10px 10px; 
  width: 200px; 
  ; background: # 262626; 
  double # 171717 ; kufiri-bottom: 1px double # 171717; 
  double # 171717 ; kufiri-top: 1px double # 171717; 
  # 333333 ; kufiri-left: 1px double # 333333; 
  # 333333 ; kufiri-right: 1px double # 333333; 
  ) 

  div. kuti. mesazh ( 
  ; mbushje: 7px 7px; 
  width: 350px; 
  ; background: # 262626; 
  double # 171717 ; kufiri-bottom: 1px double # 171717; 
  double # 171717 ; kufiri-top: 1px double # 171717; 
  # 333333 ; kufiri-left: 1px double # 333333; 
  # 333333 ; kufiri-right: 1px double # 333333; 
  mbushem plotë: hidden; 
  height: 150px; 
  ) 

  div. kuti. button 
  ( 
  10px 0 ; margin: 0 0 10px 0; 
  ; mbushje: 4px 7px; 
  ; background: # CC0000; 
  kufitare: 0px; 
  ; pozicionin: relative; 
  top: 10px; 
  left: 382px; 
  width: 100px; 
  double # 660000 ; kufiri-bottom: 1px double # 660000; 
  double # 660000 ; kufiri-top: 1px double # 660000; 
  #FF0033 ; kufirit-left: 1px double # FF0033; 
  #FF0033 ; kufiri-right: 1px double # FF0033; 
  )