What Is a Form?

A form is how users send data: login, register, search, contact forms, everything.

<form>
  ...
</form>
      

Basic Input

<input type="text" placeholder="Enter your name">
      

Password Input

<input type="password" placeholder="Password">
      

Email Input

<input type="email" placeholder="Email">
      

Number Input

<input type="number" min="0" max="100">
      

Buttons

<button>Submit</button>
      

Labels

Labels are used to describe inputs.

<label for="username">Username</label>
<input id="username" type="text">
      

Textarea

<textarea rows="5" cols="30"></textarea>
      

Select (Dropdown)

<select>
  <option>Apple</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
      

Checkboxes

<input type="checkbox"> I agree
      

Radio Buttons

<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
      

Full Example — Login Form

<form>
  <label>Username</label>
  <input type="text">

  <label>Password</label>
  <input type="password">

  <button>Login</button>
</form>
      

POST vs GET

<form method="get">...</form>
      

<form method="post">...</form>
      

Styling Forms

input, button {
  padding: 10px;
  border-radius: 6px;
  border: none;
  margin: 8px 0;
}
button {
  background: #64b5f6;
  font-weight: bold;
  cursor: pointer;
}
      

What’s Next?

Next you’ll learn how to trigger actions using JavaScript Events — clicks, keys, scroll, everything interactive.