Basic Form Elements in HTML

From the HTML cheat sheet · Forms & Input Elements · verified Jul 2026

Basic Form Elements

Essential form controls and structure

css

<!-- Basic form structure -->
<form action="/submit" method="POST">
  <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>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>
  
  <button type="submit">Submit</button>
</form>

<!-- Input types -->
<input type="text" placeholder="Enter text">
<input type="password" placeholder="Password">
<input type="email" placeholder="email@example.com">
<input type="number" min="0" max="100">
<input type="checkbox" id="agree"> <label for="agree">I agree</label>
<input type="radio" name="choice" value="yes"> Yes
<input type="radio" name="choice" value="no"> No

html

<form>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <textarea placeholder="Message"></textarea>
  <button type="submit">Submit</button>
</form>

🟢 Essential - Forms collect user input

💡 Always use labels for accessibility

📌 fieldset groups related inputs

⚠️ required attribute for client-side validation

⚡ novalidate disables browser validation

formsinputessential

More HTML tasks

Back to the full HTML cheat sheet