Servage Magazine

HTML forms are very versatile and allow you to submit a wide range of different types of input, ranging from text boxes and text areas to checkboxes, radio buttons, and more. Understanding the pros and cons of the different input-types enable you to create appealing and efficient forms that users like and use. It increases usability and conversion.

Text boxes

The regular text box is probably the type of input you will use most often. It accepts a wide range of alphanumeric text and other characters in a single-line box. The general format of a text box input is:

<input type="text" name="my_field" value="default_value" />

The above example declares an “input” tag with “type”, “name” and “value” attributes. The tag is the HTML language’s way of telling the browser what kind of element to render. The attributes manipulate the specific element to fit the given situation. In this case telling the browser that this input element should be of the type “text”, called”my_field” as name and have an initial value of “default_value”.

Text areas

Use a text area instead of an input element when you need to accept input of more than a single line of text.

<textarea name="my_field">default value</textarea>

Notice that <textarea> is not a variation of the <input> tag, and that the textarea’s value is treated like content inside a regular HTML element. Therefore the textarea needs a closing tag like depicted above.

You can use attributes “cols” and “rows” to set width and height, but it is generally preferred that you use CSS for such settings. Using JavaScript you could even create a text area that automatically adapts it’s size to the content you enter.

Checkboxes

Checkboxes are a suitable element when you want to offer a number of different options to a user from which the user can select one or more elements.

<input type="checkbox" name="name" value="value" checked="checked" />

If you include the checked attribute, the box is already checked when the browser is displaying the checkbox initially. If you don’t include the parameter, the box is shown unchecked. Here is an example of an unchecked box:

I Agree <input type="checkbox" name="agree" />

If the user doesn’t check the box, no value will be submitted. If checked, a value of “on” will be submitted for the field. If you prefer to have your own value submitted instead of the word “on” (such as the number 1), you could use the following syntax:

I Agree <input type="checkbox" name="agree" value="1" />

It may have strategic importance whether a checkbox is preselected or not. For example if you wish to offer a newsletter to your readers when submitting a form, you might want to have the checkbox already checked as the default value:

Subscribe? <input type="checkbox" name="news" checked="checked" />

Radio buttons

Radio buttons are named after the push-in buttons found on some older radios where any previously pressed button pops back up when another is pressed. They are used when you want only a single value to be returned from a selection of two or more options.

<input type="radio" name="gender" value="male">Female<br>
<input type="radio" name="gender" value="female">Male

Note that radio-buttons cannot be unchecked like checkboxes. Therefore radio buttons always return a value. It is suggested that you always pre-select a default value, otherwise the user experience may suffer. It seems weird that nothing is set at the beginning, but you are “caught in a trap” as soon as you engage the selection. Consider the changed example below:

<input type="radio" name="sex" value="male" checked="checked">Unset<br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female

It’s important to note the <select> box as a good alternative to radio buttons, because it usually just shows the selected value until you engage the selection. Therefore the select-box is saving space on the canvas, which may or may not be what you want to achieve, depending on the use-case.

Labels

You can improve the user experience by utilizing the <label> tag to add important contextual information about form fields such as their name and description. It’s a good rule of thumb to always add labels to fields. Otherwise the form appears messy and unintuitive.

<label for="my_field">Name</label>
<input type="text" name="my_field" value="default_value" />

Submit button

The submit button is a clickable element which triggers the form’s submit event. This is usually to post the entered data to the forms target url, but could be any kind of event altered by JavaScript as well.

<input type="submit" value="Save" />

Other buttons

Sometimes you need multiple buttons that are not necessarily like the submit button. You can use the following syntax to get the browser to render any kind of generic button, without a specific context or function attached to it:

<button type="button">Click Me!</button>

Sources for further reading

• W3 School
• HTML Goodies