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 PHP. (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.
