Форми в HTML

1. Знайомство з формами

Форми в HTML — це важливий інструмент для взаємодії користувачів з веб-сторінками. Вони дозволяють збирати інформацію від користувачів, чи то текст, вибір зі списку, файли або інші дані, які потім можна надіслати на сервер для обробки. У HTML форми створюються за допомогою багатьох елементів, кожен із яких призначений для певного типу введення даних. Основним елементом форм є <form>, який включає інші елементи, такі як <input>, <textarea>, <button>, <select> і інші.

Основні елементи форм

Елементи форм дозволяють створювати поля введення, кнопки, випадаючі списки та інші елементи інтерфейсу, за допомогою яких користувач може вводити дані. Основні теги, що використовуються у формах:

• <form> — основний контейнер для всіх елементів форми. Він визначає, куди і як надсилаються дані.
• <input> — універсальний елемент для створення полів введення різного типу (текст, пароль, радіо-кнопки, чекбокси тощо).
• <label> — елемент, пов’язаний з полем введення, дозволяє позначити його призначення.
• <textarea> — поле для введення багаторядкового тексту.
• <button> — кнопка для відправки форми або виконання інших дій.
• <select> і <option> — випадаючий список, у якому користувач може обрати один або кілька варіантів.

Приклад простої форми

      
    <form action="/submit" method="post">
      <label for="name">Ім'я:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">Електронна пошта:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">Надіслати</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">Ім'я:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Електронна пошта:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Надіслати</button>
</form>

• action в <form> визначає URL, на який надсилаються дані форми.
• method вказує метод надсилання даних: post або get.

HTML <input>

Тег <input> — один з найбільш ууніверсальних елементів форми в HTML. Він підтримує різні типи введення, кожен з яких підходить для певного типу даних.

Синтаксис тега <input>:

<input type="тип" name="ім'я_поля" id="ідентифікатор" value="значення">

<input type="тип" name="ім'я_поля" id="ідентифікатор" value="значення">

Атрибути, які використовуються у <input>:

• type — тип введення (наприклад, текст, пароль, email тощо).
• name — ім’я поля, за яким сервер ідентифікує дані.
• id — унікальний ідентифікатор, використовується для зв’язку з <label>.
• value — значення, яке відображається у полі за замовчуванням (наприклад, текст за замовчуванням у текстовому полі).

Основні типи <input>

• Текстове поле type="text" — для введення невеликого об'єму тексту, наприклад, імені чи прізвища.
  HTML

        
          <label for="username">Ім'я користувача:</label>
          <input type="text" id="username" name="username">
        
      

  HTML

        
          <label for="username">Ім'я користувача:</label>
          <input type="text" id="username" name="username">
        
      
• Пароль type="password" — для введення пароля. Введені символи відображаються як точки або зірочки.
  HTML

        
          <label for="password">Пароль:</label>
  <input type="password" id="password" name="password">
        
      

  HTML

        
          <label for="password">Пароль:</label>
  <input type="password" id="password" name="password">
        
      
• Email type="email" — для введення email-адреси. Це поле перевіряє правильність формату введення.
  HTML

        
          <label for="email">Електронна пошта:</label>
  <input type="email" id="email" name="email">
        
      

  HTML

        
          <label for="email">Електронна пошта:</label>
  <input type="email" id="email" name="email">
        
      
• Номер type="number" — для введення числових значень. Поле дозволяє вводити лише числа.
  HTML

        
          <label for="age">Вік:</label>
  <input type="number" id="age" name="age" min="1" max="100">
        
      

  HTML

        
          <label for="age">Вік:</label>
  <input type="number" id="age" name="age" min="1" max="100">
        
      
• Кнопка відправки type="submit" — відправляє дані форми на сервер. Ця кнопка зазвичай знаходиться наприкінці форми.
  HTML

        
          <input type="submit" value="Відправити">
        
      

  HTML

        
          <input type="submit" value="Відправити">
        
      

Інші корисні атрибути <input>

• placeholder — відображає текст-підказку в полі введення, який зникає, коли користувач починає вводити текст.
  HTML

        
          <input type="text" placeholder="Введіть ваше ім'я">
  

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

            
              <input type="email" name="email" required>
      

• min та max — задають мінімальне та максимальне значення для полів type="number", type="date", та інших числових або часових типів.
  HTML

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

• maxlength — обмежує кількість символів, які можна ввести в текстове поле.
  HTML

        
          <input type="text" name="username" maxlength="20">
  

3. Приклад форми

Зберемо всі розглянуті елементи та атрибути в одну форму:

      <!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Реєстраційна форма</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="name">Ім'я:</label>
    <input type="text" id="name" name="name" placeholder="Введіть ваше ім'я" required>

    <label for="email">Електронна пошта:</label>
    <input type="email" id="email" name="email" placeholder="Введіть email" required>

    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" required>

    <label>Стать:</label>
    <label><input type="radio" name="gender" value="male"> Чоловіча</label>
    <label><input type="radio" name="gender" value="female"> Жіноча</label>

    <label for="subscribe">Підписатися на новини</label>
    <input type="checkbox" id="subscribe" name="subscribe">

    <button type="submit">Зареєструватися</button>
  </form>
</body>
</html>

      <!DOCTYPE html>
    <html lang="uk">
    <head>
      <meta charset="UTF-8">
      <title>Реєстраційна форма</title>
    </head>
    <body>
      <form action="/submit" method="post">
        <label for="name">Ім'я:</label>
        <input type="text" id="name" name="name" placeholder="Введіть ваше ім'я" required>

        <label for="email">Електронна пошта:</label>
        <input type="email" id="email" name="email" placeholder="Введіть email" required>

        <label for="password">Пароль:</label>
        <input type="password" id="password" name="password" required>

        <label>Стать:</label>
        <label><input type="radio" name="gender" value="male"> Чоловіча</label>
        <label><input type="radio" name="gender" value="female"> Жіноча</label>

        <label for="subscribe">Підписатися на новини</label>
        <input type="checkbox" id="subscribe" name="subscribe">

        <button type="submit">Зареєструватися</button>
      </form>
    </body>
    </html>