Form Controls (input, text, radio, button, etc.)

Text Input Control – Three types of text input are present in HTML single-line text boxes which are also called as text fields, password input and multiple-line text areas.

Single-Line Text Fields – It is the basic type of text input control and is a blank space, resembling a box, which can have only a single line of text.

Password Text Fields – It is similar to the regular text field but is exclusively used to input passwords as the text entered in it is shown as bullets instead of plain text. It is a form of single-line text input control created using an <input> element whose type attribute has a value of password

Multiple-Line Text Areas – It uses <textarea> tag to input more than a single line of text from users. To specify the size of the text area, the tag uses the cols and rows attributes

• Cols attribute specify width of text area, based on an average character width.
• Rows attribute specify height of text area, based on the number of text lines.

Radio Button Control – It is a small, round button which enable users to select a single option from a list of choices. It is used when only one option is required to be selected. It is created with the <input> tag with a value of “radio” in the type attribute. When the user selects one of the options by pressing the radio button, the circle is filled in with a black dot.

Check Box Control – It is a square box similar to radio buttons as they offer choices to user which can be clicked on or off but, it lets the user select more than one choice from the list of options. When a check box is pressed, small ‘x’ or a check mark appears in the box, depending on web browser.

Select Menu Control – It offers users to choose from a long list of options using drop down menu or select multiple choices from a box showing various choices usually with scroll bars. Select menus are lists that are compressed into one or more visible options.

Button Control – They interact with users usually to submit a form for processing or data transfer. They are displayed as rectangles with squared-off edges by default. These clickable buttons are made by using <input> tag. Both the <input> or <button> tag can be used to create any of the different types of buttons but the <input> tag is supported by many browsers. HTML has three types of buttons which are specified using the type attribute

Submit – It creates a button that submits the form for processing or data transfer

Reset – It creates a button which when pressed, resets form controls back to their initial values.

Button – It creates a button which when pressed, an action or event is triggered, based on a predefined script or function.

Label Control – It is used to provide a descriptive text before an input control, to help users to understand about the control. Each label can attached to a single control only. It’s usage involves linking the label and the associated control by having same value of ‘for’ attribute in the label tag and value of the id attribute of the control

Back to Tutorial