Како направити добар потрази форми без стола, ЦСС, Туториали |

Како направити добар потрази форми без табела

Овај туториал објашњава како обликовати добру форму користећи чисту ЦСС дизајна са само ознаку и улазне ознаке симулира ХТМЛ табела структуре. Можете користити свим ЦСС / хтмл елемената за дизајнирање Ваших корисничких образац за Вашу уеб пројекти:

form-17

Корак 1: Направите основни ХТМЛ структура


  <форм> 
  > <див цласс = "бокс"> 
  <х1> Контакт формулар: </ Х1> 
  <лабел> 
  <спан> Пуно име </ спан> 
  class = "input_text" name = "name" id = "name" / > <инпут тыпе = "текст" цласс = "инпут_текст" наме = "наме" ид = "наме" /> 
  </ Лабел> 
  <лабел> 
  <спан> Емаил </ спан> 
  class = "input_text" name = "email" id = "email" / > <инпут тыпе = "текст" цласс = "инпут_текст" наме = "емаил" ид = "емаил" /> 
  </ Лабел> 
  <лабел> 
  <спан> Предмет </ спан> 
  class = "input_text" name = "subject" id = "subject" / > <инпут тыпе = "текст" цласс = "инпут_текст" наме = "субјецт" ид = "субјецт" /> 
  </ Лабел> 
  <лабел> 
  <спан> Порука </ спан> 
  name = "feedback" id = "feedback" > </textarea> <текстареа цласс = "мессаге" наме = "феедбацк" ид = "феедбацк"> </ Текстареа> 
  class = "button" value = "Submit Form"  / > <инпут тыпе = "буттон" цласс = "буттон" валуе = "Субмит Форм" /> 
  </ Лабел> 
 
 
  </ Див> 
  </ Форм>

Корак: 2 Креирај ЦСС Шифра


  ; padding : 0 ; } * (Маргин: 0; паддинг: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } боды (фонт: 100% нормалан Ариал, Хелветица, санс-сериф; бацкгроунд: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } облику, инпут, селецт, Текстареа (маргин: 0; паддинг: 0; цолор: # ФФФФФФ;) 

  џин. оквир ( 
  ; маргин: 0 ауто; 
  уидтх: 500пкс; 
  ; бацкгроунд: # 222222; 
  позиција: релативе; 
  топ: 50пкс; 
  # 262626 ; бордер: 1пкс солид # 262626; 
  ) 

  џин. оквир Х1 (  
  ; цолор: # ФФФФФФ; 
  фонт-сизе: 18пкс; 
  текст-трансформ: верзал; 
  5px 5px ; паддинг: 5пкс 0 5пкс 5пкс; 
  # 161712 ; бордер-боттом: 1пкс солид # 161712; 
  # 161712 ; бордер-топ: 1пкс солид # 161712;  
  ) 

  џин. кутија налепница ( 
  уидтх: 100%; 
  ; дисплаы: блоцк; 
  ; бацкгроунд: # 1Ц1Ц1Ц; 
  # 262626 ; бордер-топ: 1пкс солид # 262626; 
  # 161712 ; бордер-боттом: 1пкс солид # 161712; 
  10px 0 ; паддинг: 10пкс 0 10пкс 0; 
  ) 

  џин. бокс лабел спан ( 
  ; дисплаы: блоцк; 
  ; цолор: # бббббб; 
  фонт-сизе: 12пкс; 
  пловак: лево; 
  ширина: 100пикс; 
  текст-алигн: ригхт; 
  0 0 ; паддинг: 5пкс 20пкс 0 0; 
  ) 

  џин. кутија. инпут_текст ( 
  ; паддинг: 10пкс 10пкс; 
  уидтх: 200пкс; 
  ; бацкгроунд: # 262626; 
  double # 171717 ; бордер-боттом: 1пкс # 171717 доубле; 
  double # 171717 ; бордер-топ: 1пкс # 171717 доубле; 
  # 333333 ; бордер-лефт: 1пкс # 333333 доубле; 
  # 333333 ; бордер-ригхт: 1пкс # 333333 доубле; 
  ) 

  џин. кутија. (поруку 
  ; паддинг: 7пкс 7пкс; 
  уидтх: 350 пиксела; 
  ; бацкгроунд: # 262626; 
  double # 171717 ; бордер-боттом: 1пкс # 171717 доубле; 
  double # 171717 ; бордер-топ: 1пкс # 171717 доубле; 
  # 333333 ; бордер-лефт: 1пкс # 333333 доубле; 
  # 333333 ; бордер-ригхт: 1пкс # 333333 доубле; 
  оверфлоу: скривени; 
  хеигхт: 150пкс; 
  ) 

  џин. кутија. дугме 
  ( 
  10px 0 ; маргин: 0 0 10пкс 0; 
  ; паддинг: 4пкс 7пкс; 
  ; бацкгроунд: # ЦЦ0000; 
  бордер: 0пкс; 
  ; позиција: релативе; 
  топ: 10пкс; 
  лефт: 382пкс; 
  ширина: 100пикс; 
  double # 660000 ; бордер-боттом: 1пкс # 660000 доубле; 
  double # 660000 ; бордер-топ: 1пкс # 660000 доубле; 
  #FF0033 ; бордер-лефт: 1пкс # ФФ0033 доубле; 
  #FF0033 ; бордер-ригхт: 1пкс # ФФ0033 доубле; 
  )