Creating Web Forms in HTML: Part 2

0

Part 2: Select, Radio / Checkbox and Button elements

HTML forms have become ubiquitous as organizations attempt to connect with their customers. Therefore, it is imperative to know them for anyone learning how to build websites and / or web applications. In this short series on HTML forms, we get to know form controls by creating one that accepts user details for a hypothetical newsletter subscription or site membership. In the first part, we learned how to use the Form, Input, and Label elements. In this article, we’ll cover the Select, Radio / Checkbox, and Button commands. Then in part 3 we will learn how to use CSS and JavaScript to improve our form.

The demo revisited

You will find the completed form on codepen.io:

It’s really just a fork of Konstantin Bychkov’s project. He added some CSS and JavaScript improvements to make his form stand out from your mill run HTML form.

The element

As the name of the tag suggests, the item is used to create a drop-down list from which the user can select one or more items. The tags inside the item define the choices available in the drop-down list. This is a good control to use when you have between three and fifty items to present to the user.

Here is the HTML markup for the city item in our form:


Know your options

The tag supports a few additional attributes, a few of which are used in the “Choose your city” option. here are the selected and disabled attributes:

  1. selected defines the option text that will appear by default, that is, before the user makes a selection. Here it is in our form:HTML Select Box Tutorial
  2. Setting the disabled The attribute prevents the user from selecting this option. This is useful for options that provide placeholder information. You will notice that the disabled options are grayed out in the drop-down list:Tutorial on HTML forms

The “radio” and “checkbox” types

We’ve already covered the item in part 1. As mentioned here, the element is the most versatile of all form controls. How versatile? Take a look at the number of controls it covers:

  • (default if no type attribute is provided)

We won’t cover all of them here, but we do include the ” check box “ and “radio” types in our form for gender and “Remember me” fields, respectively.

The element in HTML

Let’s start with the radio buttons, since they appear first in our form. Radio buttons are normally presented in a group that belongs to a set of related, but mutually distinct (like gender) options. Being separate, only one radio button from a group can be selected at a time.

Take a look at our two genre radio buttons in the source code:

Here they are again with all class attributes removed for easier readability:

You can see how the members of the same radio group are defined via the name attribute, or, more precisely, by the value of the name attribute. In our case, both share the name “genre”. Selecting a radio button with the same name automatically deselects any other selected radio buttons. You can have as many radio groups on a page as you want, as long as each group has its own name.

Although we don’t use it, the option value The attribute defines a unique value associated with each radio button. The value is not visible to the user, but it is the value that is sent to the server on the “submit” form that identifies the selected radio button. This value tends to correlate with an ID in the database.

The element

The check box appears as a square box that is checked (checked) when it is selected. Similar to radio buttons, check boxes are used to allow a user to select one or more options from a limited number of choices. The key phrase being that “one or more” checkboxes within a group can be selected (we don’t see this behavior in our form because we only have one checkbox).

Here is the “Remember me” checkbox in the HTML markup:

And again without the lessons:

The element

There are actually two ways to define a clickable button:

  1. Using the label:
    
    
  2. Using the tag with a type of “button”:

The difference is that inside a item, you can include tags such as , , ,
, , etc., in addition to or in place of the text. This is not possible with a button created with the element because the value attribute can only accept one string (text).

HTML Web Form Tutorial

In this article in the Create a Web Form with HTML series, we covered the Select, Checkbox, and Button controls. In part 3, we will learn how to use CSS and JavaScript to improve our form.

Share.

Comments are closed.