Click here to return to the Wulin.com HTML tutorial column.
Above: Markup Language - Quotations
Original source chapter 5 form
Interaction has always been the focus of the Internet, allowing users to exchange information and communicate with each other. Forms enable us to organize and collect information from users in the same way, so when designing a website, we always belong to the category that can be used in any situation. For example, we found that there are about 10,000 different ways to mark forms. Well, maybe not that many, but we can still think about several situations, making it easy for users to use form structures and also facilitates management by website owners. Methods to mark forms A: Use forms
<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> </th>
<td><input type=submit value=submit /></td>
</tr>
</table>
</form>
Many people have long marked forms with tables. Because of the high frequency of use, we have become accustomed to seeing forms type in this way: the left column is a right-aligned text description, and the right column is a left-aligned form element. Using a simple two-list form is one of the simple ways to complete easy-to-use form typesetting.
Some people think that the form is not needed, and others think that the form should be considered a form material. We do not intend to support either statement, but in some cases, the best way to achieve a specific form layout when using a form, especially complex forms with many different elements (forms that use radio boxes, drop-down boxes, etc.). Relying entirely on CSS to handle such forms can be frustrating, and often requires additional <span> and <div> to consume more tags than the table.
Next, look at Figure 5-1. This is the effect of general visual browser display method A:
Figure 5-1: Effect of method A displayed in browser
You will find that using tables can arrange the text elements in a very neat way. However, for such a simple form, I may avoid using tables and use other methods that do not require so many labels. Unless the visual design of the form requires such typesetting, the form may not be necessary. At the same time, we should also consider several ease of use. When studying the following two methods, we will come into contact with this part.
<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 a few <br /> tags is a feasible way to separate all elements, but it may be visually portrayed a bit squeezed. Figure 5-2 The display effect of the eleventh version of the browser:
Figure 5-2: Effect of browser display method B
Although we can complete the layout without using a table, it looks a bit crowded and ugly. At the same time, we also encountered the problem that form elements cannot be perfectly aligned.
We were able to add an extra patch to the <input> element with CSS to relieve the feeling of crowding. Like this:
input{
margin:6px 0;
}
The previous paragraph adds 6 pixels of extra patches to the upper and lower parts of each <input> element (including Name, Email input box, and submit button), and adds extra space between the elements. Just like Figure 5-3:
Figure 5-3. Effect of Method B after adding extra patches to the input element
Method B itself has no big problems, but it can also be fine-tuned to make the form better. Method C also uses these fine-tuning techniques, so let's take a look.
<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>
I like several things about method C. First, for a simple form similar to this example, I found it more convenient to place each description and form element in a separate paragraph. Without adding style display, the preset distance between paragraphs should be enough to make you read the content easily. Later, we can set the interval using CSS as the <p> tags contained in the form.
We even went a step further and set a unique id=thisform for the form. Therefore, the exact interval I mentioned just now can be roughly written like this:
#thisform p{
margin:6px 0;
}
This means setting the upper, lower and outer patches of the <p> tag in this form to 6 pixels, covering the preset values selected by the browser for general paragraphs.
Another difference between method C and the first two methods is that although each group (instruction and input box) is placed in <p>, we still place them in an independent line. Using <br /> to separate each element, we can bypass the problem of different text lengths, resulting in the inability to align the input items perfectly.
Figure 5-4 shows the effect of the general browser display method C, where the styles set for the <p> tag were used.
Figure 5-4. Effect of browser display method C, using CSS for P tag
In addition to the visual effect of Method C, the most important advantage is that it improves ease of use.
Using the <label> tag to improve the ease of use of the form requires two steps, and method C has completed these two steps. First, use <label> to connect the text description with the relevant form elements, whether it is the text input box (text field), the text block input box (text area), the radio box (radio), the checkbox (checkbox), etc. Method C uses the <label> tag on the Name: and the Email: title, connecting them with the elements that enter the data.
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, use the <label> tag to wrap Name: and fill in the for attribute with the same value as the input box id after 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>
Maybe I have heard others say that you should add the <label> tag into the form. The most important question is why you should use the <label> tag.
It is a good thing to establish label/ID associations that allow screen readers to read the correct label for each form element without the influence of layout arrangement. At the same time, the <label> tag is created to mark form bar labels . When using this tag, we are explaining the meaning of each element and strengthening the structure of the form.
There is an additional benefit of using the <label> tag when processing single-choice and multi-check boxes, that is, most browsers will also change the value of the element when the user clicks on the text in <label>. This can create a larger click area for the input element, making it easier for users with mobility-inconvenients to fill out forms (Mark Pilgrim, Dive Into Accessibility , http://diveintoaccessibility.org/day_28_labeling_form_elements.html).
For example, if you add a multi-check box to the form so that the user can choose to write down this information, then 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 multi-check boxes in this way, two benefits can be obtained: the screen reader can read the correct explanatory text (just like this example, text can appear after the input box), and the range of switching multi-check boxes has become larger. Now, in addition to the multi-check boxes themselves, the text part is also included (most browsers support it).
Figure 5-5 shows the display effect of this form in the browser. We specifically indicate the multi-check box switching range after enlargement:
Figure 5-5. Multiple selection boxes that include text in the switching range
In addition to the forms and paragraphs, I also want to show another way to mark the form, using the definition list.
Previous page 1 2 3 4 Next page Read the full text