Week 5: Introduction to HTML Forms

Learn how to collect user input using basic form elements.

Explore Chapter 5

Chapter 5: Collecting User Input with Forms

The <form> Element

HTML forms are used to collect user input. The <form> element acts as a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, etc.

<form action="/submit-page" method="post">
  <!-- Form elements go here -->
  <p>Form content...</p>
</form>

Key Attributes of <form>:

`action`: Specifies the URL where the form data should be sent when the form is submitted. (Often a server-side script).
`method`: Specifies the HTTP method to use when submitting the form data. Common values are:
- `get`: Appends form data to the URL (visible, limited size, good for searches).
- `post`: Sends form data in the HTTP request body (not visible in URL, no size limit, preferred for sensitive data or large submissions).

For this HTML-focused week, we won't process the form data, but understanding these attributes is crucial for when you integrate forms with server-side languages or JavaScript.

Basic Input Fields (<input>)

The <input> element is the most versatile form element. Its behavior is determined by its `type` attribute.

Text Input (`type="text"`)

Creates a single-line text input field.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Password Input (`type="password"`)

Similar to text input, but the characters entered are masked (shown as asterisks or dots).

<label for="password">Password:</label>
<input type="password" id="password" name="userpass">

Submit Button (`type="submit"`)

Creates a button that, when clicked, submits the form data to the URL specified in the form's `action` attribute.

<input type="submit" value="Log In"> <!-- The 'value' attribute sets the button text -->

Reset Button (`type="reset"`)

Creates a button that resets all form controls within the <form> to their initial values.

<input type="reset" value="Clear Form">

Generic Button (`type="button"`)

Creates a clickable button with no default behavior. Its functionality is usually added using JavaScript.

<input type="button" value="Click Me" onclick="alert('Button clicked!')">

The <button> Element

An alternative way to create buttons. It offers more flexibility as you can put content like text and images inside it. Its `type` attribute can be `submit` (default), `reset`, or `button`.

<button type="submit">
  <img src="images/save-icon.png" alt="" width="16" height="16"> Save Changes
</button>

<button type="button" onclick="doSomething()">Custom Action</button>

Labels for Inputs (<label>)

The <label> element provides a caption for an item in a user interface. It's crucial for accessibility.

Associating a <label> with an <input> element allows users to click on the label to focus the corresponding input field. Screen readers also use labels to announce the purpose of the input field.

How to Associate Labels:

Use the `for` attribute on the <label>, making its value match the `id` attribute of the corresponding <input> element.

<form action="/submit-page" method="post">
  <!-- Method 1: Using 'for' and 'id' -->
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="firstName">
  <br><br>

  <label for="lname">Last Name:</label>
  <input type="text" id="lname" name="lastName">
  <br><br>

  <input type="submit" value="Submit">
</form>

Always use <label> elements for your form inputs!

Common Input Attributes

Several attributes are commonly used with <input> elements:

`name`: This attribute is essential. Its value is sent to the server along with the input's value when the form is submitted. It identifies the piece of data.
`id`: Provides a unique identifier for the element within the HTML document. Used by <label> tags (`for` attribute) and often by CSS and JavaScript to target the element. Note: `id` is for client-side identification, `name` is for server-side processing.
`value`: Specifies the initial value of the input field. For buttons (`submit`, `reset`, `button`), it sets the text displayed on the button.
`placeholder`: Provides a short hint or example text displayed in the input field before the user enters a value. It disappears when the user starts typing.
`required`: A boolean attribute (no value needed). If present, the user must fill in the input field before submitting the form. The browser may show a default validation message if it's left empty.
`readonly`: A boolean attribute. If present, the input field's value cannot be modified by the user, but it is still sent upon submission.
`disabled`: A boolean attribute. If present, the input field is unusable and un-clickable, and its value is *not* sent upon submission.
`size`: (For `text`, `password`, etc.) Suggests the visible width of the input field in characters.
`maxlength`: (For `text`, `password`, etc.) Specifies the maximum number of characters allowed in the input field.

Example Using Attributes

<form action="/register" method="post">
  <label for="email">Email Address:</label>
  <input type="text"
         id="email"
         name="user_email"
         placeholder="you@example.com"
         required
         size="30">
  <br><br>

  <label for="country">Country:</label>
  <input type="text" id="country" name="user_country" value="USA" readonly>
  <br><br>

  <input type="submit" value="Register">
</form>