Adding HTML Form Fields

Laying out the style of the form is a design decision, and it should be tested against users to determine if it is usable. A couple of hints to keep in mind to make your users more likely to fill out your forms.

1. Use meaningful labels to describe what the user should input into the form. The label tag can be used for this, and has accessibility associated with it.
2. Limit the user’s choices if possible to ensure accurate data collection. This could be done with things like radio buttons, drop-down lists, menu items, etc. Not everything has to be a text box.
3. Group related items together. This goes back to the basic design principles that we use. We can either place them near one another, or we can group them with a fieldset tag.
4. Let people know if something is required. You can do this by changing the color of the label, putting a star beside it, etc.
5. Align your elements for readability. This goes back to the basic design principles that we use.

Form Elements

There are very few tags actually used in making up forms. Most are controlled via attributes like type and class.

Input Field

It is used for everything from passwords, to text boxes, to radio buttons. A developer uses the type attribute to define the type of input selector (text, password, check box, radio, etc.)

The input tag doesn’t have a closing tag. It may be self closed, but that is not required either in HTML5.

Common attributes include the type (defaults to text), class, id (for working with JavaScript and attaching to a label if the label doesn’t surround the input tag), and name (sent from the form to the form processor).

Additionally, placeholder is used to show data inside the input box, and value can be used to give a default value, or set the value if selected as a radio button or checkbox. checked is the attribute used to define if a radio button or checkbox is selected.

By default, it is a single line text box (type text). With HTML 5, a lot of new types became available such as date, number, etc. The browser is responsible for the default styling, and thus it may appear different from browser to browser.

<!-- assume this is inside a set of form tags -->
<input type="text" name="firstName" id="firstNameExample">
<input type="password" name="password" id="firstpassword" placeholder="Password">
<input type="number" name="count" value="10" min="1" max="20">
<input type="radio" name="color" value="blue">
<input type="checkbox" name="confirm" checked value="true">

Select Field

The select tag is used to create menus (drop down) and lists (a vertical list of items). In a list, you can allow the user to select multiple items, or a single item by using the multiple attribute. To choose between a menu and a list, you use the size attribute. This is the physical number of lines that are shown.

Additional common attributes are the id, used for linking it to a label, or for accessing it via JavaScript, and name, which is how the field will be recognized by the form processor.

Options

The option tag used to provide the items of the menu/list. It has an optional value attribute which can be used to send a different value when selected. Without it, what is between the option tags is sent as the value.

<!-- assume this is inside a set of form tags -->
<select name="menuExample" id="select1" size="1">
  <option>One</option>
  <option>Two</option>
  <option value="3">Three</option>
</select>

<select name="listExample" id="select2" size="3" multiple="multiple">
  <option>One</option>
  <option>Two</option>
  <option value="3">Three</option>
</select>

Textarea Fields

The textarea is used to create large text sections that are multiple lines high and usually longer than a single line text box, at least by default. Where an input tag usually gets a small, limited amount of text like a few words, a textarea is designed to be more free form such as writing a message on a message board, social media post, etc.

Like other form fields, class, name and id are common attributes and work the same way. Unlike other form fields, the textarea has a few additional attributes.

• col – how many columns does your textarea support?
• rows – how many lines does your textarea support?
• maxlength – the maximum number of characters you will allow.

Something else unique about the text area is that there is a closing tag, and if you want a default value, you place that contents between the opening and closing textarea tags.

<!-- assume this is inside a set of form tags -->
<textarea name="comment" rows="8" col="48">
</textarea>

Fieldset Fields

The fieldset is not a way to get input, but is used to group items together. By default it usually places a border around the area it contains, and all of those form elements.

Within the fieldset, normally as the first child, you can put a legend tag. This is used to display a title for the group of elements, like an address.

Labels

A label is a tag which ties text to a form field. Screen readers can use this to help identify what the field is to people with visual impairments.

A label can either contain the form field, and the label text around the form field, or it can be separate, using the for attribute to reference the id of the form field. Both are considered correct, and sometimes you will use both methods within the same form. Wrapping around an input is common for radio buttons and check boxes for example.

An interesting feature of the label, that most browsers support, is if you click on the label text, it moves the cursor to that form field. This is especially helpful for radio buttons and check boxes where their clickable area is so small normally. This dramatically improves the usability of the form.

<!-- assume this is inside a set of form tags -->
<label>
  <input type="checkbox" name="IAgree" id="forsuckers">
  Of course I want more SPAM - sign me up
</label>

<label for="firstName">First Name:</label>
<input id="firstName" type="text">

It is worth mentioning that this text box is a plain text box, without markup abilities. If you want a rich text editor, you need to use a JavaScript library to enable the user to write HTML/bbcode/etc to enable the rich text.

Adding HTML Form Fields was originally found on Access 2 Learn