HTML Forms & Inputs

What is a Form?

A form is an HTML structure that collects user input and sends it somewhere — either to the server or to JavaScript. Forms are the foundation of everything interactive on the web: login screens, search bars, checkout pages, contact forms, and more.

The basic form structure

<form action="/submit" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required />
  <button type="submit">Send</button>
</form>

• <form> wraps the input fields and the submit button.
• action tells the browser where to send the form data.
• method tells the browser whether to use GET or POST.
• <label> describes the field and improves accessibility.
• <input> is the field where the user types.
• <button type="submit"> sends the form data.

Common input types

<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="you@example.com" required />
 
<label for

• type="text" is for normal text.
• type="email" helps the browser validate email syntax.
• type="password" hides user input.
• textarea is for longer text.
• placeholder gives an example value inside the field.

Built-in validation

The browser can validate common requirements automatically:

• required prevents empty fields.
• type="email" checks for a valid email format.
• type="number" only allows numeric input.

If a field fails validation, the browser shows a message and stops submission.

A complete form example

<form action="/subscribe" method="post">
  <label for="name">Full Name</label>
  <input id="name" name="name" type="

How form submission works

When the user clicks the submit button, the browser gathers all named fields inside the form and sends them to the action URL. If method="post", the values are sent in the request body. If method="get", they are appended to the URL.

HTML form anatomy

• <form> = container for fields
• <label> = visible text that names a field
• <input> = single-line field for data
• <textarea> = multi-line field
• <button type="submit"> = submits the form
• name = key used to send the field value
• id = connects label and input
• required = makes the field mandatory
• placeholder = example text inside the input

What you should remember

• Always wrap form fields in a <form> element.
• Use <label> with for to improve accessibility.
• Give every input a name so its value is sent.
• Choose the right type for the field.
• Use built-in validation before adding JavaScript.