HTML - Корректный способ кодировать флажок с Маркировкой
Я использовал formtastic для генерации HTML-форм на приложениях направляющих. Мой вопрос, однако, действительно связан с HTML.
Сегодня я нашел, что странное поведение на пути formtastic генерирует флажки (поля типа :boolean на formtastic малопонятном жаргоне).
Остальная часть полей (нефлажки) сгенерирована этот путь:
Флажки, однако, включаются в их теги полностью - как это:
Философия Formtastic, кажется, основана на Обучении Любить презентацию Форм. В действительности на слайде 36 из той презентации эта структура предлагается для флажков. Я предполагаю в самой презентации, предъявитель объяснил, почему это было сделано, но она не записана на слайдах.
Может любой говорить мне почему, включая флажки в их тег мог бы быть хорошей идеей, в противоположность помещению их снаружи, как с текстовыми полями?
2 ответа
Обычный пользовательский интерфейс для ввода текста представляет собой либо метку слева:
Email address: [____________________]
, либо метку над полем ввода:
Email address:
[___________________________________]
Однако для флажка , общий пользовательский интерфейс заключается в том, что метка появляется после ввода, например:
[x] Accept terms and conditions
Для первых двух случаев это значительно упрощает CSS, который вы должны создать, если метка находится перед вводом в разметка.Можно было бы возразить, что метка может по-прежнему обтекать ввод, но здесь важно то, что текст идет перед вводом.
В третьем примере (флажок) текст идет после метки, и опять же, CSS значительно упрощается, помещая метку в нужное место в порядке разметки (после ввода).
Таким образом, флажки всегда будут отличаться от остальных входов. Что касается обертывания флажка меткой, это было просто личным предпочтением, хотя я бы сказал, что, поскольку входы флажка разные, наличие ввода внутри метки упрощает нацеливание на них входы для стилизации с помощью CSS, потому что разметка другая.
Кто-нибудь может сказать мне, почему включение флажков внутри их тега
может быть хорошей идеей
Это может будет хорошей идеей, потому что в этом случае вы можете потерять id и для атрибутов , что упростит разметку. Когда находится внутри , связь между ними неявная. (См. HTML4 раздел 17.9.1.)
Однако на практике это не работает в IE, поэтому вы теряете это потенциальное преимущество.
Я могу только предположить, что в данном случае это из соображений макета / стиля.