Introduction to HTML Form and Attributes

One of the many reasons for a successful business is good relations between customers/users and the company. Companies listen to the feedback provided by the customer/user and take action accordingly. You can see forms on the contact/contact us page on almost every website, which asks for name, email, phone number, and message, etc.

To validate users you can also see the registration page. The next time you visit the page you have to log in and if you happen to forget the password then there is also forgot password page to help you.

These are where HTML form comes in which is the most important element in any kind of data collection and then sends it to a server for further processing. This form can be the Registration Form, Log In Form, Admission Form, Subscription Form, Search Form, Feedback Form any kind of information input filled by the customer/user.

An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally “complete” a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

Form Attributes

Attribute	Description
accept	Comma-separated content types the server accepts
accept-charset	List of character encodings that the server accepts
action	Specifies the encoding of the submitted data
autocomplete	Indicates whether input elements can by default have their values automatically completed by the browser
enctype	The mime type used to encode the content of the form
method	Specify the method to be used to upload data
name	Unique name for the form
novalidate	The boolean attribute indicates that the form shouldn’t be validated when submitted
rel	Creates a hyperlink or annotation depending on the value
target	Indicates the target of the address in the action attribute

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form:

Text Input Controls
Checkboxes Controls
Radio Buttons Controls
Select Box Controls
File Select boxes
Hidden Controls
Clickable Buttons
Submit and Reset Button

Text Input Controls

There are three types of text input used on forms:

Single-line text input controls:- Single-line text input controls are created using an <input> element whose type attribute has a value of text.

Example

Following is the list of attributes

type: Indicates the type of input control and for text input control it will be set to text.
name: Used to give name to the input control that is then sent to the server.
value: Used to provide an initial value inside the control.
size: Allows to specify the width of the text-input control in terms of characters.
maxlength: Allows to specify the maximum number of characters a user can enter into the text box.
Password input controls:- This is also a form of single-line text input controls but it masks the character. They are created using an <input> element whose type attribute has a value of password.

Example

Output

Following is the list of attributes

type: Indicates the type of input control and for password input control it will be set to password.
name: Used to give name to the input control that is then sent to the server.
value: Used to provide an initial value inside the control.
size: Allows to specify the width of the text-input control in terms of characters.
maxlength: Allows to specify the maximum number of characters a user can enter into the text box.
Multiple-Line Text Input Controls:- If you want to allow a visitor to your site to enter more than one line of text, you should create a multiple-line text input control using the <textarea> element.

Example

Output

Following is the list of attributes

name: Used to give name to the input control that is then sent to the server.
rows: Indicates the number of rows of text area box.
cols: Indicates the number of columns of text area box.

Checkboxes Controls

The checkboxes are input controls that are used to select a single option from the list of options. The <input> tag with the value of the type attribute as “checkbox” is used to create checkboxes. This input control also supports name, value, and checked as optional attributes.

Example

Following is the list of attributes

type: Indicates the type of input control and for checkbox input control it will be set to checkbox.
name: Used to give name to the input control that is then sent to the server.
value: The value that is selected.
checked: Option that is selected by default.

Radio Buttons Controls

The radio buttons are input controls that are used to select multiple options from the list of options. The <input> tag with the value of the type attribute as “radio” is used to create radio buttons. This input control also supports name, value, and checked as optional attributes.

Example

Output

Following is the list of attributes

type: Indicates the type of input control and for checkbox input control it will be set to radio.
name: Used to give name to the input control that is then sent to the server.
value: The value that is selected.
checked: Option that is selected by default.

Select Box Controls

The select box or dropdown box is input controls that are used to select one or more options from the huge list of options. The <select> tag is used to create select box. This tag supports name as an attribute. The option to be selected is listed with <option> tag having value as the attribute. This <option> tag also has selected as an optional attribute.

Example

Output

Following is the list of attributes

- name: Used to give name to the input control that is then sent to the server.
- size: This can be used to present a scrolling list box.
- multiple: To allow multiple select options.
- value: The selected option value.
- selected: For selected option.

label: An alternative way of labeling options.

File Select Boxes

If you want to allow a user to upload a file to your web site, you will need to use a file select box. This is created using the <input> element but type attribute is set to file.

Example

Output

Following is the list of attributes

name: Used to give name to the input control that is then sent to the server.
accept: File type that is allowed for upload.

image/*: To upload all types of images.

audio/*: To upload all types of audio.

video/*: To upload all types of video.

file_extension: To upload specific files.

Hidden Controls

Hidden controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page.

Example

Output

Following is the list of attributes

- name: Used to give name to the input control that is then sent to the server.

type: To create hidden input control we set the type attribute to hidden.

value: The value that is set for the hidden input control.

Buttons Controls

The buttons controls are created using <input> tag or <button> tag.

The <input> tag with the value of the type attribute as “submit”, “reset” or “button” is used to create a Submit Button, Reset Button, or other Buttons respectively. Apart from the name as the attribute, value attribute is also used, which displays text on the button.

Example