Basic HTML forms

Buttons

A button is a special type of control that's been designed to interact with the user in a singular way: an action is executed every time the user presses it. There's a wide range of buttons, each having some peculiarities in relation to its capabilities or behavior, but here we'll only analize the two most widely used in basic forms.

Submit buttons

A submit button has the predefined action of submitting the form it belongs to when activated. Unless other mechanisms for form submission are provided, the presence of this button is necessary if there's an intention to allow users to submit the form. We've already seen this control in previous examples, so its behavior should be natural.

Submit buttons are inserted with the input element, having the value "submit" in its type attribute. The value attribute is important in this control, as its value is displayed as a label inside the button. The following example shows a form with a text input and a submit button.

<form action="../../form-result.php" target="_blank">
  <p>
    Edit your description:
    <input type="text" name="desc">
    <input type="submit" value="Save edits">
  </p>
</form>

Edit your description:

Reset buttons

Like submit buttons, reset buttons also have a predefined action. But in this case, the predefined action consists in the reset of the the form fields to their initial values. In other words, the state of the fields in a form that's been reset is the same as when the page has loaded. This action removes all changes the user has applied to the values of the controls.

It would be good to note here that all controls may have a predefined value, this is, a value that's present in the form when the page loads. The way authors have to specify this default value depends on the control. To know how to specify a default value in a particular control type, check the reference for the control in this list.

In the following example you'll be able to test the functionality of the reset button. This form has been declared with a single-line text input, a couple of radio buttons and a checkbox. All these controls have a default value specified with the attributes value and checked, depending the case.

<form action="../../form-result.php" target="_blank">
  <p>Send message: <input type="text" name="message" value="I'm ready!"></p>
  <p>
    <input type="radio" name="when" value="today" checked> Today<br>
    <input type="radio" name="when" value="tomorrow"> Tomorrow
  </p>
  <p><input type="checkbox" name="copy" checked> Send me a copy</p>
  <p>
    <input type="reset" value="Reset the form">
    <input type="submit" value="Send message">
  </p>
</form>

Send message:

Today
Tomorrow

Send me a copy

Labeling controls

Almost any control in a form can be labeled. Labeling controls is a worthwhile operation that enhances accessibility on many fronts. This association between a piece of text and a control will solve the problem noted in previous examples of this tutorial, particularly with radio buttons and checkboxes.

A label can be assigned with the label element. The easiest of the two existing methods for assingning a label to a control, consists of declaring both, the text and the control, as content of the label element. The next example has a couple of controls associated to labels with this method. There you can see how a control receives the focus when its label is clicked.

<form action="../../form-result.php" target="_blank">
  <p><label>Name: <input type="text" name="fullname"></label></p>
  <p>
    Gender:
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </p>
  <p><label><input type="checkbox" name="newsletter"> I'd like to receive the newsletter</label></p>
  <p><input type="submit" value="Send data"></p>
</form>

Gender:

Grouping controls

Sometimes, when a form is large, segmentation could play a role in the improvement of organization and ease of use. This is why HTML provides the fieldset element, which is a container for controls. With this element, authors can make divisions to the form and organize controls thematically.

A fieldset can also have a title to identify the composition or purpose of the set of controls it contains. This title can be provided with the legend element, which must be declared as the first child of the fieldset. The following example shows a small form divided into two thematic groups.

<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Personal information</legend>
    <p><label>Name: <input type="text" name="fullname"></label></p>
    <p><label>Address: <input type="text" name="address"></label></p>
  </fieldset>
  <fieldset>
    <legend>Preferences</legend>
    <p>
      <label><input type="checkbox" name="arts"> Arts</label><br>
      <label><input type="checkbox" name="television"> Television</label><br>
      <label><input type="checkbox" name="videogames"> Videogames</label><br>
      <label><input type="checkbox" name="sports"> Sports</label><br>
    </p>
  </fieldset>
  <input type="submit" value="Send data">
</form>
Personal information

Preferences





As you can see, this organization model is only applied client-side. The data received by the processing agent doesn't have information about controls grouping.

Prev1234Next