Загрузка...

Типы input в HTML

Элементы формы перечислили теги внутри form. Типы input фокусируются на одном теге: input. type выбирает лицо контроля. Этот урок — каталог type. Помощники вроде required — дальше.

Зачем нужны типы

type=text почти универсален, но телефон показывает неверную клавиатуру, пароли остаются видимыми, даты становятся свободным текстом. Сопоставление type с данными улучшает ввод, проверки и форму значений.

Прямой ответ

1) Задайте type у input — text, email, password, number, checkbox, radio, date, file, hidden, submit. 2) Свяжите каждый видимый с label. 3) Радио одного ответа делят name; checkbox независим. 4) Для отправки предпочтителен button type=submit. 5) type выбирает только лицо — action/method и следующие атрибуты — другие слои.

📊 Starter input types

type Use Beginner tip
text General single-line text Default when nothing fitter exists
email Email addresses Mobile email keyboard + light format check
password Masked secrets Never store the real password in page source
number Numeric values Good for ages/qty — still validate on the server
checkbox Independent on/off Many can be checked at once
radio One choice in a named group Same name = one group
date Calendar date Browser UI varies; value is YYYY-MM-DD style
file Upload a file Needs multipart form encoding for real uploads
hidden Value not shown Still submitted with name/value

Регистрация: типизированные поля

Небольшая форма вступления: email, пароль, возраст number и дата старта.

Signup with typed inputs

html 
<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

<label for="pw">Password</label>
<input id="pw" name="pw" type="password">

<label for="age">Age</label>
<input id="age" name="age" type="number">

<label for="start">Start date</label>
<input id="start" name="start" type="date">

<button type="submit">Join</button>
</form>

Чтение демо регистрации

  • email → UI почты
  • password маскирует символы
  • number числовой ввод
  • date элемент даты
  • label с for/id; name — ключ
  • action/method без изменений

Опрос: checkbox, radio и file

Переключатели и загрузки — тот же input с другим type. Радио делят name=plan. checkbox сам по себе. file открывает выбор файла.

Survey checkbox radio file

html 
<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>

<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>

<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">

<button type="submit">Send</button>
</form>

Чтение демо опроса

  • checkbox рассылки независим
  • один name → один радио-выбор
  • label делает текст кликабельным
  • file + multipart для загрузок
  • fieldset обрамляет Plan — фокус на type
  • следующий урок: атрибуты вроде required

Выбор нужного type

  • короткий текст: text
  • email/пароль: email/password
  • количество или возраст: number
  • исключительный вариант: radio с одним name
  • независимый тумблер: checkbox
  • день календаря: date
  • вложение: file
  • скрытое: hidden
  • многострочный текст по-прежнему textarea

Практика — меняйте типы

  1. Скопируйте регистрацию; email→text
  2. password кратко как text
  3. второй number для количества
  4. радио с разными name, затем исправьте
  5. Newsletter + Pro; запишите ожидаемые name
  6. file без multipart — для понимания
  7. Предложение: type выбирает лицо input

Частые ошибки

  • text для паролей
  • радио с разными name
  • без label
  • ждать загрузку file без encoding
  • думать, что type заменяет action/name
  • input вместо textarea для длинного текста
  • путать с уроком атрибутов

Кратко

  • один input — много лиц через type
  • сопоставляйте type с данными
  • радио делят name; checkbox сам
  • всегда подписывайте видимое
  • элементы формы и атрибуты input — разные слои
  • далее: атрибуты input

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 51 из 68
Html Урок