Полевые наборы и легенды - PullRequest
Новая
       24

Полевые наборы и легенды

5 голосов
/ 31 октября 2008

Хорошо, я знаю, как fieldset / legend работает в HTML. Допустим, у вас есть форма с некоторыми полями: 

<form>
    <fieldset>
        <legend>legend</legend>
        <input name="input1" />
    </fieldset>
</form>

Для чего мне использовать legend? Он отображается как title , но разве легенда не является семантическим объяснением содержания? На мой взгляд, желательно, чтобы вы сделали что-то вроде этого: 

<form>
    <fieldset>
        <legend>* = required</legend>
        <label for="input1">input 1 *</label><input id="input1" name="input1" />
    </fieldset>
</form>

Но на самом деле это не работает с тем, как визуализируются наборы полей. Является ли это просто двусмысленным наименованием в HTML, или это мое неправильное понимание английского слова «легенда»?

Редактировать: исправлены некоторые ошибки; -)

Ответы [ 5 ]

8 голосов
/ 31 октября 2008

Да, наименование неоднозначно. Лучше всего рассматривать его как заголовок для набора полей.

См. спецификацию HTML для элементов FIELDSET и LEGEND , если вы еще этого не сделали:

Элемент LEGEND позволяет авторам назначить заголовок для FIELDSET. Легенда улучшает доступность, когда FIELDSET отображается не визуально.

1 голос
/ 31 октября 2008

Элемент <legend> является семантическим эквивалентом «заголовка» или «заголовка» для группы элементов управления формы, содержащихся в <fieldset>.

Элемент FIELDSET позволяет авторам сгруппировать тематически связанные элементы управления

, что означает, что fieldset s должен сгруппировать несколько элементов управления формой, а не просто одну пару <input> и <legend>.

На самом деле <div> с, <p> с или <li> с являются вполне подходящими контейнерами для <input> + <legend> пар.

1 голос
/ 31 октября 2008

Думайте о легенде как о названии группы. Вы используете его для группировки похожих элементов формы. Вы можете иметь все поля ввода для адреса доставки в одном наборе полей с легендой «Адрес доставки» и набор всех полей ввода для адреса выставления счета в другом наборе полей с легендой «Адрес выставления счета».

Вот пример:

Полевые наборы в Skiviez Checkout http://piasecki.name/fieldset-legend-example.jpg

Их может быть сложно стилизовать с помощью CSS (поскольку Internet Explorer неправильно отображает фон набора полей. В нашей таблице стилей IE есть несколько хороших примеров; посмотрите в разделе "#content form fieldset".

1 голос
/ 31 октября 2008

Когда вы говорите, что легенда "Она отображается в виде заголовка" ... очевидно, это зависит от используемого CSS. Если вы не указываете CSS самостоятельно, каждый браузер использует свои собственные встроенные стили, которые могут быть, а могут и не быть лучшими.

Я согласен, что легенда отличается от названия ... Я не обязательно думаю, что легенда является подходящим местом для чего-то вроде "* = required" (это кажется просто предостерегающей информацией для пользователя не совсем объяснение самого набора полей).

Легенда, в конце концов, может быть определена как подпись или краткое описание, сопровождающее иллюстрацию (обычно; в данном случае что-то иное, чем изображение).

Что касается отображения, опять же, CSS дает вам возможность заставить его отображаться (или нет) так, как вы считаете нужным.

1 голос
/ 31 октября 2008

Полагаю, вы хотели написать 

<form>
    <fieldset>
        <legend>legend</legend>
        <input name="input1" />
    </fieldset>
</form>

но вы правы частично. Слово легенда имеет несколько значений, включая

  • пояснительная подпись, сопровождающая иллюстрация.
  • пояснение таблица или список символов появляются на карте или диаграмме.

Так что на самом деле это может означать и то и другое.

...