HTML Input Types and Form Controls

The <input> tag's type attribute drastically changes its appearance and behavior. HTML5 added many specialized types beyond plain text.

<input type="text" placeholder="Full name">
<input type="email" placeholder="you@example.com">
<input type="password">
<input type="number" min="1" max="10">
<input type="date">
<input type="checkbox" id="agree"> <label for="agree">I agree</label>
<input type="radio" name="plan" value="basic" id="basic"> <label for="basic">Basic</label>
<input type="radio" name="plan" value="pro" id="pro"> <label for="pro">Pro</label>
<input type="file">
<input type="range" min="0" max="100">

A few important behaviors:

Radio buttons sharing the same name become mutually exclusive — selecting one deselects the others in that group. Checkboxes don't need shared names since each is independent.
type="email" and type="number" trigger the correct on-screen keyboard on mobile devices and add basic format validation for free.
type="date" renders a native date picker without any extra JavaScript.

Beyond <input>, forms also use:

<select name="country">
  <option value="bd">Bangladesh</option>
  <option value="in">India</option>
</select>

<textarea name="message" rows="4" placeholder="Your message"></textarea>

<select> creates a dropdown of <option> choices, and <textarea> provides a multi-line text box — unlike <input>, its content goes between opening and closing tags rather than in a value attribute.