I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML Forms: Generic Text Inputs

html / forms

Estimated reading time: 1 minute, 30 seconds

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 , , and ). The name must be a unique word, following standard naming conventions.

In XHTML, 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; }

In general, the latter method of sizing text inputs is preferred, as it works in all versions of HTML: the size attribute is deprecated in HTML5.

In XHTML, the maxlength attribute determines the upper limit to the number of characters that can be entered into the input. If using size, maxlength should be two less than size to give space to see all the characters placed into the textbox, otherwise some the first few characters typed in will tend to be cut off as maxlength is approached.

So our line of code now becomes:

<label for="city">City</label>
<input type="text" name="city" id="city" size="32" maxlength="30" />

In HTML5, maxlength is deprecated, replaced with pattern:

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

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.