Kung paano gumawa ng magandang form na naghahanap nang walang mesa, Css, Tutorials |

Kung paano gumawa ng magandang form na naghahanap nang mesa

Ito tutorial ay nagpapaliwanag kung paano mag-disenyo ng isang magandang form gamit ang isang malinis na CSS disenyo lamang label at input ng mga tag sa mga magsa-isang HTML mesa istraktura. Maaari mong gamitin ang lahat ng CSS / HTML sangkap sa iyong pasadyang disenyo ng form para sa iyong mga web mga proyekto:

form-17

Hakbang 1: Gumawa ng basic HTML na istraktura


  <form> 
  > <div class = "box"> 
  <h1> Makipag-ugnayan sa Form: </ h1> 
  <label> 
  <span> Buong pangalan </ span> 
  class = "input_text" name = "name" id = "name" / > <input type = "text" class = "input_text" pangalan = "name" id = "name" /> 
  </ label> 
  <label> 
  <span> Email </ span> 
  class = "input_text" name = "email" id = "email" / > <input type = "text" class = "input_text" pangalan = "email" id = "email" /> 
  </ label> 
  <label> 
  <span> Paksa </ span> 
  class = "input_text" name = "subject" id = "subject" / > <input type = "text" class = "input_text" pangalan = "subject" id = "subject" /> 
  </ label> 
  <label> 
  <span> Mensahe </ span> 
  name = "feedback" id = "feedback" > </textarea> <textarea class = "message" pangalan = "feedback" id = "feedback"> </ textarea> 
  class = "button" value = "Submit Form"  / > <input type = "button" class = "button" value = "Submit Form" /> 
  </ label> 
 
 
  </ span> 
  </ form>

Hakbang: Gumawa ng 2 CSS Code


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } katawan (font: 100% normal Arial, Helvetica, walang-serif; background: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } form, input, piliin, textarea (margin: 0; padding: 0; kulay: # FFFFFF;) 

  div. kahon ( 
  ; margin: 0 auto; 
  width: 500px; 
  ; background: # 222222; 
  posisyon: kamag-anak; 
  itaas: 50px; 
  # 262626 ; border: 1px solid # 262626; 
  ) 

  div. kahon h1 (  
  ; kulay: # FFFFFF; 
  font-size: 18px; 
  text-ibang-anyo: uppercase; 
  5px 5px ; padding: 5px 0 5px 5px; 
  # 161712 ; hangganan-ilalim: 1px solid # 161712; 
  # 161712 ; border-top: 1px solid # 161712;  
  ) 

  div. kahon label ( 
  width: 100%; 
  ; display: block; 
  ; background: # 1C1C1C; 
  # 262626 ; border-top: 1px solid # 262626; 
  # 161712 ; hangganan-ilalim: 1px solid # 161712; 
  10px 0 ; padding: 10px 0 10px 0; 
  ) 

  div. kahon label span ( 
  ; display: block; 
  ; color: # bbbbbb; 
  font-size: 12px; 
  lamo: kaliwa; 
  width: 100px; 
  text-align: karapatan; 
  0 0 ; padding: 5px 20px 0 0; 
  ) 

  div. kahon. input_text ( 
  ; padding: 10px 10px; 
  width: 200px; 
  ; background: # 262626; 
  double # 171717 ; hangganan-ilalim: 1px double # 171717; 
  double # 171717 ; border-top: 1px double # 171717; 
  # 333333 ; hangganan-kaliwa: 1px double # 333333; 
  # 333333 ; hangganan-kanan: 1px double # 333333; 
  ) 

  div. kahon. mensaheng ( 
  ; padding: 7px 7px; 
  width: 350px; 
  ; background: # 262626; 
  double # 171717 ; hangganan-ilalim: 1px double # 171717; 
  double # 171717 ; border-top: 1px double # 171717; 
  # 333333 ; hangganan-kaliwa: 1px double # 333333; 
  # 333333 ; hangganan-kanan: 1px double # 333333; 
  overflow: nakatagong; 
  height: 150px; 
  ) 

  div. kahon. button 
  ( 
  10px 0 ; margin: 0 0 10px 0; 
  ; padding: 4px 7px; 
  ; background: # CC0000; 
  border: 0px; 
  ; posisyon: kamag-anak; 
  itaas: 10px; 
  kaliwa: 382px; 
  width: 100px; 
  double # 660000 ; hangganan-ilalim: 1px double # 660000; 
  double # 660000 ; border-top: 1px double # 660000; 
  #FF0033 ; hangganan-kaliwa: 1px double # FF0033; 
  #FF0033 ; hangganan-kanan: 1px double # FF0033; 
  )