Written by: Geoffrey Callaghan

HTML Forms Cheetsheet

html forms cheetsheet

Let’s delve into HTML forms, covering various form elements, attributes, and advanced features.

1. Form Structure:

<form action="submit_page.php" method="post">
  <!-- Form content goes here -->
  • action Attribute: Specifies the URL where the form data will be sent for processing. It is typically a server-side script or a server endpoint.

  • method Attribute: Determines the HTTP method used for submitting the form data. Common values are post and get. The post method is more secure for sensitive data.

2. Text Input:

<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
  • label Element: Associates a text label with the form element. The for attribute should match the id of the input element.

  • input Element (Text): Creates a single-line text input field.

    • type Attribute: Specifies the input type, such as text.
    • id and name Attributes: Identify the input element.
    • placeholder Attribute: Provides a hint or example text for user input.
    • required Attribute: Makes the field mandatory.

3. Password Input:

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
  • Similar to the text input, but with the type attribute set to password for obscured text entry.

4. Textarea:

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Type your message here"></textarea>
  • textarea Element: Creates a multi-line text input field.

    • rows and cols Attributes: Define the visible number of rows and columns.

5. Radio Buttons:

<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 Element (Radio): Creates a radio button.

    • name Attribute: Groups radio buttons together. Only one option in a group can be selected.

6. Checkboxes:

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
  • input Element (Checkbox): Creates a checkbox.

    • value Attribute: Specifies the value sent to the server when the checkbox is checked.

7. Select Dropdown:

<label for="country">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 Element: Creates a dropdown list.

    • option Element: Represents an option within the dropdown.

8. Form Submission:

<button type="submit">Submit</button>
<button type="reset">Reset</button>
  • button Element: Creates a clickable button.

    • type Attribute: Defines the button type. submit triggers form submission, and reset resets form fields.

9. Form Validation:

<input type="text" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Enter a valid email address" required>
  • pattern Attribute: Specifies a regular expression pattern for input validation.

  • title Attribute: Provides a hint or error message for users.

10. Additional Form Attributes:

  • autocomplete: Controls whether the browser should automatically complete form values.

  • enctype: Specifies how form data should be encoded when submitting (e.g., for file uploads).

  • novalidate: Disables browser’s native form validation.

11. Advanced Form Elements:

  • File Input:
<label for="file">Upload File:</label>
<input type="file" id="file" name="file" accept=".pdf, .doc">
  • Hidden Input:
<input type="hidden" name="user_id" value="123">
  • Date Input:
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate">

This comprehensive overview covers various aspects of HTML forms. Keep in mind that server-side validation is crucial for security, and the front-end validation is just an additional layer for user convenience.