Повторение — Формы №2
Часть раздела Fundamentals путешествия по HTML на Coddy. Урок 47 из 60.
Задание
ЛегкоДавайте создадим простую форму регистрации, точно такую же, как на картинке ниже!
Вот что нужно включить:
- Тег
<form>, чтобы объединить все элементы. - Поле Username с меткой (label) и текстовым вводом. Метка должна содержать текст
"Username:"и использовать for="username". Поле ввода должно иметьid="username",name="username",type="text"и плейсхолдер"Enter your username". - Поле Email с меткой и вводом типа email. Метка должна содержать текст
"Email:"и использоватьfor="email". Поле ввода должно иметьid="email",name="email",type="email"и плейсхолдер"Enter your email". - Поле Password с меткой и вводом типа password. Метка должна содержать текст
"Password:"и использоватьfor="userpassword". Поле ввода должно иметьid="userpassword",name="userpassword",type="password"и плейсхолдер"Enter your password". - Группу радиокнопок, чтобы пользователи могли выбрать свой тип:
"Student"или"Teacher". Добавьте абзац или заголовок с текстом"User Type:"над радиокнопками. Радиокнопка"Student"должна иметьid="student",name="usertype",value="student"и метку с текстом"Student". Радиокнопка"Teacher"должна иметьid="teacher",name="usertype",value="teacher"и метку с текстом"Teacher". Помните: обе радиокнопки должны иметь одинаковый атрибут name ("usertype"), чтобы одновременно можно было выбрать только одну. - Группу чекбоксов, чтобы пользователи могли выбрать свои интересы:
"Sports","Music"и"Technology". Добавьте абзац или заголовок с текстом"Interests:"над чекбоксами. Чекбокс"Sports"должен иметьid="sports",name="interests",value="sports"и метку с текстом"Sports". Чекбокс"Music"должен иметьid="music",name="interests",value="music"и метку с текстом"Music". Чекбокс"Technology"должен иметьid="technology",name="interests",value="technology"и метку с текстом"Technology". Помните: все чекбоксы должны иметь одинаковый атрибут name ("interests"), так как они находятся в одной группе. - Кнопку Sign Up и кнопку Clear в конце формы. Кнопка Sign Up должна иметь
type="submit", а кнопка Clear —type="reset". Кнопка Sign Up должна отображать текст "Sign Up", а кнопка Clear — текст “Clear”.
Обязательно добавьте соответствующие метки и заголовки для удобства пользователя!
Помните, что поля ввода должны включать эти важные атрибуты:
type,id,nameиvalue.
Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<!-- Напишите код здесь -->
</body>
</html>Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2Потренируйтесь самостоятельно: Песочница Web