HTML Forms

Last Updated Jul 21, 2015, 12:00:06 PM

HTML Form is made of one or more widgets. Those widgets can be text fields (single line or multiline), select boxes, buttons, checkboxes, or radio buttons. Most of the time, those widgets are paired with a label that describes their purpose.

HTML form element

All HTML forms start with a <form> element like this:

All of its attributes are optional but it's considered best practice to always set at least the action attribute and the method attribute.

The action attibute defines the location (an URL) where the form's collected data should be sent.

The method attribute defines which HTTP method to send the data with (it can be "get" or "post").

The label element

HTML label attribute represents a caption for an item in a user interface

HTML <textarea> Form Element

The HTML <textarea> element represents a multi-line plain-text editing control.

HTML Radio Button Input

Radio buttons are used to let the user select exactly one option from a pre-defined set of options. It is created using an <input> element whose type attribute has a value of radio.

If you want to allow your user to select more than one option at the same time you should use the check boxes instead.

HTML Checkboxes

Checkboxes allows the user to select one or more option from a pre-defined set of options. It is created using an <input> element whose type attribute has a value of checkbox.

HTML Select Boxes

A select box is a dropdown list of options that allows user to select one or more option from a pull-down list of options

In a Web form, the HTML <option> element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist< HTML5 element.

Password Field

Password fields are similar to text fields. The only difference is; characters in a password field are masked i.e. shown as asterisks or dots. This is to prevent others from reading the password on the screen.

The password fields are created using an <input> element whose type attribute has a value of password.

Required Fields in Forms

Sometimes, developers might want to create a form where users must enter some fields which means they can not leave those fields as blank.

The aria-required property can be applied to a form element to indicate to an AT(*) that it is required to complete the form.

In the below example if the fileds contans (*) symbol which means it can not be left as blank

The <button> Element

The <button> element defines a clickable button:

The source of the content has been referred and updated with Mozilla Foundation and w3C

Last Updated Jul 21, 2015, 12:00:06 PM