Forms

Forms are a key tool in collecting user input and submitting it to a server for processing. They are made up of different form elements that allow users to input data. However, in this course, we won't send any data to a server as it requires additional knowledge beyond the scope of this course.

All examples in the code have the attribute onsubmit="return false". This attribute prevents the form from sending a request to the server by default.

Creating Forms

Use the <form> tag to create an interactive form.

<form>
  <!-- Form elements go here -->
</form>

Form Elements

Forms contain labels and various input types (text, password, email, etc.). Labels connect text to inputs and improve accessibility. You'll learn more about labels and input types in the next chapters.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

Form Submission

A form is submitted using a button with type="submit".

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

Here is the basic form example.