Каким будет правильный способ вставить форму в HTML таким образом, чтобы метки ее полей были на равном расстоянии от поля ввода?

Раньше я использовал тег <table>, чтобы структурировать форму таким образом, чтобы у нас была хорошо отформатированная форма, чтобы каждая метка и поле были на одной линии друг с другом, как показано ниже:

Email:       [############]
Password:    [############]

Однако здесь есть семантическая проблема, форма - это не совсем табличные данные. Так что если таблица подходит графически, то не на семантическом уровне.

Каков был бы правильный способ структурировать форму, чтобы она была графически приятной, а также семантически правильной с точки зрения типа данных?


html css w3c
person netbrain    schedule 18.04.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Эта статья List Apart делает именно это.

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

Решение с гибкими размерами см. в разделе гибкие элементы ввода.

person Pekka    schedule 18.04.2013
comment
единственная проблема, которую ДЕЙСТВИТЕЛЬНО предоставляют таблицы, заключается в том, что вы хотите, чтобы размер был автоматическим, а не фиксированной ширины. - person netbrain; 18.04.2013
comment
@netbrain да, таблицы предлагают некоторые уникальные возможности компоновки, которые невозможно воспроизвести с помощью CSS (за исключением невероятно глупого обходного пути IMO display: table). Гибкую ширину можно сделать с помощью CSS, однако это должно дать вам то, что вам нужно: элементы гибкого ввода - person Pekka; 18.04.2013

arrow_upward
0
arrow_downward

Попробуйте использовать <fieldset>, а затем настройте свой CSS для лучшего вида.

<fieldset>
    <legend>Login</legend>
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" />
    <br />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" />
    <br />
</fieldset>
person Felix Pamittan    schedule 18.04.2013