Текстові поля форм в html

Поле введення однострочного тексту
Ці елементи мають багато додаткових атрибутів, які змінюють способи взаємодії з полем, і накладають обмеження на вводиться текст. елемент
елемент є самим багатозадачним в HTML. Різні значення атрибуту type кардинальним чином змінюють його поведінку. Він може відповідати за вибір і завантаження файлів, введення дати, вибір кольору з палітри, і багато іншого. Ми розглянемо тільки ті значення, які перетворять його в поле для введення тексту.
Список значень атрибуту type:
У чому відмінність типів полів
HTML визначає особливу семантику для кожного типу, наведеного вище. У браузері ці поля відображаються однаково. Різниця буде відчутна при взаємодії з ними на мобільних пристроях.
Блокування вмісту поля
елемент можна заблокувати для редагування. У HTML є атрибут disabled. Його використання забарвить поле введення в сірий колір, а при відправці форми дані не будуть включені в тіло запиту.
Атрибут readonly має схожий поведінкою. Його додавання не викличе зафарбовування поля сірим кольором, але текстовий вміст стане недоступним для редагування. На відміну від атрибута diasbled. дані з такого текстового поля будуть включені в тіло запиту під час відправлення.

рис 1. Приклад відображення заблокованих полів введення
Значення і підказки текстових полів
Поля можуть мати деякі попередньо налаштований. Зовсім не обов'язково чекати введення тексту від користувача. Для установки вмісту необхідно використовувати атрибут value. Якщо користувач не змінить попередньо налаштований, при відправці вони будуть включені в тіло запиту як є.
HTML також дозволяє допомогти користувачеві за допомогою підказок. Значення атрибута placeholder буде показано світло сірим кольором всередині поля введення, якщо воно є порожнім. Коли користувач почне додавання тексту - підказка зникне.

рис 2. Показ встановлених значень і підказок
Процес відправки і перевірка даних
Атрибут name вказує унікальне ім'я текстового поля. Він є не обов'язковим, але в разі відсутності, значення не буде включено в тіло запиту під час відправлення форми. Як правило, він задається короткою фразою, що характеризує вміст.
HTML дозволяє здійснювати перевірку введених даних. Якщо вони не будуть відповідати вимогам, при натисканні кнопки відправки, форма виведе повідомлення про помилки і потребують виправлень.
Спеціальний атрибут required зобов'язує поле мати значення. Якщо користувач залишить його порожнім, відправка форми не відбудеться. Існує можливість і більш складних перевірок текстових полів. Атрибут pattern вказує в своєму значенні регулярний вираз, за правилами якого буде проводитися перевірка даних. Значення «[0-9]» відповідає тільки числам, що містить від п'яти до десяти цифр.
Ви можете обмежити кількість символів, що вводять за допомогою атрибута maxlength. У його значенні має перебувати число. При спробі додати більшу кількість символів в текстове поле, їх введення буде заблокований.

рис 3. Повідомлення про неправильно заповненому поле в браузері Google Chrome
Поділіться в соцcетях: