HTML, Web Dev, Cheat Sheet, Notes —

📚 Html Form Cheat Sheet

📚 Html Form Cheat Sheet
Photo by Jackson Sophat / Unsplash
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Form</title>
  </head>
  <body>
    <h1>Contact Us</h1>

    <!-- The 'action' attribute specifies where the form data will be sent -->
    <!-- The 'method' attribute specifies the HTTP method to be used (GET or POST) -->
    <form action="/submit_form" method="post">
      <!-- Text Input -->
      <label for="name">Name:</label>
      <input
        type="text"
        id="name"
        name="user_name"
        placeholder="Your name"
        required
      />
      <br />

      <!-- Email Input -->
      <label for="email">Email:</label>
      <input
        type="email"
        id="email"
        name="user_email"
        placeholder="Your email"
        required
      />
      <br />

      <!-- Password Input -->
      <label for="password">Password:</label>
      <input type="password" id="password" name="user_password" required />
      <br />

      <!-- Radio Buttons -->
      <p>Preferred Contact Method:</p>
      <input
        type="radio"
        id="contact_email"
        name="contact_method"
        value="email"
        checked
      />
      <label for="contact_email">Email</label>
      <input
        type="radio"
        id="contact_phone"
        name="contact_method"
        value="phone"
      />
      <label for="contact_phone">Phone</label>
      <br />

      <!-- Checkbox -->
      <input type="checkbox" id="subscribe" name="subscribe" checked />
      <label for="subscribe">Subscribe to our newsletter</label>
      <br />

      <!-- Textarea for Longer Text -->
      <label for="message">Message:</label>
      <textarea
        id="message"
        name="user_message"
        rows="4"
        cols="50"
        placeholder="Your message"
      ></textarea>
      <br />

      <!-- Submit Button -->
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

  1. <form> element: This is the container for your form. The action attribute specifies the URL where the form data will be sent, and the method attribute specifies the HTTP method (usually "GET" or "POST").

  2. Text Input (<input type="text">): Used for single-line text input. The id attribute is a unique identifier, and the name attribute is the key that will be used to identify this field when the form is submitted.

  3. Email Input (<input type="email">): Similar to text input but specifically designed for email addresses.

  4. Password Input (<input type="password">): Used for password input. The text is usually masked for security.

  5. Radio Buttons (<input type="radio">): Used when the user must select one option from a group of options. The name attribute groups the radio buttons together.

  6. Checkbox (<input type="checkbox">): Allows the user to select multiple options. The checked attribute makes the checkbox initially selected.

  7. Textarea (<textarea>): Used for multi-line text input, suitable for longer messages.

  8. Submit Button (<input type="submit">): Submits the form when clicked.

You might also like...