Атрибуты полей ввода
Часть раздела Fundamentals путешествия по HTML на Coddy — урок 37 из 60.
Ниже приведены некоторые другие полезные атрибуты для текстовых полей ввода:
placeholder: Предоставляет короткую подсказку, описывающую ожидаемое значение поля ввода (например, "Enter your name").value: Устанавливает начальное значение поля ввода.maxlength: Указывает максимальное количество символов, разрешенное в поле ввода.
Вот пример того, как создать текстовое поле ввода с плейсхолдером:
<input type="text" name="username" placeholder="Enter username">В этом примере у нас есть текстовое поле ввода с именем "username" и плейсхолдером, который гласит "Enter username". Когда поле ввода пустое, текст плейсхолдера будет отображаться внутри поля. Как только пользователь начнет вводить текст, плейсхолдер исчезнет.
Задание
ЛегкоСоздайте HTML-документ, который включает форму со следующими текстовыми полями ввода:
- Текстовое поле ввода с именем "firstname" и плейсхолдером "Enter your first name".
- Текстовое поле ввода с именем "lastname" и плейсхолдером "Enter your last name".
- Текстовое поле ввода с именем "email" и плейсхолдером "Enter your email". Установите максимальную длину этого поля ввода равной 50 символам.
Шпаргалка
Полезные атрибуты для текстовых полей ввода:
placeholder: Предоставляет короткую подсказку, описывающую ожидаемое значение поля вводаvalue: Устанавливает начальное значение поля вводаmaxlength: Определяет максимальное количество символов, допустимых в поле ввода
Пример текстового поля ввода с плейсхолдером:
<input type="text" name="username" placeholder="Enter username">Текст плейсхолдера отображается, когда поле ввода пустое, и исчезает, когда пользователь начинает вводить текст.
Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<!-- Напишите код здесь -->
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2