@milanista24

Как с помощью html5 и css3 сделать отдельные формы для каждого option в тэге select?

Делаю регистрационную форму студента на html5, css3. На выборе каждого уровня образования (абитуриент, бакалавр, магистр) должны выходить разные поля для заполнения. К примеру для абитуриента: 1) номер школы, 2)балл проходного теста, и т.д.. Соответственно для бакалавра: 1)какой он универ окончил, 2) gpa и т.д.
Реально ли реализовать это все на html5, css3? Или без JS не обойтись?
  • Вопрос задан
  • 2344 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Heafy
Мне кажется это логика отображения, т.е. ближе к отображению.
Посмотрите как это сделано на примере слайдера:
codepen.io/macbobbitt_/pen/jmEBL
Возможно получится так же и с нужными инпутами..

Сырой, но пример:
<body>
    <input class = 'student_radio1' name = 'student' type = 'radio'>Абитуриент<br/>
    <input class = 'student_radio2' name = 'student' type = 'radio'>Бакалавр<br/>
    <input class = 'student_radio3' name = 'student' type = 'radio'>Магистр<br/>

    <input class = 'student_text1' type = 'text' placeholder = 'Абитуриент'>
    <input class = 'student_text2' type = 'text' placeholder = 'Бакалавр'>
    <input class = 'student_text3' type = 'text' placeholder = 'Магистр'>
        
    <style>
        .student_text1, .student_text2, .student_text3 {display: none}
        .student_radio1:checked ~ .student_text1 {display:block}
        .student_radio2:checked ~ .student_text2 {display:block}
        .student_radio3:checked ~ .student_text3 {display:block}
    </style>
</body>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы