WedX - журнал о программировании и компьютерных науках

CSS-стилизация тегов формы

Насколько мне известно, тег <form></form> должен быть невидимым как часть веб-страницы, и что при разработке формы следует использовать теги div (или эквивалентные) для представления физической структуры формы.

Допустимо ли (в соответствии со стандартами W3C) применение CSS к тегу <form></form>? и может ли кто-нибудь указать мне в правильном направлении для литературы по этому вопросу?

23.07.2012

  • Да, вы можете стилизовать его. Официальной литературы явно не существует для оформления тега form, потому что это просто еще один тег. 23.07.2012

Ответы:


1

Насколько мне известно, тег <form></form> должен быть невидимым как часть веб-страницы.

Он должен представлять собой форму. Это определенно видимая вещь

и что при разработке формы следует использовать теги div (или эквивалентные) для представления физической структуры формы.

<div> - это тег последнего средства. Используйте его, когда чего-то более подходящего (например, <form> или <fieldset>) не существует.

Допустимо ли (в соответствии со стандартами W3C) применение CSS к тегу <form></form>?

Несмотря на ошибки в браузерах, допустимо стилизовать любой элемент в документе.

и может ли кто-нибудь указать мне в правильном направлении для литературы по этому вопросу?

Поскольку в элементе нет ничего особенного, он не нуждается в специальной документации.

Самое близкое, что я могу придумать, это это предупреждение из спецификации CSS 2.1:

Примечание. CSS дает атрибуту «класс» столько возможностей, что авторы могли бы разработать свой собственный «язык документа» на основе элементов, почти не связанных с представлением (таких как DIV и SPAN в HTML), и назначая информацию о стиле через атрибут «класс». . Авторам следует избегать этой практики, поскольку структурные элементы языка документа часто имеют распознаваемые и принимаемые значения, а классы, определяемые автором, могут не иметь.

… но относиться к этому вопросу сложно, поскольку вы предлагаете использовать семантическую разметку, но добавляете ненужные div исключительно для стилизации.

23.07.2012

2

Форма — это просто еще один элемент страницы (подумайте об этом как о div, который может содержать элементы ввода/другие элементы). Вы можете стилизовать его с помощью CSS, как и любой другой элемент — все это абсолютно допустимо.

23.07.2012

3

Стилизация тега формы в некоторых случаях может быть полезна. Просто убедитесь, что тег формы действует так, как если бы это был слой. Не нужно делать <div id="myform"><form></form></div>

Просто сформируйте {display:block;}, и он будет действовать так, как будто это div.

О семантике и, поскольку вы просите сделать это правильно: распространенная ошибка - использовать div для меток, а затем терять удобство использования.

Используйте HTML для того, для чего он предназначен! В качестве примера, вот как будет выглядеть базовая форма в HTML в соответствии со стандартом.

<form method="post" action="https://www.someurl.com/formHandler.php">
    <fieldset>
        <legend>Personal info</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" class="text" />
        <label for="email">Email</label>
        <input type="text" id="email" class="text" />
    </fieldset>
    <fieldset>
        <legend>Optional</legend>
        <label for="info">Comments?</label>
        <textarea id="info"></textarea>
        <input type="submit" value="submit" class="submit" />
    </fieldset>
</form>

Подобное использование HTML позволяет пользователю щелкать метки или нажимать вкладку, чтобы сфокусироваться на нужном поле.

Стилизация может быть сложной, однако вам не нужно много кода, если вы знаете, что делаете.

form { display:block; background-color: #9e9e9e; padding: 20px; width: 540px; /*200 + 300 + (20 * 2)*/ }
legend { font-weight: bold; }
label { display: inline-block; width: 200px; float: left; clear: left; }
input.text { display: block; width: 300px; float: left; }
input.submit { margin:20px 0 0 200px; width: auto; }

пример: https://jsfiddle.net/tive/BB85w/

23.07.2012
  • Просто выполните form {display:block;} … это значение по умолчанию. 23.07.2012
  • Распространенной ошибкой является использование div для меток, после чего теряется удобство использования. — Я полностью за использование меток, но это не причина не использовать соответствующие блоки. Отключите CSS, и содержимое будет накладываться друг на друга. 23.07.2012
  • Почему кнопка отправки помечена как необязательная? Разве это не очень важно для процесса сбора данных? 23.07.2012
  • Правильно, form-tag по умолчанию является блочным элементом, так что это правило не нужно. Отключение CSS не приводит к тому, что содержимое перетекает друг в друга. Вы можете добавить ‹br /› между строками по умолчанию. Необязательный набор полей, конечно, просто тривиален. 23.07.2012

  • 4

    Элемент form может быть оформлен так же, как и любой другой элемент, и он имеет некоторые стили по умолчанию в таблицах стилей браузера по умолчанию, см. Таблица стилей по умолчанию для HTML 4 в спецификации CSS 2.1. Самая важная особенность заключается в том, что по умолчанию элемент form отображается как блок с верхним и нижним полями, соответствующими пустой строке. (Хотя в некоторых случаях браузеры фактически скрывают эти поля.)

    23.07.2012
  • 'по умолчанию элемент формы отображается как блок с верхним и нижним полем Это все еще так в HTML 5? 01.05.2019

  • 5

    Я бы сказал, да, вы можете стилизовать форму так же, как любой другой тег. Я бы предпочел стилизовать элемент формы, чем добавить дополнительный div, поскольку я стараюсь, чтобы мой HTML был минимальным.

    Кроме того, на SitePoint есть относительно недавняя статья о стилях форм, которая начинается со стиля сам тег формы.

    23.07.2012
    Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]