Skip to content
Azril Hakim
LinkedInGitHub

Forms & Input Elements

Forms are an integral part of web development, allowing users to interact with websites by providing input or submitting data. In HTML, you can create forms to collect various types of information from users. This section will cover the basics of building HTML forms and various input elements you can use within them.

Building HTML Forms

HTML forms are created using the <form> element. They act as a container for input elements like text fields, checkboxes, radio buttons, and more. Forms are essential for tasks such as user login, registration, surveys, and data submission.

Example of a basic form:

<form action="submit.php" method="post">
  <!-- Form elements go here -->
</form>
  • <form>: The opening tag for the form.
  • action: Specifies the URL where the form data will be sent for processing.
  • method: Defines the HTTP method to be used for submitting the form (e.g., GET or POST).

Text Input Fields

Text input fields (<input type="text">) are used to collect single-line text input from users. They are commonly used for fields like names, email addresses, and search queries.

<label for="username">Username:</label>
<input type="text" id="username" name="username">
  • <label>: Provides a label for the input field.
  • for attribute: Links the label to the input field by matching the id.
  • <input>: The input field itself.
  • type="text": Specifies that this is a text input field.
  • id: Unique identifier for the input element.
  • name: Name of the input field used when submitting the form.

Radio Buttons and Checkboxes

Radio buttons (<input type="radio">) and checkboxes (<input type="checkbox">) allow users to make selections from predefined options. Radio buttons are typically used when users can choose only one option from a list, while checkboxes are used for multiple selections.

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to Newsletter</label>
  • <input> with type="radio": Creates a radio button.
  • <input> with type="checkbox": Creates a checkbox.
  • name: Groups radio buttons or checkboxes by the same name to ensure only one radio button or multiple checkboxes are selected within the group.

Select Menus

Select menus (<select>) are used to create dropdown lists. Users can choose one option from a list of available choices.

<label for="country">Select Your Country:</label>
<select id="country" name="country">
  <option value="usa">United States</option>
  <option value="canada">Canada</option>
  <option value="uk">United Kingdom</option>
</select>
  • <select>: Creates a dropdown list.
  • <option>: Defines individual options within the dropdown list.

Textareas

Textareas (<textarea>) allow users to input multiple lines of text, making them suitable for comments, feedback, and longer messages.

<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
  • <textarea>: Creates a textarea input.
  • rows and cols: Define the number of rows and columns for the textarea.

Form Submission and <button>

To submit a form, you need a submit button. You can use the <button> element or an <input> element with type="submit".

<button type="submit">Submit</button>
<input type="submit" value="Submit">
  • <button>: Allows customization of the submit button’s content.
  • <input> with type="submit": A standard submit button.

These are the fundamental HTML elements and concepts related to forms and input elements. In the next sections, we will explore form validation and handling user input with JavaScript.