HTML Forms
Why forms matter
Forms are how users send data to a website — login pages, search bars, contact forms, sign-up pages. If a user types something and clicks a button, there's almost certainly a
<form> involved.Basic form structure
HTML
<form action="/submit" method="POST">
<label for="name">Your 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">Send</button>
</form>Let's break this down:
<form>wraps all the inputs.actionis where the data goes;methodis how it's sent.<label>describes each field. Theforattribute should match the input'sid.<input>is the most common form element. Thetypeattribute changes its behavior.<button type="submit">sends the form.
Common input types
HTML5 gives you many input types out of the box:
HTML
<input type="text" /> <!-- Plain text -->
<input type="email" /> <!-- Email (browser validates format) -->
<input type="password" /> <!-- Hidden text -->
<input type="number" /> <!-- Numbers only -->
<input type="date" /> <!-- Date picker -->
<input type="checkbox" /> <!-- True/false toggle -->
<input type="radio" /> <!-- Pick one from a group -->You also have
<textarea> for multi-line text and <select> for dropdowns:HTML
<textarea name="message" rows="4"></textarea>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>Validation without JavaScript
Add
required to make a field mandatory. The browser won't submit until it's filled:HTML
<input type="email" required />You can also use
minlength, maxlength, and pattern for more control:HTML
<input type="text" minlength="3" maxlength="20" pattern="[A-Za-z]+" />Key takeaway
Forms are essential for any interactive website. Start with
<form>, <input>, <label>, and <button>. Use HTML5 input types and validation attributes before reaching for JavaScript — the browser does a lot for free.