Пример формы без таблицы

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

Это форма!




Эта же форма + CSS:

Это форма!




Поместите курсор над формой, посмотрите как изменились ее элементы.

   - <fieldset>

   - <label>

HTML-код этой формы:


<form method="post" action="#" id="testForm">
 <fieldset>
 <legend>Это форма!</legend>
 <label for="inp1">Фамилия: <br /></label>
  <input id="inp1" name="name1" value="" /><br />
 <label for="inp2">Имя: <br /></label>
  <input id="inp2" name="name2" value="" /><br />
 <label for="inp3">E-mail: <br /></label>
  <input id="inp3" name="name3" value="" /><br />
 <label for="inp4">Страна: <br /></label>
  <select id="inp4" name="name4">
   <optgroup label="cs">
    <option value="">Россия</option>
    <option value="">Украина</option>
    <option value="">Беларусь</option>
   </optgroup>
  </select><br />
 <label for="inp5">Комментарий: <br /></label>
  <textarea id="inp5" cols="10" rows="3" name="name5"></textarea><br />
  <input type="submit" value="Отправить" class="noresize submit" />
 </fieldset>
</form>

CSS:


#testForm {
  font-size:1em; /* размер шрифта формы */
}
#testForm fieldset {
  width:25em;  /* рамка вокруг формы */
  border:solid 1px #333;  /* нормальная граница рамки */
}
#testForm legend {
  color:#333; /* IE использует цвет шрифта не такой,
  как у остальных элементов, исправляем */
  background:inherit;
}
#testForm label {
  float:left; /* подписи к полям сдвигаются влево */
  width:10em; /* ширина колонки подписей */
  line-height:1em;
  margin-right:0.1em; /* отступ до поля ввода */
  text-align:right;
}
#testForm input, #testForm select, #testForm textarea {
  margin:0 0 0.5em 0.2em;
  width:11em; /* ширина полей формы */
  padding:0;
  /* делаем одинаковый шрифт для input, select, textarea */
  font-family: Verdana, sans-serif;
  font-size:100%;
}
#testForm .noresize {
  width:auto; /* для кнопок, переключателей */
}
#testForm .submit {
  /* сдвигаем кнопку отправки */
  margin-left:10.1em;
}

И html, и css проходят валидацию. Никаких хаков, трюков. Работает в: IE5+, FF, Opera, другие не проверял.



Много комментариев (28) к “Пример формы без таблицы”

  1. sergey :

    Спасибо большое!
    Скажите, а чем отличаются стили для элементов?

    Например:
    #testForm
    .testForm

    Первое это id, а второе это класс. Для чего это нужно? Id что приоритетнее?


  2. Баранов Андрей :

    для sergey:

    ID элемента уникален в пределах документа.
    По ID легко обратиться именно к этому элементу из скрипта.
    ID приоритетнее, чем класс, подробнее тут:
    http://pyramidin.narod.ru/css2/cascade.html#cascade

    Когда на странице несколько одинаковых элементов, например одинаково оформленных форм, конечно, лучше использовать классы.

    В данном примере, конечно можно было использовать .testForm

    #testForm – просто так захотелось. Да, стоит заметить, что на этой странице в примере две формы, но у них разный ID.


  3. Alex :

    а зачем использовать ? не логичнее ли поместить label и input в один div?


  4. Баранов Андрей :

    для Alex:
    Не логичнее, вполне достаточно того, что они в form размещены.
    http://pyramidin.narod.ru/html401/forms.html


  5. Alex :

    я имел в виду использование тега br (форум заменил тег на знак вопроса)


  6. Баранов Андрей :

    А, это можно, только вот зачем?
    Нет смысла городить кучу блоков.
    Это только пример, который показывает, как можно сделать. Что будете с ним дальше делать – Вам решать.


  7. ya-dub :

    из html-листинга пропали onmouseover и onmouseout у формы


  8. amix :

    отлично! я и сам делаю формы примерно таким же манером.


  9. Баранов Андрей :

    для ya-dub :

    onmouseover и onmouseout здесь только чтобы показать, что произошло с элементами формы после применения css, т.е. для наглядности. они не имеют отношения к рассматриваемому вопросу.


  10. Антон Бо :

    К сожалению, во втором примере лэйблы и текст в инпутах сильно расходятся по вертикали во всех браузерах. Поэтому, когда дизайнеры бьются за каждый пиксель, приходится использовать таблицы или другие нагромождения :/


  11. Баранов Андрей :

    для Антон Бо:

    Посмотрите это:
    http://xhtml.ru/forum/viewtopic.php?pid=158
    Обнулите значения, установленные браузерами по умолчанию и напишите css в соответствии с Вашими потребностями.

    Пример описывает общие моменты построения формы без таблицы и не учитывает особенности какого-либо конкретного дизайна сайта. Остальное можно доработать для каждого случая индивидуально. Css дает такую возможность.

    Однако, соглашусь, что бывают и совсем клинические случаи дизайна сайта.


  12. Dojd :

    Не слишком любознательно но полезно. Спасибо. Жаль редко обновления здесь.


  13. Theo :

    Хорошая статья. Сам как-то не догадывался, что можно так.


  14. Flack :

    fieldset в конце закройте ;)


  15. Баранов Андрей :

    Для Flack:

    Спасибо, бывает… ;)


  16. talisman87 :

    вместо br лучше использовать padding — универсальнее.


  17. Victor Gr. :

    Очень приятно, что название страны Беларусь написано правильно :)
    А не Белоруссия, как раньше. )

    Соблюдение стандартов даже в этом! :)


  18. rdm :

    Полезная статья, как раз думал, как формы можно оптимизировать :)


  19. Бизон :

    А почему fieldset всегда растягивается на всю доступную ему ширину, а не “обтягивает” поля воода? При определенном дизайне из-за этого стьраница кривит.


  20. Энди :

    Если вы пристально посмотрите на уровень лейблов слева, или поставите им параметр бордер:солид 1px, то увидите, что все лейблы на один пиксель выше полей справа. Это даже так видно, надо только присмотреться.
    Лишь только комбобокс находится на одном уровне с лейблом страна. Маленькая кривизна, но есть.


  21. alex_g :

    Все очень вкусно ,) спасибо

    Result: Failed validation, 6 errors


  22. Баранов Андрей :

    alex_g, спасибо, поправил


  23. Андрей :

    Спасибо большое за информацию, долго не применял тег label, а он вон для чего может пригодиться, как оказалось!..


  24. Strix :

    Красивый пример с градиентом – http://alistapart.com/articles/prettyaccessibleforms

    Спасибо за статью на русском :-)


  25. anton :

    ребята, подскажите пожалуйста, ни как не могу разобраться с action=”#” . как создать этот скрипт обработки данных, и т.д. Цель – создать в локальной сети мини гостевую-доску объявлений… типа как гостевые на народе. чтобы сверху форма, а снизу ответы… заранее благодарю, антон.


  26. Лобач Евгений :

    Все же вместо тега br при многострочном label нужно использовать div, в противном же случае, следующий элемент сползает вправо на ширину label (Opera 9.20).
    Если Вы все же хотите испольховать тэг br то добавьте к тегу br идущему за контролом формы аттрибут clear=all


  27. Огоньков :

    Лобач Евгений, а зачем вам br для многострочного label?
    не разрывные пробелы отменили уже?


  28. Булат :

    Спасибо за статью – очень помогло.

    Неразрывные пробел вообще не даст сделать многострочный label. :)

    А с многострочным label без div много где могут возникнуть проблемы. Например, в IE 6 при разных увеличениях шрифта (large, medium, normal, small, smallest) надписи получаются немного разной длинны в em-ах. И если не оставить запаса, то у кого-то они могут все-таки разползтись. Надежнее divы поставить.



22 queries 0.197 seconds.