HTML Tutorial Part 6: HTML Forms - Interactive Code Editor

HTML Tutorial Part 6

HTML Forms with Interactive Code Editor

HTML Forms

Forms collect user input and send it to a server. The <form> element contains input fields, buttons, and other form controls.

Basic Form Structure

<form action="/submit" method="post">

  <label for="name">Name:</label>

  <input type="text" id="name" name="name">

  <button type="submit">Submit</button>

</form>

Common Input Types

text - Single-line text input
email - Email address input
password - Password input (hidden text)
number - Numeric input
date - Date picker
checkbox - Multiple selections
radio - Single selection from options
submit - Submit button
textarea - Multi-line text input

Complete Form Example

<form>

  <label>Username:</label>

  <input type="text" name="username" required>

  <label>Email:</label>

  <input type="email" name="email" required>

  <label>Password:</label>

  <input type="password" name="password" required>

  <label>Age:</label>

  <input type="number" name="age" min="13" max="120">

  <input type="checkbox" name="subscribe">

  <label>Subscribe to newsletter</label>

  <button type="submit">Register</button>

</form>

Interactive Code Editor

Try writing your own HTML code below and see the live output!

HTML Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>My Form</title>
</head>
<body>
  <h1>Contact Form</h1>
  <form>
    <label>Name:</label><br>
    <input type="text" placeholder="Enter your name"><br><br>
    <label>Email:</label><br>
    <input type="email" placeholder="Enter your email"><br><br>
    <label>Message:</label><br>
    <textarea rows="4" cols="30" placeholder="Your message"></textarea><br><br>
    <button type="button">Send Message</button>
  </form>
</body>
</html>

Output:

Practice Challenges

Challenge 1: Create a login form with username and password fields

Challenge 2: Add a registration form with name, email, password, and age fields

Challenge 3: Create a survey form with radio buttons and checkboxes

Challenge 4: Build a contact form with a textarea for messages

Key Points

Forms use <form> to group input elements
Each input should have a unique name attribute
Use <label> to describe form fields
The required attribute makes fields mandatory
Different input types provide better user experience
Always validate user input for security

Congratulations!

You've completed the entire HTML Tutorial Series!
You now have the foundation to build amazing websites!

HTML Tutorial Part 6: HTML Forms - Interactive Code Editor