Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Дослідження Різних Типів Полів Введення в HTML | HTML-Форми та Введення Користувача
Ultimate HTML

book
Дослідження Різних Типів Полів Введення в HTML

HTML надає різноманітні елементи <input>, які дозволяють отримувати різні типи даних від користувачів. Розглянемо деякі з найбільш поширених типів полів введення:

email та password

  • type="email": використовується для полів введення електронної пошти, які вимагають дійсної email-адреси. Браузер автоматично перевіряє адресу електронної пошти та пропонує користувачу виправити некоректні значення;

  • type="password": використовується для полів введення пароля, де введений текст приховується з міркувань безпеки. Також можна вказати атрибути minLength та maxLength для встановлення вимог до довжини пароля.

html

index.html

copy
<form onsubmit="return false">
<!-- Email input -->
<label for="mail">Email</label>
<input type="email" id="mail" />
<!-- Password input -->
<label for="password">Password</label>
<input type="password" id="password" />
<button type="submit">Submit</button>
</form>

number

type="number": використовується для введення числових значень. Можна визначити певний діапазон за допомогою атрибутів min і max, а також встановити конкретний крок за допомогою атрибута step.

html

index.html

copy
<form onsubmit="return false">
<label for="year">Year of birth</label>
<input type="number" min="1900" max="2023" id="year" />

<label for="height">Height with 0.1 step</label>
<input type="number" id="height" step="0.1" min="0.1" max="10.0" />

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

telephone

type="tel": призначений для введення телефонних номерів, але не виконує жодної валідації введених даних. Перевірка правильності номера телефону покладається на розробника.

html

index.html

copy
<form onsubmit="return false">
<label for="phone">Phone number:</label>
<input type="tel" id="phone" />

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

прапорець

type="checkbox": дозволяє користувачу вибирати один або декілька варіантів із заздалегідь визначених опцій. Атрибут checked робить прапорець вибраним за замовчуванням.

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite season?</p>
<label>
Winter
<input type="checkbox" name="winter" value="winter" checked />
</label>
<label>
Spring
<input type="checkbox" name="spring" value="spring" />
</label>
<label>
Summer
<input type="checkbox" name="summer" value="summer" />
</label>
<label>
Fall
<input type="checkbox" name="fall" value="fall" />
</label>
</form>

radio

type="radio": створює набір варіантів, з яких можна вибрати лише один. Кожен варіант представлений радіокнопкою, і вибір однієї автоматично скасовує вибір інших. Кожна радіокнопка повинна мати унікальний атрибут value для ідентифікації.

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite food?</p>
<label>
<input type="radio" name="dish" value="pasta" checked />
Pasta
</label>
<label>
<input type="radio" name="dish" value="pizza" />
Pizza
</label>
<label>
<input type="radio" name="dish" value="burger" />
Burger
</label>
<label>
<input type="radio" name="dish" value="steak" />
Steak
</label>
</form>

range

type="range": створює повзунок, який дозволяє користувачам вибирати значення в межах заданого діапазону. Для налаштування поведінки можна використовувати атрибути min, max, step та value.

html

index.html

js

index.js

copy
<form onsubmit="return false">
<label for="day">Day of the week</label>
<input id="day" type="range" value="5" min="1" max="7" step="1" />
</form>
<p>Selected value: <span class="selected-value">5</span></p>
<script src="index.js"></script>

Примітка

JavaScript не є основною темою цього курсу, тому його логіка буде пропущена.

дата та час

  • type="date": дозволяє користувачам вибирати дату з календаря;

  • type="time": дозволяє користувачам вводити час у 24-годинному форматі;

  • type="datetime-local": поєднує введення дати та часу.

Приклад:

html

index.html

copy
<form onsubmit="return false">
<!-- Date input -->
<label for="date">Date</label>
<input type="date" min="1970-01-01" max="2070-01-01" id="date" />

<!-- Time input -->
<label for="time">Time</label>
<input type="time" id="time" />

<!-- Date and Time input -->
<label for="full-time">Date and Time</label>
<input type="datetime-local" min="1900-01-01T00:00" max="2000-01-01T00:00" id="full-time" />
</form>

Примітка

Для забезпечення однакового стилю на різних пристроях часто використовують готові рішення для спливаючих календарів і полів введення часу.

question mark

Яка основна відмінність між полями введення type="email" та type="password"?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 5

Запитати АІ

expand
ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

some-alt