close

Introduction to Form in HTML: Structure, Input Types and Examples

HTML form are a crucial part of web development that allows users to interact with a website and submit data to a server. Form are used for a wide range of purposes, such as collecting user information, processing user input, and enabling user actions on a website. In this article, we will explore the attributes and different types of input fields, select elements, textareas, and buttons commonly used in HTML form.

Input Fields

  • <input type="text">: Creates a text input field where users can enter alphanumeric characters.
  • <input type="password">: Displays a password input field that masks the entered characters.
  • <input type="email">: Provides email validation for input fields that require a valid email address.
  • <input type="number">: Restricts input to numeric values only.
  • <input type="checkbox">: Represents a checkbox that users can select or deselect.
  • <input type="radio">: Represents a radio button that allows users to select one option from a group of options.
  • <input type="file">: Enables users to select and upload files.
  • <input type="submit">: Displays a button that submits the form when clicked.
  • <input type="reset">: Displays a button that resets the form to its initial state.
  • <input type="date">: Provides a date picker for selecting dates.
  • <input type="time">: Allows users to input time values.

Select Elements

  • <select>: Creates a dropdown menu with selectable options.
  • <option>: Defines an option within the dropdown menu, placed inside the <select> tag.
  • <optgroup>: объединяет связанные параметры в раскрывающемся меню.
  • <select multiple>: позволяет пользователям одновременно выбирать несколько параметров, удерживая клавишу Ctrl(или клавишу Command на Mac) во время щелчка.

Текстовые области

<textarea>: создает поле ввода многострочного текста, в котором пользователи могут вводить и редактировать более длинные блоки текста. Его размер можно изменить и настроить с помощью таких атрибутов, как rows и cols для определения его размеров.

Кнопки

<button>: представляет кнопку, которая может запускать различные действия в файле form. Его можно использовать для отправки form функции form JavaScript или перехода на другую страницу.

Пример использования:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Этот пример демонстрирует использование различных form элементов, включая input поля, textarea, и кнопку. Не стесняйтесь настраивать элементы и атрибуты в соответствии с вашими конкретными требованиями. checkbox select dropdown submit form