What Are the Best Tips for HTML Form Input?

Hyper Text Markup Language (HTML) form input is a way to get information manually entered into a web page. If a website designer wants to give the user the ability to enter information, he must use an HTML form to do so. There are multiple different HTML form input controls that can be placed on web pages, some of which are text fields, radio buttons, check boxes, and submit buttons. When creating a web page, certain ways of laying out these HTML form input components can greatly help a user understand what the page does, although they are not explicitly enforced by the code itself.

When creating an HTML text field or group of text fields, proper spacing and labeling makes user comprehension much easier. Text fields do not contain labels themselves, so they must be aligned with a separate label. If a label is added to a text field, it can be placed anywhere around the text field. Most users expect to see this label next to or above its associated text field, without too much space between the label and the field. From a developer's standpoint, using the text of the label as the internal name of the text field can help with future maintenance of the form.

Following similar practices for both radio buttons and check boxes can also aid in user comprehension. Both radio buttons and check boxes must have separate labels attached to them, just like text fields. Usually, they are found in groups, although they don't have to be. In general, keeping radio buttons and check boxes in separate groups is easiest for users to understand, rather than mixing radio buttons and check boxes together in the same group. In these groups, if one of the boxes or buttons is selected, placing the selected item as the first element of the group helps users to clearly identify the selection.

Submit buttons send all the information contained in the input controls from the web page to the server for processing. Usually, they are hard coded to say "submit," although this text can be changed by a developer. Users expect to see these buttons at the bottom of a form most of the time, although sometimes they are found at the top of a form instead. Placing the button at the bottom of a form and styling it to be clearly visible is usually enough to help a user see it.

A page containing HTML form input is usually meant to contain a single form with a single opportunity to submit its data. HTML does not allow forms to be placed inside each other, and the same HTML form input controls cannot be used in multiple forms. If multiple submissions are necessary, users normally expect multiple forms and multiple batches of HTML form input. A skilled developer can tie these forms together seamlessly.