Practical HTML: learning to love forms

• Forms are a necessary evil. People tend to complicate forms, although they can be presented very simply.
• Consider the layout of forms as the creation of ordinary XHTML-code. But be prepared for inconsistencies on the part of browsers and the use of hacks.
• Break complex shapes into several simple parts.
• Try to provide the maximum semantic value of the code.
• Do not complicate the design of forms.

XHTML & CSS tricks

1. The FORM element creates a form.
2. Its only required attribute is ACTION , and it must always be a URI.
3. By default, METHOD set to GET .
4. The NAME attribute is deprecated; use an ID instead.
5. The FIELDSET element FIELDSET used to group related form fields. Can be nested.
6. The LEGEND element must be used to provide a header for a FIELDSET .
7. Inside the form you can use P or DIV . If you want to provide a sequence of form fields, you can use OL (numbered list). This will help preserve the order of the elements.
8. The INPUT element is a standard input field.
9. NAME and ID . NAME used for the server part, ID - for the client. To avoid ID conflicts, you can use for them the values ​​“form name-field name”.
10. TEXTAREA - input field with several lines. Required attributes ROWS and COLS .
11. The LABEL element provides a text link with an input field. Internal communication involves entering the input field in LABEL (can be used for the appropriate design). External communication is achieved by assigning the FOR attribute of LABEL value equal to the ID the corresponding input field.
12. Buttons are used to handle form events. The INPUT and BUTTON elements are applied. Using BUTTON more flexible and provides more functions.
13. Setting the font size to 62.5% resets the font size to 10 pixels for all browsers.
14. The LEGEND display varies greatly from browser to browser. The bottom indent is processed correctly, the fields are often ignored.
15. Set the view cursor to a pointer ( pointer , approx .: input.button {cursor:hand;cursor:pointer} ) to indicate a possible action for the buttons.
16. Text output: you can use label:after to type after the field names ( note. IE does not support :after ).
17. Buttons: INPUT by default are displayed as system elements for the current OS. BUTTON fairly well displayed as a block element. With the help of styles and pictures you can achieve any design. BUTTON can contain, practically, any element: P , UL , etc. In IE, when using several buttons, they all send data at the same time. As a result, for correct processing, you need JavaScript for several BUTTON on the page.
18. SELECT allows you to select one or more OPTION . The VALUE attribute is optional (by default, the content of the OPTION sent).
19. OPTGROUP can be used to group OPTION to SELECT . Displayed as an indented list. OPTGROUP cannot be nested.
20. Usually the SELECT width is 4 pixels larger than what you define for this element.
21. To change the appearance of the SELECT element, you can use the replacement lists ( Select Replacement ). Inserting background images is also allowed (javascript enabled is required for proper operation).
22. FIELDSET will be a good solution for organizing a group of FIELDSET buttons or checkboxes. Use LEGEND to output a question or statement (as a title to such a group). UL lists can also be a decent solution. IE6 will require internal hacks.
23. Set the transparent background color for the selective buttons to avoid a bug in IE (gray background color is displayed).
24. To arrange the names for the selective buttons, use relative positioning ( position:relative ) and about 2 pixels for the upper indent ( padding-top:2px ).
25. LEGEND ignores WIDTH attribute. To set the correct size, you can use the embedded element SPAN .
26. In the search forms in the method it is better to specify GET , so that the result can be added to bookmarks ( bookmark ).
27. When pointing to more than one field, you can use LEGEND instead of LABEL .
28. You can remove the field names from the page by shifting them strongly to the left. This will increase the accessibility of the page ( note: for text browsers and other user agents ).
29. Use the CLASS attribute to define relationships between form elements.
30. LABEL can contain more than one input field.
31. DD can be used to group form elements when one of the input fields is used as a top level selector.
32. Nested LABEL can be used for checkboxes and radio buttons. With the help of them you can set the desired width.
33. Required input fields. You can use the ABBR element to denote asterisks on required fields. You can use the tooltip through the TITLE attribute to explain the form fields. ABBR ignored in IE6.
34. Tips Can be nested in EM . Using CSS, you can achieve overlap with the text of the tooltip of the input field ( for example: why should this? Also, it is inconvenient to enter data ).
35. Error messages It is better to ensure their appearance as quickly as possible so that users notice them. You can use STRONG inside LABEL . Messages should be in the form of a simple text about the error and how to fix it. They may also contain references to the place where the error occurred ( note: probably, it means, in particular, transferring the focus immediately to the input field that needs to be corrected ).
36. You can use javascript to hide the error message as soon as it has been fixed.