Как создавать хорошие перспективные формы без таблицы, CSS, Обучение |

Как создавать хорошие перспективные формы без таблицы

Это руководство объясняет, как создать хорошую форму с помощью чистого CSS дизайн только с этикеткой и ввод метки для имитации один HTML таблицы структуры. Вы можете использовать все CSS / HTML элементы для разработки пользовательских форм для веб-проектов:

form-17

Шаг 1: Создание базового HTML структуры


  <form> 
  > <div класса = "box"> 
  <h1> Обратная связь: </ h1> 
  <label> 
  <span> Полное имя </ SPAN> 
  class = "input_text" name = "name" id = "name" / > <input типа = "text" класс = "input_text" NAME = "name" ID = "name" /> 
  </ метка> 
  <label> 
  <span> электронная почта </ SPAN> 
  class = "input_text" name = "email" id = "email" / > <input типа = "text" класс = "input_text" NAME = "email" ID = "email" /> 
  </ метка> 
  <label> 
  <span> Тема </ SPAN> 
  class = "input_text" name = "subject" id = "subject" / > <input типа = "text" класс = "input_text" NAME = "subject" ID = "subject" /> 
  </ метка> 
  <label> 
  <span> сообщение </ SPAN> 
  name = "feedback" id = "feedback" > </textarea> <textarea класс = "message" имя = "feedback" ID = "feedback"> </ textarea> 
  class = "button" value = "Submit Form"  / > <input типа = "button" класс = "button" значение = "Submit Form" /> 
  </ метка> 
 
 
  </ DIV> 
  </ FORM>

Шаг: 2 Создание CSS кодекс


  ; padding : 0 ; } * (Разницы: 0; обивка: 0;) 
  % normal  Arial, Helvetica, sans-serif ; background : # 161712 ; } (тело шрифта: 100% нормального Arial, Helvetica, без-Serif; фона: # 161712;) 
  ; padding : 0 ; color : #ffffff ; } Форма, ввода выбора, textarea (разницы: 0; обивка: 0; цвет: # FFFFFF;) 

  Div. коробку ( 
  ; маржи: 0 авто; 
  ширина: 500px; 
  ; Справочная информация: # 222222; 
  Позиция: относительная; 
  рейтинг: 50px; 
  # 262626 ; границы: 1px твердых # 262626; 
  ) 

  Div. поле h1 (  
  ; COLOR: # 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. коробку этикетку Span ( 
  ; Дисплей: Блок; 
  ; COLOR: # bbbbbb; 
  размер шрифта: 12px; 
  поплавковый: слева; 
  ширина: 100px; 
  Текст-присоединяются: право; 
  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; 
  ; Позиция: относительная; 
  рейтинг: 10px; 
  Осталось: 382px; 
  ширина: 100px; 
  double # 660000 ; нижней границы: 1px двойных # 660000; 
  double # 660000 ; верхней границы: 1px двойных # 660000; 
  #FF0033 ; границы слева: 1px двойной # FF0033; 
  #FF0033 ; пограничных право: 1px двойной # FF0033; 
  )