Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Атрибути Елементу Input | Forms
course content

Зміст курсу

Знайомство з HTML

1. Веб Розробка

Світ ВебуЩо таке Інтернет?Розуміння того, як Працює ІнтернетЯк Працює Веб-СайтFrontend проти BackendШлях до Успіху

2. Теги та Атрибути

Розкриття Потенціалу Тегів та Атрибутів HTMLТегиАтрибутиПарні та Одиночні тегиРозмітка ТекстуЧелендж 1: Розмітка ТекстуЧелендж 2: Розмітка ТекстуЧелендж 3: Розмітка ТекстуРозмітка Тексту Спеціального ПризначенняЧелендж: Розмітка Тексту Спеціального ПризначенняВалідація

3. Структура Документа

Секрети Структурних Веб-сторінокСтруктураHead ДокументаПотік ДокументуЧелендж: Структура ДокументаІнструменти Розробника

4. Медіа та Таблиці

Магія Мультимедіа та Динамічних ТаблицьЗображенняЧелендж: ЗображенняЗображення Спеціального ПризначенняГрафічні ФорматиВбудовування Аудіо та ВідеоЧелендж: Аудіо та ВідеоТаблиціЧелендж: Таблиці

5. Форми

Сила Форм: Взаємодійте та ЗалучайтеОснова для Створення ФормиLabel для Input ЕлементаАтрибути Елементу Input Типи Елементу Input Челендж: Input та LabelЕлемент TextareaЕлемент SelectЕлемент DatalistГрупування Елементів Форм

Знайомство з HTML

Атрибути Елементу Input Атрибути Елементу Input

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

value

Атрибут value використовується для встановлення початкового значення елемента <input>. Конкретне значення, яке він приймає, залежить від типу входу:

  • Для кнопок (type="button", type="reset", type="submit") він визначає текст, що відображається на кнопці;
  • Для текстових полів (type="text") і полів введення пароля (type="password") визначає значення за замовчуванням;
  • Для checkbox (type="checkbox") та radio (type="radio") він визначає значення, пов'язане з введенням.

Примітка

Атрибут value не можна використовувати з <input type="file">.

Приклад:

html

index.html

css

index.css

js

index.js

autofocus

Атрибут autofocus вказує на те, що поле введення повинно автоматично фокусуватися при завантаженні веб-сторінки. Коли сторінка завантажується, поле вводу буде виділено автоматично, що дозволить користувачеві почати вводити дані, не натискаючи спочатку на поле вводу.

Приклад:

html

index.html

css

index.css

js

index.js

required

Атрибут required використовується для того, щоб зробити поле введення обов'язковим. Він вказує на те, що поле введення повинно бути заповнене, перш ніж користувач зможе відправити форму. Якщо користувач спробує відправити форму, не заповнивши обов'язкове поле, він отримає повідомлення про помилку валідації, що вказує на те, що поле є обов'язковим.

Приклад:

html

index.html

css

index.css

js

index.js

placeholder

Атрибут placeholder надає користувачеві підказку або приклад очікуваного значення для введення. Короткий текстовий рядок відображається всередині поля введення перед тим, як користувач введе будь-яке значення. Це корисно для полів, що вимагають специфічного форматування, таких як номери телефонів або кредитних карток.

Приклад:

html

index.html

css

index.css

js

index.js

Примітка

У наведених вище прикладах ми використовуємо різні атрибути type для елементів <input>, що суттєво впливає на їхній вигляд та функціональність. Ми заглибимося у різні типи input у наступному розділі.

1. Який атрибут використовується для встановлення значення за замовчуванням для input елемента?
2. Який атрибут використовується для встановлення підказки або прикладу очікуваного значення для input елемента?
3. Який атрибут використовується, щоб вказати, що поле введення повинно бути заповнене перед відправкою форми?

Який атрибут використовується для встановлення значення за замовчуванням для input елемента?

Виберіть правильну відповідь

Який атрибут використовується для встановлення підказки або прикладу очікуваного значення для input елемента?

Виберіть правильну відповідь

Який атрибут використовується, щоб вказати, що поле введення повинно бути заповнене перед відправкою форми?

Виберіть правильну відповідь

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

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

Зміст курсу

Знайомство з HTML

1. Веб Розробка

Світ ВебуЩо таке Інтернет?Розуміння того, як Працює ІнтернетЯк Працює Веб-СайтFrontend проти BackendШлях до Успіху

2. Теги та Атрибути

Розкриття Потенціалу Тегів та Атрибутів HTMLТегиАтрибутиПарні та Одиночні тегиРозмітка ТекстуЧелендж 1: Розмітка ТекстуЧелендж 2: Розмітка ТекстуЧелендж 3: Розмітка ТекстуРозмітка Тексту Спеціального ПризначенняЧелендж: Розмітка Тексту Спеціального ПризначенняВалідація

3. Структура Документа

Секрети Структурних Веб-сторінокСтруктураHead ДокументаПотік ДокументуЧелендж: Структура ДокументаІнструменти Розробника

4. Медіа та Таблиці

Магія Мультимедіа та Динамічних ТаблицьЗображенняЧелендж: ЗображенняЗображення Спеціального ПризначенняГрафічні ФорматиВбудовування Аудіо та ВідеоЧелендж: Аудіо та ВідеоТаблиціЧелендж: Таблиці

5. Форми

Сила Форм: Взаємодійте та ЗалучайтеОснова для Створення ФормиLabel для Input ЕлементаАтрибути Елементу Input Типи Елементу Input Челендж: Input та LabelЕлемент TextareaЕлемент SelectЕлемент DatalistГрупування Елементів Форм

Знайомство з HTML

Атрибути Елементу Input Атрибути Елементу Input

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

value

Атрибут value використовується для встановлення початкового значення елемента <input>. Конкретне значення, яке він приймає, залежить від типу входу:

  • Для кнопок (type="button", type="reset", type="submit") він визначає текст, що відображається на кнопці;
  • Для текстових полів (type="text") і полів введення пароля (type="password") визначає значення за замовчуванням;
  • Для checkbox (type="checkbox") та radio (type="radio") він визначає значення, пов'язане з введенням.

Примітка

Атрибут value не можна використовувати з <input type="file">.

Приклад:

html

index.html

css

index.css

js

index.js

autofocus

Атрибут autofocus вказує на те, що поле введення повинно автоматично фокусуватися при завантаженні веб-сторінки. Коли сторінка завантажується, поле вводу буде виділено автоматично, що дозволить користувачеві почати вводити дані, не натискаючи спочатку на поле вводу.

Приклад:

html

index.html

css

index.css

js

index.js

required

Атрибут required використовується для того, щоб зробити поле введення обов'язковим. Він вказує на те, що поле введення повинно бути заповнене, перш ніж користувач зможе відправити форму. Якщо користувач спробує відправити форму, не заповнивши обов'язкове поле, він отримає повідомлення про помилку валідації, що вказує на те, що поле є обов'язковим.

Приклад:

html

index.html

css

index.css

js

index.js

placeholder

Атрибут placeholder надає користувачеві підказку або приклад очікуваного значення для введення. Короткий текстовий рядок відображається всередині поля введення перед тим, як користувач введе будь-яке значення. Це корисно для полів, що вимагають специфічного форматування, таких як номери телефонів або кредитних карток.

Приклад:

html

index.html

css

index.css

js

index.js

Примітка

У наведених вище прикладах ми використовуємо різні атрибути type для елементів <input>, що суттєво впливає на їхній вигляд та функціональність. Ми заглибимося у різні типи input у наступному розділі.

1. Який атрибут використовується для встановлення значення за замовчуванням для input елемента?
2. Який атрибут використовується для встановлення підказки або прикладу очікуваного значення для input елемента?
3. Який атрибут використовується, щоб вказати, що поле введення повинно бути заповнене перед відправкою форми?

Який атрибут використовується для встановлення значення за замовчуванням для input елемента?

Виберіть правильну відповідь

Який атрибут використовується для встановлення підказки або прикладу очікуваного значення для input елемента?

Виберіть правильну відповідь

Який атрибут використовується, щоб вказати, що поле введення повинно бути заповнене перед відправкою форми?

Виберіть правильну відповідь

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

Секція 5. Розділ 4
some-alt