📄 HTML Forms in Detail

HTML forms allow users to enter data that gets sent to a web server for processing. Forms are commonly used for login screens, surveys, registration, feedback, and more.

🔍 Syntax: <form>...</form>
Inside the form, you can use input fields, checkboxes, radio buttons, etc.

🔤 Basic Input Field

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

<label> is used to describe what the user should enter. The for attribute should match the input id.

📬 Email & Password Inputs

<input type="email" name="email" placeholder="Enter your email">
<input type="password" name="password" placeholder="Enter your password">

These fields validate user input to match the correct format.

📋 Textarea and Submit

<textarea name="message" rows="4" cols="30">Write your message here...</textarea>
<input type="submit" value="Send">

<textarea> is for longer messages. <input type="submit"> creates the form's submit button.

✅ Full Example Form

<form action="/submit" method="post">
  <label>Name: </label>
  <input type="text" name="name"><br>

  <label>Email: </label>
  <input type="email" name="email"><br>

  <label>Message: </label><br>
  <textarea name="message" rows="4" cols="30"></textarea><br>

  <input type="submit" value="Submit">
</form>

This form sends data to /submit using POST method.

💡 Tip: Always use name attributes to ensure your form data can be collected by the backend!

🎯 Try It Yourself

Create a form that collects:

Next: HTML Tables ➡️