Form Tag

Form Tag in HTML

The <form> element creates a container to collect and submit user data. Common attributes:

• action — URL where the form data is sent when submitted.
• method — HTTP method for submission: GET or POST.
• enctype — Encoding type (e.g. multipart/form-data for file uploads).
• target — Where to display response (e.g. _self, _blank).

Common form-related tags

• <label> — Associates text with an input (use for/id).
• <select> / <option> — Dropdown list of choices.
• <textarea> — Multi-line text input.
• <button> — Button (submit, reset, or custom).
• <fieldset> & <legend> — Group related controls with a caption.
• <datalist> — Predefined suggestions for an input.

Example (code you can paste into Moodle)

<form action="/submituserdata" method="post" enctype="multipart/form-data" target="_blank" autocomplete="off" id="myform1">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" required><br><br>

  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd" minlength="6" placeholder="Password"><br><br>

  <label>Age:</label>
  <select name="userage">
    <option value="18-25">18-25</option>
    <option value="26-35">26-35</option>
    <option value="36+">36+</option>
  </select><br><br>

  <label for="bio">Bio:</label><br>
  <textarea id="bio" name="message" rows="4" cols="40" placeholder="Tell us about yourself"></textarea><br><br>

  <fieldset>
    <legend>Login</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" list="myname" placeholder="Start typing...">
    <datalist id="myname">
      <option value="Alice">
      <option value="Bob">
      <option value="Charlie">
    </datalist><br><br>

    <input type="file" name="avatar" accept=".png,.jpg,.jpeg"><br><br>

    <input type="submit" value="Login">
    <input type="reset" value="Reset">
  </fieldset>
</form>

<!-- submit a form from outside using form="myform1" -->
<input type="submit" value="Submit form #1" form="myform1">
  

Rendered example (how it looks)