Form Widgets

Widgets

Widgets are the components of forms in HTML. A form is usually made up of one or more widgets. There are many types of widgets in HTML. Each type of widget collects a different piece of information.

Name attribute

The name attribute is used for uniquely identifying individual widgets. Without the name attribute, the data cannot be sent from the form to the processing page. The elements having name attribute can have an id attribute for accessing the element in JavaScript.

Input element

The input element is by far the most common form widget used in all websites. It is used for collecting short pieces of information from the user. It has many types which should be provided through the type attribute. Based on the value of this attribute the browser displays the input element differently. You can provide a default value for the widget using the value attribute.


<input type="text" id="name" name="username" value="John Doe">
  • The most common type is text which can accept any text information.
  • If the type is email then the browser checks if the user has entered a valid email address. It shows an error message if the email format is wrong.
  • If the type is password then the browser hides the text by replacing characters with discs.
  • If the type is submit then the browser displays a submit button. If the user clicks on the submit button then the form data will be sent to the page specified in the action attribute of the form.
  • If the type is radio then the browser displays a radio button. All the radio buttons for the same data set must have the same name attribute for them to be grouped together. If the checked attribute is provided for a radio typed element then that element is selected by default.

<input type="radio" name="answer" value="yes" checked>

<input type="radio" name="answer" value="no">

Label element

The label element is used for providing a label for the widgets. The label is used to inform the user what information to enter into the widget. The label element has a for attribute. This attribute is used for linking to the corresponding widget that the label explains. The value of this attribute should be the id of the widget.


<label for="username">Username</label>

<input type="text" name="username">

Textarea element

The textarea element is used for collecting large amounts of text data. The input element shows only shows 20 characters of data. For large text inputs, this may not be convenient for the users. The textarea is suitable for this situation. Most browsers allow the textarea element to be resizable. Any value that is provided as content for the element is shown inside the text area as default text.


<textarea id="msg" name="message">

</textarea>

Button element

The button element is used for adding clickable buttons on the web page. The button element also has a type attribute.

  • If the type is submit then clicking on the button will submit the form data to the page in the action attribute of the form element. This is the default value.
  • If the type is reset then clicking on the button will reset the widgets to their initial values. Any data previously entered will be cleared.
  • If the type is button then clicking the button does not do anything. This is useful for making custom buttons using JavaScript functions.

<button type="submit">OK</button>

The input element with submit type is the same as button with submit type. The difference is that since the input element uses value attribute it can only have text. Since the button element can have HTML content, any HTML element can be used as a button. For example, images can be made as buttons.

fieldset and legend elements

It is possible to divide a form into different sections using the fieldset element. Similar widgets can be grouped together into a fieldset. By default a thin border is added to the fieldset by the browser. The fieldset can have a legend element that acts as a caption for the fieldset.


<form action="example.php" method="post">

<fieldset>

<legend>Contact</legend>

<label>Name</label>

<input type="text" name="username">

<label>Email</label>

<input type ="email" name="email">

<label> message</label>

<textarea name="message"></textarea>

<button type="submit">Send Message</button>

</fieldset>

</form>