HTML Forms - Part 1

Creating Forms

Forms are used to collect user input. The

element contains various input elements like text fields, checkboxes, radio buttons, and submit buttons.

Forms can send data to a server for processing or be handled with JavaScript.

<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>
  
  <button type="submit">Submit</button>
</form>
  • <form> - Defines a form
  • action - Where to send form data
  • method - HTTP method (GET or POST)
  • <input> - Input field
  • <label> - Label for input
  • <button> - Submit button

Try a Simple Form

<h2>Contact Form</h2>
<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" placeholder="Enter your name"><br><br>
  
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
  
  <button type="submit">Submit</button>
</form>

Note: Always use labels with inputs for accessibility. The 'for' attribute should match the input's 'id'.