Как се създаде добра форма, без да търси маса, CSS, уроци |

Как се създаде добра форма, без да търси маса

Инстркцията обяснява как да се изработи добра форма с помощта на чисти CSS дизайн само с етикета и приноса на потребителите да симулира една HTML таблица структура. Можете да използвате всички CSS / HTML елементи на дизайна на персонализираната ви форма за вашия уеб проекти:

form-17

Стъпка 1: Създаване на основния HTML структура


  <form> 
  > <div клас = "box"> 
  <h1> Форма за контакти: </ h1> 
  <label> 
  <span> Пълно име </ педя> 
  class = "input_text" name = "name" id = "name" / > <input тип = "text" клас = "input_text" име = "name" ID = "name" /> 
  </ етикет> 
  <label> 
  <span> Email </ педя> 
  class = "input_text" name = "email" id = "email" / > <input тип = "text" клас = "input_text" име = "email" ID = "email" /> 
  </ етикет> 
  <label> 
  <span> Тема </ педя> 
  class = "input_text" name = "subject" id = "subject" / > <input тип = "text" клас = "input_text" име = "subject" ID = "subject" /> 
  </ етикет> 
  <label> 
  <span> Съобщение </ педя> 
  name = "feedback" id = "feedback" > </textarea> <textarea клас = "message" име = "feedback" ID = "feedback"> </ текстово> 
  class = "button" value = "Submit Form"  / > <input тип = "button" клас = "button" стойност = "Submit Form" /> 
  </ етикет> 
 
 
  </ div> 
  </ форма>

Стъпка: 2 Създаване на CSS код


  ; padding : 0 ; } * (Граница: 0; капитониране: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } тялото (шрифта: 100% нормално Arial, Helvetica, без-сериф; фон: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } форма, вход, изберете текстово (граница: 0; капитониране: 0; цвят: # FFFFFF;) 

  div. кутия ( 
  ; марж: 0 авточасти; 
  ширина: 500px; 
  ; фон: # 222222; 
  Позиция: относителна; 
  Top: 50px; 
  # 262626 ; граничен: 1px твърди # 262626; 
  ) 

  div. кутия h1 (  
  ; Цвят: # FFFFFF; 
  размер на шрифта: 18px; 
  текстово-трансформират: главни букви; 
  5px 5px ; капитониране: 5px 0 5px 5px; 
  # 161712 ; граничния отдолу: 1px твърди # 161712; 
  # 161712 ; граничен-нагоре: 1px твърди # 161712;  
  ) 

  div. кутия етикета ( 
  ширина: 100%; 
  ; дисплей: блок; 
  ; фон: # 1C1C1C; 
  # 262626 ; граничен-нагоре: 1px твърди # 262626; 
  # 161712 ; граничния отдолу: 1px твърди # 161712; 
  10px 0 ; капитониране: 10px 0 10px 0; 
  ) 

  div. кутия етикета педя ( 
  ; дисплей: блок; 
  ; Цвят: # bbbbbb; 
  размер на шрифта: 12px; 
  сал: ляво; 
  ширина: 100пк; 
  текстово-приравни: право; 
  0 0 ; капитониране: 5px 20px 0 0; 
  ) 

  div. кутия. input_text ( 
  ; капитониране: 10px 10px; 
  ширина: 200px; 
  ; фон: # 262626; 
  double # 171717 ; граничния отдолу: 1px двойно # 171717; 
  double # 171717 ; граничен-нагоре: 1px двойно # 171717; 
  # 333333 ; граничния наляво: 1px двойно # 333333; 
  # 333333 ; граничния надясно: 1px двойно # 333333; 
  ) 

  div. кутия. съобщение ( 
  ; капитониране: 7px 7px; 
  ширина: 350 пиксела; 
  ; фон: # 262626; 
  double # 171717 ; граничния отдолу: 1px двойно # 171717; 
  double # 171717 ; граничен-нагоре: 1px двойно # 171717; 
  # 333333 ; граничния наляво: 1px двойно # 333333; 
  # 333333 ; граничния надясно: 1px двойно # 333333; 
  преливник: скрити; 
  Височина: 150px; 
  ) 

  div. кутия. бутона 
  ( 
  10px 0 ; марж: 0 0 10px 0; 
  ; капитониране: 4px 7px; 
  ; фон: # CC0000; 
  граница: 0px; 
  ; Позиция: относителна; 
  Top: 10px; 
  ляво: 382px; 
  ширина: 100пк; 
  double # 660000 ; граничния отдолу: 1px двойно # 660000; 
  double # 660000 ; граничен-нагоре: 1px двойно # 660000; 
  #FF0033 ; граничния наляво: 1px двойно # FF0033; 
  #FF0033 ; граничния надясно: 1px двойно # FF0033; 
  )