Матвей Земсков

Заметки веб-мастера

Понедельник, 18 октября 2010 08:29

Верстка формы без использования таблиц.

Оцените материал
(2 голосов)

В этой небольшой заметке я опишу процесс верстки html–формы без использования табличной разметки. Наша будущая форма будет предназначена для регистрации новых пользователей на сайте. Каждое поле формы с подписью будет находиться на новой строке. Подписи и поля будут выровнены друг под другом, создавая ощущение, как будто мы использовали табличную верстку. Вобщем будет красиво ☺.

Разметка формы будет следующая:

HTML

     <form id="myForm">
       <fieldset>
         <legend>Регистрация</legend>
       <div>
         <label for="login">Логин:</label>
         <input type="text" name="login" id="login" />   
       </div>
       <div>
         <label for="password">Пароль:</label>
         <input type="password" name="password" id="password" />   
       </div>
       <div>
         <label for="confirmPassword">Подтверждение пароля:</label>
         <input type="password" name="confirmPassword" id="confirmPassword" />   
       </div>
       <div class="s_but">
         <input type="submit" name="submit" value="Регистрация" id="submit" />
       </div>
     </fieldset>
    </form> 

Каждый набор из элементов формы (подписи и поля) размещаем в элементе <div></div>. Подписью будет содержимое элемента <label></label>

Сначала сделаем элементы хранящие подписи блочными и установим им ширину.

После этого мы увидим, что поля съезжают на новую строку. Чтобы это исправить, мы применим к ним еще одно правило css, которое называется float.

таким образом. у нас получится следубющий набор правил css:

CSS

    #myForm label{
      display:block;
      width:7em;
	  float:left;
     }

Теперь нужно сделать отступы между блоками, обрамляющими элементы формы и выравниваем кнопку «Отправить».

В итоге к нашей форме будет применена следующая таблица стилей:

CSS

 #myForm{
    background-color:#dfdfdf;
	border:1px solid #000;
	width:20em;
	height:10em;
	padding:10px;
	margin-left:auto;
	margin-right:auto;
	position:relative;	
   }
      
   #errBlock{
     width:100px;
	 position: absolute;
	 top:10px;
	 left:10px;
	 background:#cfc;
	 border:1px solid #00f;
	 text-align:center;
	 color:#f00;
	 font-size:.8em;
   }
      
   #myForm label{
    display:block;
    width:7em;
	float:left;
   }
   #myForm div{
    margin-bottom:.3em;
   }
   .s_but{
    text-align:center;
	margin-top:.3em;
	clear:both;
   }
  #login, #password, #confirmPassword{
    border-color:#7f9db9;
	border-width:1px;
	border-style:solid;
   }

Выглядеть форма будет так:

бестабличная верстка формы

В итоге у нас получилась очень прилично выглядящая форма регистрации на сайте.

Прочитано 4281 раз
Добавить комментарий

Комментарии   

 
0 # Андрис 07.10.2016 16:30
Спасибо за статью. Только ен понял, а к чему относится CSS правило с id #errBlock, если оно не встречается в самом html? пробовал и без него - нет отличий в отображении...
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 10.10.2016 11:05
Пожалуйста! Элемент с id #errBlock в данном случае предназначен для вывода ошибок при заполнении формы посетителем. Его нет в верстке. Он добавляется в форму динамически.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Андрис 10.10.2016 11:17
Спасибо)) Понял)
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: