Forms and Inputs

So far every page you have built has been one-way: you write it, and visitors read it. Forms are how a page becomes two-way, letting visitors type in information, like a name or a message, and send it somewhere. Think of a contact form or a search box - both are built with the same handful of tags you are about to learn.

The form tag

Everything a visitor can fill in lives inside a form tag, which wraps the whole set of inputs together, much like ul wraps a list of items.

<form>
</form>

Text inputs

Inside a form, the input tag creates a single box a visitor can type into. Like img, it has no closing tag - all of its information lives in attributes on the one opening tag. The type attribute tells the browser what kind of input it is.

<form>
<input type="text" placeholder="Your name">
</form>

Here, type="text" makes a simple text box, and placeholder shows faint example text inside the box before the visitor types anything.

Other useful input types

The type attribute can be changed to create different kinds of inputs, without needing a whole new tag.

• type="email" creates a box meant for email addresses.
• type="password" hides what the visitor types, showing dots instead.
• type="submit" creates a clickable button that sends the form.

<form>
<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">
<input type="submit" value="Send">
</form>

Notice that the submit input uses a value attribute instead of placeholder - that value becomes the text shown on the button itself, like "Send".

A simple contact form

Combining what you know, here is a small but complete contact form you might put on your own personal page:

<h2>Contact Me</h2>
<form>
<input type="text" placeholder="Your name">
<input type="email" placeholder="Your email">
<input type="submit" value="Send Message">
</form>

You have now covered lists, tables, and forms - three of the most practical tools in HTML. In the final module you will learn how to organize a whole page with semantic tags, add classes and ids for future styling, and then bring everything together into your own personal page.