Элементы для ввода цвета, url, email, телефона

Элементы для ввода цвета, url, email, телефона

Coursme
13 мин.
30 янв. 2024

HTML предоставляет различные типы элементов для ввода данных, такие как цвета, URL, Email и телефона

В этом уроке мы рассмотрим, как использовать эти элементы и какие атрибуты им присущи.

Элемент для ввода цвета

Элемент для ввода цвета позволяет пользователям выбирать цвет с помощью встроенного цветового пикера.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Ввод цвета</title>
</head>
<body>
   <label for="colorInput">Выберите цвет:</label>
   <input type="color" id="colorInput">
</body>
</html>

<input type="color" id="colorInput">: Этот элемент создает цветовой пикер, который позволяет пользователю выбрать цвет.

Элемент для ввода URL

Элемент для ввода URL позволяет пользователю ввести веб-адрес.

<label for="urlInput">Введите URL:</label>
<input type="url" id="urlInput" placeholder="https://coursme.com">

<input type="url" id="urlInput" placeholder="https://coursme.com">: Этот элемент ограничивает ввод пользователя, чтобы удостовериться, что введенные данные являются корректным URL.

Элемент для ввода Email

Элемент для ввода Email позволяет пользователю ввести адрес электронной почты.

<label for="emailInput">Введите Email:</label>
<input type="email" id="emailInput" placeholder="coursme@mail.com">

<input type="email" id="emailInput" placeholder="coursme@mail.com">: Этот элемент проверяет, является ли введенный текст действительным адресом электронной почты.

Элемент для ввода Телефона

Элемент для ввода телефона ограничивает ввод, чтобы пользователи могли вводить только числа и знаки плюса, минуса и пробела.

<label for="phoneInput">Введите телефон:</label>
<input type="tel" id="phoneInput" pattern="[0-9+-\s]+">

<input type="tel" id="phoneInput" pattern="[0-9+-\s]+">: Этот элемент использует атрибут pattern, чтобы ограничить ввод только числами и символами +, -, и пробел.

Заключение

Этот урок дал вам подробное представление о различных элементах ввода в HTML, таких как цвета, URL, Email и телефона. Используйте эти примеры в своих проектах и экспериментируйте с различными атрибутами и возможностями, которые они предоставляют

Назад
Следующий урок
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Статьи и курсы
Меню