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

2.1 Елемент <input>

Форми є важливим компонентом веб-сторінок і дають можливість користувачам вводити та надсилати дані. Основними елементами форм є <input>, <textarea> і <button>. Ці елементи дозволяють юзерам вводити текст, вибирати варіанти, завантажувати файли та виконувати інші дії.

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

Загальний синтаксис:

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

Атрибути <input>

• type: визначає тип вводу
• name: ім'я елемента форми, використовується для ідентифікації даних на сервері
• id: унікальний ідентифікатор елемента
• value: початкове значення елемента
• placeholder: текст-заповнювач, який відображається всередині елемента до вводу даних
• required: вказує, що елемент обов'язковий для заповнення

Приклад <input>

input-text дозволяє вводити однорядковий текст.

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

2.2 Елемент <textarea>

Елемент <textarea> використовується для вводу багаторядкового тексту. Він відрізняється від <input type="text"> тим, що дозволяє вводити текст, який містить кілька рядків, та може бути налаштований за розміром.

Загальний синтаксис:

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

Атрибути <textarea>

• name: ім'я елемента форми, використовується для ідентифікації даних на сервері
• id: унікальний ідентифікатор елемента
• rows: кількість рядків тексту
• cols: кількість символів в одному рядку
• placeholder: текст-заповнювач, який відображається всередині елемента до вводу даних
• required: вказує, що елемент обов'язковий для заповнення

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

    
      <label for="comments">Коментарі:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Введіть ваші коментарі тут..."
        required>
      </textarea>
    
  

Стайлинг <textarea>

Елемент <textarea> можна стилізувати за допомогою CSS, щоб покращити зовнішній вигляд і досвід користувача.

Приклад стилізації:

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* resize буде доступний тільки вертикально */
      }
    
  

    
      <label for="comments">Коментарі:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Введіть ваші коментарі тут..." required>
      </textarea>
    
  

2.3 Елемент <button>

Елемент <button> використовується для створення кнопок у формах. На відміну від <input type="button">, елемент <button> більш гнучкий, і він дозволяє вставляти кнопки різні HTML-елементи, такі як текст, зображення тощо.

Загальний синтаксис:

    
      <button type="type" name="name" id="id" value="value">Текст кнопки</button>
    
  

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

    
      <button type="submit">Надіслати</button>
      <button type="reset">Скинути</button>
      <button type="button" onclick="alert('Кнопка натиснута!')">Натисни мене</button>
    
  

Атрибути <button>

1. type: визначає поведінку кнопки. Можливі значення:
   • submit: надсилає форму (значення за замовчуванням)
   • reset: скидає форму
   • button: довільна кнопка, не виконує дій за замовчуванням
2. name: ім'я елемента форми, використовується для ідентифікації даних на сервері.
3. id: унікальний ідентифікатор елемента.
4. value: значення, яке надсилається на сервер при відправленні форми.

Вкладений HTML у <button>

Елемент <button> дозволяє вставляти всередину нього різні HTML-елементи для створення більш складних кнопок.

Приклад з вкладеним HTML:

    
      <button type="type" name="name" id="id" value="value">
        📨Надіслати
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Надіслати">
        Надіслати
      </button>
    
  

Стайлинг <button>

Елемент <button> можна стилізувати за допомогою CSS для покращення зовнішнього вигляду та досвіду користувача.

Приклад стилізації:

    
      button {
        background-color: #4CAF50; /* Зелений фон */
        color: white; /* Білий текст */
        padding: 15px 20px; /* Внутрішні відступи */
        border: none; /* Без рамок */
        border-radius: 4px; /* Зкруглені кути */
        cursor: pointer; /* Вказівник курсора */
      }

      button:hover {
        background-color: #45a049; /* Темно-зелений фон при наведенні */
      }
    
  

    
      <button type="submit">Надіслати</button>