pepelsbey/htmlcss-1__section-4.md

## htmlcss-1__section-4.md

      
    Raw
  

              htmlcss-1__section-4.md
            
          
    Вопросы к разделу «Доступность и формы»

1. <button> или <input type="submit">?


В формах для кнопок лучше использовать элемент button или input[type="submit"] и аналогичные?
В чем разница между  и . Почему в Барбершопе для создания просто кнопок использовали второй вариант?


Лучше использовать button, так как button парный тег. У парных тегов есть псевдоэлементы, которые иногда пригождаются, например для того, чтобы повесить иконку.
Вообще, тег button вышел позже input[type="submit"] и расширил возможности input. Более того, если ничего не указывать в атрибуте type тега button, то тип по умолчанию является submit, но вы всё равно указывайте тип.
Сейчас нет никакого смысла пользоваться input[type="submit"].

Почему в Барбершопе для создания просто кнопок использовали второй вариант?

В этому случае у нас стоял выбор между <a> и <button>. Если элемент никуда не ссылается, то это button.
2. Как поменять фон страницы по радиокнопке?


В слайдере Глейси смена мороженок и фона всей страницы осуществляется с помощью радиокнопок. Как с помощью селектора, учитывающего состояние checked, не просто поменять слайд, но и фон всей страницы? Разве цвет фона не будет параметром body?

Как поменять фон страницы по радиокнопке?

Такие сложные стилистические изменения делают с помощью JavaScript. CSS применяется только для стилизации каких-то простых смен состояний, например :hover, :disabled. Как только появляется чуть более сложная логика, то от изменения стилями отказываются. Ведь вам придётся специально подстраивать разметку под стили.
Конкретнее. Все селекторы в CSS работают в глубь DOM-дерева, а не на наружу. Получается, что при изменение :checked состояния нам нужно, чтобы input находился рядом с body. И тогда у вас может возникнуть мысль создать новый div у которого будет меняться фон, который будет находится рядом с input, а сами input переместить выше. Хотя на макете всё наоборот. Появляется дополнительная разметка. Усложняется понимание CSS-стилей. Также у вас сразу же возникнут проблемы, когда вы захотите добавить новый слайд, ведь придётся писать дополнительные CSS-стили.
3. Как использовать <label>?


С какими типами форм можно использовать label - input, select, еще какие-то?
Как все же правильно делать, обворачивать  в , или же прописывать for и id для каждого из них?
В каких случаях label и поле ввода нужно связывать по id, а когда можно лишний раз не усложнять код и расположить input внутри label?

Спецификация прямо говорит с каким элементами может быть ассоциирован <label>. Посмотреть можно тут.

Нас интересует самый правый ряд.
<label> можно использовать и так и так. Всё зависит от того как удобнее вам в конкретном месте.
Использовать связку for и id удобно, когда вам не нужно, чтобы элементы находились вместе, например при использовании в таблицах.
Часто же, элементы форм оборачивают в <label> и это нормально.
Только есть одно предостережение, когда вы оборачиваете ссылки с помощью <label> делайте это правильно.
<!-- плохой пример -->
<label>
  <input type="checkbox" name="tac">
  <a href="tandc.html">Я согласен с пользовательским соглашением</a>
</label>
Этот пример плох тем, что при клике на текст вы переходите по ссылке и никак не меняете состояние чекбокса.
<!-- хороший пример -->
<label>
  <input type="checkbox" name="tac">
  Я согласен с <a href="tandc.html">пользовательским соглашением</a>
</label>
<!-- хороший пример -->
<label>
  <input type="checkbox" name="tac">
  Я согласен с пользовательским соглашением
</label>
(прочитать <a href="tandc.html">пользовательское соглашение</a>)