HTML Forms Cheat Sheet

Basic Form Structure:

<form action="/submit-form" method="post">
  <!-- Form fields go here -->
</form>

Common Input Types:

<input type="text" placeholder="Text Input">
<input type="email" placeholder="Email Input">
<input type="password" placeholder="Password Input">
<input type="number" placeholder="Number Input">
<input type="date" placeholder="Date Input">
<input type="checkbox" id="checkbox_id" name="checkbox_name">
<input type="radio" id="radio_id" name="radio_name" value="option_value">
<input type="file" accept="image/*">
<input type="range" min="0" max="100" step="1">
<input type="color" value="#ff0000">

Text Area:

<textarea placeholder="Your message"></textarea>

Drop-down List:

<select>
  <option value="option_value">Option 1</option>
  <option value="option_value">Option 2</option>
  <!-- Add more options as needed -->
</select>

Form Buttons:

<input type="submit" value="Submit">
<input type="reset" value="Reset">
<button type="button">Click Me</button>

Form Attributes:

action: Specifies where to send the form data when submitted.
method: Specifies the HTTP method (GET or POST) for submitting the form data.
name: Assigns a name to the form for scripting purposes.
id: Assigns a unique identifier to the form for styling and scripting purposes.

Form Validation Attributes:

required: Specifies that the input field must be filled out before submitting the form.
maxlength: Specifies the maximum number of characters allowed in an input field.
minlength: Specifies the minimum number of characters required in an input field.
pattern: Specifies a regular expression pattern for the input field value.

Grouping Form Elements:

<fieldset>
  <legend>Group Name</legend>
  <!-- Form elements go here -->
</fieldset>

Labeling Form Elements:

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

Placeholder Text (Hint):

<input type="text" placeholder="Enter your name">

Disabled Form Elements:

<input type="text" disabled>
<button type="button" disabled>Disabled Button</button>

Autofocus:

<input type="text" autofocus>

Form Accessibility:

Ensure each form input has a corresponding <label> element.
Use aria-label or aria-labelledby attributes for accessibility.

This cheat sheet covers the basics of HTML forms, including input types, attributes, buttons, and accessibility considerations. Feel free to refer to it whenever you’re working on HTML forms! Let me know if you need any further assistance.