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

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

Это форма!




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

Это форма!




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

   -

   -

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




 

 Это форма!

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 что приоритетнее?


    2005-11-28 at 6:57 pm
  2. Баранов Андрей :

    для sergey:

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

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

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

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


    2005-11-28 at 9:21 pm
  3. Alex :

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


    2005-11-29 at 1:17 am
  4. Баранов Андрей :

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


    2005-11-29 at 11:05 am
  5. Alex :

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


    2005-11-29 at 1:25 pm
  6. Баранов Андрей :

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


    2005-11-29 at 3:28 pm
  7. ya-dub :

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


    2005-11-29 at 8:14 pm
  8. amix :

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


    2005-11-29 at 9:19 pm
  9. Баранов Андрей :

    для ya-dub :

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


    2005-11-29 at 9:43 pm
  10. Антон Бо :

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


    2005-11-30 at 11:28 am
  11. Баранов Андрей :

    для Антон Бо:

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

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

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


    2005-11-30 at 12:44 pm
  12. Dojd :

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


    2005-11-30 at 9:22 pm
  13. Theo :

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


    2005-12-02 at 12:09 am
  14. Flack :

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


    2005-12-16 at 1:36 pm
  15. Баранов Андрей :

    Для Flack:

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


    2005-12-16 at 2:37 pm
  16. talisman87 :

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


    2005-12-16 at 11:46 pm
  17. Victor Gr. :

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

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


    2006-02-02 at 4:19 pm
  18. rdm :

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


    2006-04-04 at 4:52 pm
  19. Бизон :

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


    2006-04-21 at 12:44 pm
  20. Энди :

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


    2006-11-19 at 10:19 am
  21. alex_g :

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

    Result: Failed validation, 6 errors


    2007-01-22 at 8:42 pm
  22. Баранов Андрей :

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


    2007-01-22 at 9:34 pm
  23. Андрей :

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


    2007-01-29 at 9:09 am
  24. Strix :

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

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


    2007-02-06 at 5:28 pm
  25. anton :

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


    2007-02-16 at 4:55 pm
  26. Лобач Евгений :

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


    2007-05-02 at 11:34 pm
  27. Огоньков :

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


    2007-09-06 at 8:11 pm
  28. Булат :

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

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

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


    2008-02-24 at 2:38 am