Як створювати хороші перспективні форми без таблиці, 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; 
  )