Here’s a comprehensive HTML forms cheatsheet for quick reference:

Basic Structure

<form action="url" method="get|post">
  <!-- form elements go here -->
</form>

Common Form Elements

Input Types

<input type="text" name="name" value="default value">
<input type="password" name="password">
<input type="email" name="email">
<input type="tel" name="phone">
<input type="url" name="website">
<input type="number" name="quantity" min="1" max="10">
<input type="range" name="range" min="0" max="100">
<input type="date" name="date">
<input type="time" name="time">
<input type="datetime-local" name="datetime">
<input type="month" name="month">
<input type="week" name="week">
<input type="color" name="color">
<input type="file" name="file">
<input type="hidden" name="hidden" value="secret">
<input type="checkbox" name="checkbox" value="value">
<input type="radio" name="radio" value="value">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Click me" onclick="alert('Button clicked!')">

Labels

<label for="id">Label text</label>
<input type="text" id="id" name="name">

Textarea

<textarea name="message" rows="4" cols="50">Default text</textarea>

Select Dropdown

<select name="options">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Datalist

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Button Elements

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Button clicked!')">Click me</button>

Fieldset and Legend

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

Attributes

Form Attributes

• action: URL to send form data.
• method: HTTP method (get or post).
• target: Target for form submission (_self, _blank, _parent, _top).
• autocomplete: Enable or disable autocomplete (on, off).
• novalidate: Boolean attribute to bypass HTML5 validation.

Input Attributes

• type: Specifies the type of input.
• name: Name of the input field.
• value: Default value.
• placeholder: Placeholder text.
• required: Boolean attribute to mark the field as required.
• readonly: Boolean attribute to make the input readonly.
• disabled: Boolean attribute to disable the input.
• min, max: Define range limits for number, range, date, datetime-local, month, week.
• step: Specifies the legal number intervals.
• maxlength, minlength: Define the length limits for text, password.
• pattern: Specifies a regular expression for input validation.

Form Validation

Built-in Validation

<input type="email" name="email" required>
<input type="password" name="password" minlength="8" required>
<input type="text" name="username" pattern="[A-Za-z]{3,}" required>

Custom Validation

<input type="text" id="custom" name="custom" oninput="setCustomValidity('')" oninvalid="setCustomValidity('Custom validation message')">

Example Form

<form action="/submit" method="post">
  <fieldset>
    <legend>Contact Information</legend>
    <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>
  </fieldset>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

This cheatsheet covers the essentials of creating and managing HTML forms. Use it as a reference to quickly build forms with various input types and attributes.