Валідація введення даних

6.1 Атрибут required

Валідація даних у формах є важливим аспектом веброзробки, що допомагає забезпечити правильність і цілісність введеної інформації. HTML надає багато вбудованих атрибутів для перевірки введення даних, таких як required, pattern, min, max, а також атрибути placeholder і value, які покращують взаємодію користувача з формою.

Атрибут required вказує, що поле введення обов'язково для заповнення. Браузер не дозволить відправити форму, якщо поле, позначене як required, не заповнене.

Синтаксис

    
      <input type="text" name="username" required>
    
  

Приклад використання

    
      <form action="/" method="post">
        <label for="username">Ім'я користувача:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit">Відправити</button>
      </form>
    
  

Пояснення

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

6.2 Атрибут pattern

Атрибут pattern дозволяє задати регулярний вираз для перевірки введення даних. Якщо введені дані не відповідають вказаному шаблону, браузер покаже повідомлення про помилку і не відправить форму.

Синтаксис

    
      <input type="text" name="username" pattern="[A-Za-z]{3,}">
    
  

Приклад використання

Атрибут pattern задає регулярний вираз, якому повинні відповідати введені дані. У цьому прикладі ім'я користувача має містити лише літери і бути не коротшим за три символи.

    
      <form action="/" method="post">
        <label for="username">Ім'я користувача (лише літери, мінімум 3 символи):</label>
        <input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
        <button type="submit">Відправити</button>
      </form>
    
  

6.3 Атрибути min і max

Атрибути min і max використовуються для задання мінімальних і максимальних допустимих значень для числових і датованих полів.

Синтаксис

    
      <input type="number" name="age" min="18" max="99">
    
  

Приклад використання

Числове поле

• min: встановлює мінімально допустиме значення. У даному прикладі мінімальний вік — 18 років
• max: встановлює максимально допустиме значення. У даному прикладі максимальний вік — 99 років

    
      <form action="/" method="post">
        <label for="birthday">Дата народження (з 1900-01-01 до 2024-12-31):</label>
        <input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
        <button type="submit">Відправити</button>
      </form>
    
  

6.4 Атрибут placeholder

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

Синтаксис

    
      <input type="text" name="username" placeholder="Введіть ім'я користувача">
    
  

Приклад використання

Атрибут placeholder показує текст усередині поля введення до тих пір, поки користувач не почне вводити дані. У цьому прикладі текст-заповнювач — "Введіть ім'я користувача".

    
      <form action="/" method="post">
        <label for="username">Ім'я користувача:</label>
        <input type="text" id="username" name="username" placeholder="Введіть ім'я користувача" required>
        <button type="submit">Відправити</button>
      </form>
    
  

6.5 Атрибут value

Атрибут value задає початкове значення для елемента введення. Це значення буде відображене в полі при завантаженні сторінки або скиданні форми.

Синтаксис

    
      <input type="text" name="username" value="default user">
    
  

Приклад використання

Атрибут value встановлює початкове значення поля введення. У цьому прикладі ім'я користувача за замовчуванням — "default user".

    
      <form action="/" method="post">
        <label for="username">Ім'я користувача:</label>
        <input type="text" id="username" name="username" value="default user" required>
        <button type="submit">Відправити</button>
      </form>
    
  

1

Опитування

Форми в HTML, рівень 8, лекція 6

Недоступний

Форми в HTML

Форми в HTML

Відкрити