A sign with missing letters against a bright blue sky. The remaining letters spell out the word “hell”

A typical form will require details from the user such as first and last name, city, address, and postal code. Such generic single-line responses should be gathered in a generic text <input>. (Don’t let the field name confuse you: the text input can take a combination of numbers, letters, spaces and symbols).

Let’s start a form by asking for the user’s city of residence. Our question to the user - what we want them to read - goes inside a <label> tag. The part of the form that they will fill out is often associated with the <input> tag. (Note that in XHTML the <input> tag is closed inside itself, like the <img /> tag, as it creates its own content, and does not surround anything.)<label for="city">City</label> <input type="text" name="city" id="city">

Note that the name attribute is not related to anything in the text box itself: it is simply the name associated with the input, for the purpose of . (id is set to the same value as name. id is referenced by JavaScript, HTML, and CSS). The name must be a unique word, following standard naming conventions.

The size attribute determines how the appears on the screen: it literally limits how many characters can appear in its “window”. To create a tight, well-designed form, size should be set to a reasonable amount (approximately 25 for anything other than addresses or specialized entry areas). Alternatively, you can set the size of the field with CSS, often by using an attribute selector:

input[type="text"] {
	width: 12em;

Finally, a pattern is used to validate entered information in the browser:

<input type="text" name="city" id="city" pattern="[a-zA-Z]{2,30}" required>

Photograph by Thomas Hawk, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.