HTML Forms

Form (<form>)

The <form> tag defines a container for user inputs. Attributes like action and method control submission.

Username is required. 
<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <button type="submit">Submit</button>
</form>

Input (<input>)

The <input> tag creates fields like text, email, password, etc. Attributes like required enforce validation.

Please enter a valid email address. Password must be at least 8 characters long. 
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="Enter your email">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required minlength="8">
  <button type="submit">Login</button>
</form>

Form Input Elements

Age must be between 18 and 100. Please upload a PDF file. 
<form>
  <label>Hobbies:</label>
  <div>
    <label><input type="checkbox" name="hobbies" value="reading"> Reading</label>
    <label><input type="checkbox" name="hobbies" value="gaming"> Gaming</label>
  </div>
  <label>Gender:</label>
  <div>
    <label><input type="radio" name="gender" value="male" required> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </div>
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="100" required>
  <label for="resume">Upload Resume:</label>
  <input type="file" id="resume" name="resume" accept=".pdf">
  <button type="submit">Submit</button>
</form>

Label (<label>)

Name is required. 
<form>
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" required>
</form>

Select (<select>)

Please select a country. 
<form>
  <label for="country">Country:</label>
  <select id="country" name="country" required>
    <option value="">Select a country</option>
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
    <option value="uk">UK</option>
  </select>
</form>

Textarea (<textarea>)

Comments are required. 
<form>
  <label for="comments">Comments:</label>
  <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter your comments" required></textarea>
</form>

Button (<button>)

<form>
  <button type="submit">Submit Form</button>
  <button type="reset">Reset Form</button>
</form>

Fieldset and Legend (<fieldset> and <legend>)

User Information First name is required. Last name is required. 
<form>
  <fieldset>
    <legend>User Information</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" required>
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname" required>
  </fieldset>
</form>

Form Validation

Please enter a valid phone number (e.g., 123-456-7890). Please enter a valid date. 
<form id="validation-form">
  <label for="phone">Phone Number (123-456-7890):</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required>
  <label for="birthdate">Birth Date:</label>
  <input type="date" id="birthdate" name="birthdate" required>
  <button type="submit">Submit</button>
</form>