HTML Tags - Form Tag

What is a HTML form ?

HTML form is a part of the document facilitates the user to enter data which is then sent to the server for processing.

HTML forms acts as a container for many input elements like text fields, password fields, checkboxes, radio buttons, submit button, reset button etc.

Why we use HTML forms ?

HTML forms are used to get data from the user and once submitted, that data will be sent to server for processing.

HTML forms are used widely in all online application process.

HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners

Syntax :

<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <form>
 
                </form>
        </body>
</html>

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple Form</p>
                <form>
                        User Name : <input type = "text" name = "username" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                </form>
        </body>
        </html>

Output :

What are the form attributes ?

There are five main attributes used in HTML forms.

1. action

2. enctype

3. method

4. novalidate

5. target

What are the advantages of HTML forms ?

1. HTML form makes data much easier to sort and manage.

2. HTML form process the date which actually rely on web scripts and sends to server.

3. HTML form is easy to design and convenient easy to use by the users.

4. HTML form is more efficient in collecting data such as feedbacks, surveys, polls etc.

What are the disadvantages of HTML forms ?

1. HTML form depends upon the type of the scripting language.

2. In some cases, like calculations, validations, and marking controls we need to have programmers help.

3. HTML form faces difficultly in initialising the form data.

<form> Tag Attributes

HTML <form> tag support following specific attributes.

Sno	Attributes	Value	Description
1	accept	MIME_file_type	Specify comma-separated list of content types that accepts the server. This attribute has been removed in HTML5.
2	accept-charset	character_set	Specify character encodings that accepts the server. example. accept-charset=”utf8″
3	action	url	Specify location where to send the form’s data.
4	autocomplete	on off	Specify automatically suggestion options. Default value on. on browser should be suggest options automatically. *off* browser does not suggest options automatically.
5	enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specify the encoding method to be used for data when the form’s data is submitted. Default value application/x-www-form-urlencoded. *application/x-www-form-urlencoded* Specifies this value that replaced spaces to plus (+) signs. And special characters to HEX values. *multipart/form-data* Specifies this value when file uploads. *text/plain* Specifies this value that only replaced spaces to plus (+) signs.
6	method	get post	Specify the method to use when sending form’s data. *get* form data is appended at the end of URL when form submitted. *post* form data is attached to the body of the request. In this method, form data does not appended to the URL.
7	name	text	Specify form name.
8	novalidate	novalidate	Specify form should not be validated when the form’s data is submitted.
9	target	_blank _self _parent _top	Specify where to display the results after submitting form data. *_blank: Display the result in a new tab. _parent: Display the result in the immediate parent context. _self: Display the result in the same context that containing the form. _top*: Display the result in the top parent context.

Global Attributes

HTML <form> tag support following global attributes.

Sno	Attributes	Value	Description
1	id	unique_name	Declared unique id for an element.
2	class	class_name	Declared one or more classnames for an element.
3	style	styles	CSS inline styles specify an element.
4	title	title	Specify extra details of element contain, this will display as a “tooltip” for an elements.

Event Attributes

HTML <form> tag support following event attributes.

Sno	Attributes	Value	Description
1	onfocus	script	element gets focus on object when script tobe run.
2	onblur	script	element lose the focus on object when scrip tobe run.
3	onabort	script	element gets aborted on object when script tobe run.
4	onchange	script	element gets anytime change on object when script tobe run.
5	onbeforeunload	script	element gets unloaded on object when scrip tobe run.
6	onclick	script	clicked on object when script tobe run.
7	ondblclick	script	double click on object when script tobe run.
8	onkeydown	script	key is pressed when script tobe run.
9	onkeypress	script	key is pressed over element then released when script tobe run.
10	onkeyup	script	key is released over element when script tobe run.
11	onmousedown	script	mouse button was pressed over an element when script tobe run.
12	onmouseout	script	mouse pointer release over an element when script tobe run.
13	onmousemove	script	run mouse pointer moved when script tobe run.
14	onmouseover	script	run mouse pointer move over when script tobe run.
15	onmouseup	script	mouse button is released when script tobe run.
16	onreset	script	form has been reset when script tobe run.
17	onselect	script	Select some content when script tobe run.
18	onsubmit	script	form has been submitted when script tobe run.
19	onload	script	object has load when script tobe run.
20	onchange	script	allow to change the object when script tobe run.
21	onunload	script	unload to the browser window when script tobe run.
22	ondrag	script	element being dragged when script tobe run.
23	ondragend	script	element being stop dragged when script tobe run.
24	ondragenter	script	element being go target dragged when script tobe run.
25	ondragleave	script	element being leave to target dragged when script tobe run.
26	ondragover	script	element being over to target dragged when script tobe run.
27	ondragstart	script	element being start dragged when script tobe run.
28	ondrop	script	element being dropped when script tobe run.
29	onerror	script	element error occurs when script tobe run.
30	onmessage	script	element message display when script tobe run.
31	onerror	script	element error occurs when script tobe run.
32	onmousewheel	script	mouse wheel will be rotate when script tobe run.
33	onscroll	script	scrollbar is scroll when script tobe run.
34	onresize	script	element should be resize when script tobe run.
35	onselect	script	all element content selected when script tobe run.
36	onstorage	script	element should be store in target when script tobe run.

Browser Compatibility

Sno	Browser	Support
1	Chrome	Yes
2	Firefox	Yes
3	Edge	Yes
4	Opera	Yes
5	Safari	Yes
6	Internet Explorer	Yes