Псевдоклассы для форм (:checked, :disabled, :required)

<form>
  <input type="checkbox" id="option1" name="option1">
  <label for="option1">Опция 1</label>
</form>

<form>
  <input type="radio" id="radio1" name="radioGroup">
  <label for="radio1">Вариант A</label>
  <br>
  <input type="radio" id="radio2" name="radioGroup">
  <label for="radio2">Вариант B</label>
</form>

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email (неактивно):</label>
  <input type="email" id="email" name="email" disabled>
</form>

<form>
  <label for="username">Имя пользователя (обязательно):</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="city">Город:</label>
  <input type="text" id="city" name="city">
</form>

<form>
  <input type="checkbox" id="terms" name="terms">
  <label for="terms">Согласен с условиями</label>
  <div style="padding: 10px; margin-top: 5px; border: 1px solid #ccc;">
    Текст условий...
  </div>
</form>

<form>
  <button type="submit" disabled>Отправить</button>
</form>

<form>
  <label for="reqField">Обязательное поле</label>
  <input type="text" id="reqField" name="reqField" required>
  <br>
  <label for="optField">Необязательное поле</label>
  <input type="text" id="optField" name="optField">
</form>

<form>
  <div class="radio-option">
    <input type="radio" id="optA" name="myRadio">
    <label for="optA">Вариант A</label>
    <div class="indicator"></div>
  </div>
  <div class="radio-option">
    <input type="radio" id="optB" name="myRadio">
    <label for="optB">Вариант B</label>
    <div class="indicator"></div>
  </div>
</form>

<style>
.radio-option {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 5px;
  position: relative; /* Для позиционирования индикатора, если нужно */
}
.indicator {
  /* Этот div будет менять фон */
  padding: 5px;
  margin-top: 5px;
  border: 1px dashed transparent;
  transition: background-color 0.3s ease;
}
</style>

<form>
  <label for="activeInput">Активное поле:</label>
  <input type="text" id="activeInput">
  <br>
  <label for="disabledInput">Неактивное поле:</label>
  <input type="text" id="disabledInput" disabled>
  <br>
  <button type="button" disabled>Неактивная кнопка</button>
</form>

<form>
  <label for="reqFocus">Обязательное поле:</label>
  <input type="text" id="reqFocus" name="reqFocus" required>
  <br>
  <label for="optFocus">Необязательное поле:</label>
  <input type="text" id="optFocus" name="optFocus">
</form>

<form>
  <input type="checkbox" id="showImage" name="showImage">
  <label for="showImage">Показать картинку</label>
  <br>
  <img src="https://naytikurs.ru/img/7.png" alt="Картинка" class="hidden-image" style="display: none; margin-top: 10px; max-width: 100px;">
</form>

<form>
  <label for="choices">Выберите вариант:</label>
  <select id="choices" name="choices">
    <option value="1">Вариант 1</option>
    <option value="2" disabled>Вариант 2 (недоступен)</option>
    <option value="3">Вариант 3</option>
  </select>
</form>

<form>
  <label for="name">Имя (обязательно):</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">Email (неактивно):</label>
  <input type="email" id="email" name="email" disabled>
  <br>
  <div>
    <input type="radio" id="r1" name="r_group">
    <label for="r1">Радио 1</label>
  </div>
  <div>
    <input type="radio" id="r2" name="r_group">
    <label for="r2">Радио 2</label>
  </div>
</form>