HTML markup language - form

<form action="/path/to/script" method="post">
<table>
<tr>
<th>Name:</th>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<th>Email:</th>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<th>&nbsp;</th>
<td><input type="submit" value="submit" /></td>
</tr>
</table>
</form>

Method B: No need for tables, just squeeze together

<form action="/path/to/script" method="post">
<p>
Name: <input type="text" name="name" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" value="submit" />
</p>
</form>

Using a single paragraph and several <br /> tags to separate all elements is a feasible method, but it may be a bit crowded visually. Figure 5-2 shows the effect of the eleventh version of the browser:

Figure 5-2: The browser displays the effect of method B. Although we can complete the layout without tables, it looks a bit crowded and ugly. At the same time, we also encounter the problem that the form elements cannot be perfectly aligned.
We can add an outer patch to the <input> element with CSS to reduce the feeling of crowding. Like this:

input{
margin:6px 0;
}

The previous section adds a 6-pixel outer patch to the top and bottom of each <input> element (including the Name, Email input box, and the submit button), adding extra space between elements. Just like Figure 5-3:

Figure 5-3. Method B after adding external patches to the input element. Method B itself is fine, but it can be fine-tuned to make the form better. Method C also uses these fine-tuning techniques, so let's take a look.

Method C: Simple and easier to use

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label><br />
<input type="text" id="name" name="name" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="submit" value="submit" /></p>
</form>

There are a few things I like about method C. First, for simple forms like this one, I find it convenient to put each instruction and form element in its own paragraph. The preset distance between paragraphs should be enough to make the content easy to read when displayed without styling. We'll also use CSS to set spacing for the <p> tags contained within the form later.
We even went a step further and gave the form a unique id="thisform". So, the exact spacing I just mentioned can be written roughly like this:

#thisform p{
margin:6px 0;
}

This means setting the top and bottom padding of the <p> tags within this form to 6 pixels, overriding the browser default for normal paragraphs.
Another difference between method C and the previous two methods is that although each group (description and input box) is placed inside a <p>, we still put them on a separate line with <br />. Using <br /> to separate each element can get around the problem of different lengths of text causing input items to not align perfectly.
Figure 5-4 shows the effect of method C in a common browser, using the style previously set for the <p> tag.

Figure 5-4. The browser displays the effect of method C, using CSS for the P tag
In addition to the visual effects of method C, the most important advantage is the improved usability.

<label> Tag Using the <label> tag to improve form usability requires two steps, and method C has completed both steps. The first is to use the <label> tag to connect the text description to the relevant form element, whether it is a text field, text area, radio, checkbox, etc. Method C uses the <label> tag on the "Name:" and "Email:" titles to connect them to the data input elements.
The second step is to add the for attribute to the <label> tag and fill in the id of the corresponding input box.
For example, in method C, wrap "Name:" with a <label> tag, and fill in the for attribute with the same value as the input box id behind it.

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label> <br />
<input type="text" id="name" name="name" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="submit" value="submit" /></p>
</form>

Why use <label>?
You may have heard others say that you should use a <label> tag inside a form. The most important question is why you should use the <label> tag.
Establishing a label / ID association allows screen readers to read the correct label for each form element, regardless of the layout method, which is a good thing. At the same time, the <label> tag is designed to mark form field labels . When using this tag, we are explaining the meaning of each element and strengthening the structure of the form.
An additional benefit of using the <label> tag when dealing with single-select and multiple-select boxes is that most browsers will also change the value of the element when the user clicks the text inside the <label>. This can create a larger clickable area for the input element, making it easier for users with limited mobility to fill out the form (Mark Pilgrim, " Dive Into Accessibility ," http://diveintoaccessibility.org/day_28_labeling_form_elements.html ).
For example, if we add a multiple-select box to the form so that the user can choose to "write down this information", we can use the <label> tag like this:

<form action="/path/to/script" id="thisform" method="post">
<p><label for="name">Name:</label><br />
<input type="text" id="name" name="name" /></p>
<p><label for="email">Email:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="checkbox" id="remember" name="remember" />
<label for="remember">Remember this info?</label></p>
<p><input type="submit" value="submit" /></p>
</form>

By marking the checkbox this way, you get two benefits: screen readers will read the correct description text (as in this example, it works even if the text appears after the input box), and the range of the checkbox that can be toggled is increased to include the text in addition to the checkbox itself (supported by most browsers).
Figure 5-5 shows how this form looks in the browser. We specifically mark the enlarged range of the multiple-select box:

Figure 5-5. A checkbox that includes text in the toggle range. In addition to forms and paragraphs, I want to show another way to mark up forms, using a definition list.

Previous Page 1 2 3 4 Next Page Read Full Article