Search within TutorialsPark

HTML Form Intro


Forms make the Internet interactive.


What is Forms?

1.Forms allows the user to fill in data that can be used to send data or to recieve responses to queries.

2.In Real world we see forms everywhere. The Search Engines(Google,Bing..),Social Networks(facebook,twitter,G+..) all make extensive usage of Forms in one form or another.

Its only due to forms that the internet is interactive and userfriendly.


How to create a form?

1.All the form elements must be within the <form> tag.All form related controls are valid within this element only

2.The form attributes define features of the form, while form method denotes the mode of handling the form.

Basic form Structure:




FORM action and Method.

action Attribute defines the destination URL where the form data will be recieved . This recieved data will be further processed on server side as per the Website requirement.

methodThis attribute determines how the data is to sent to the destination URL.It can take two values 1) GET and 2) POST.

1)"GET" value sends the recieved data to the specified URL address. Actually, the values of these inputs are attached to the end part of the URL mentioned in the action attribute. This the default value,if nothing is mentioned in method attribute

Eg: http://www.tutorialspark.com/form.php? email=xyz@abc.com & name=punter . for inputs email and name.

GET method should be used if size of data is short in length.

2)"POST" value send the data to destination URL in encoded HTTP data stream. The data cannot be seen visually by the user on URL address . Its a secure way of data transmission but should be used only for data requiring larger volume."

Eg: Uploading large files, Sensitive bank data,passwords .. etc.

"id":Attribute enables you to allote a unique identity to a form element.This "id" value is often used by Javascript and CSS selectors for validation and styling purposes respectively.

Syntax : Action and Method attribute.



TEXT Inputs.

University :
Department:

1.<input> element is used to create a form field.

2.Attribute type specifies the type of input.To create text field use < input type="text" >

3.Attribute name specifies the name of the form control

Example Text Input.

Give it a TRY! »




Password Inputs.

Password:
Re-enter Password:

1.The attribute type="password"creates an input to obtain password from user.

2.The inputs inside password are Disquised as astericks or bullets-as a security measure.

Example Text Input.

Give it a TRY! »




Radio Buttons.

Favourite Operating system:
Mac OS X Windows8 Linux.

1.A Radio input has two states. On or off,a Radio input indicates if an option is selected or not.

2.Attributes of Radio button:

name: Attribute assigns name to the form control.Which may be used by javascript to reference the form control.

value:Denotes the value will be send to the server when the option is selected.Hence, all options must have different .

Checked:Indicates the option that should be checked(or selected), when the form page first loads up.

Syntax :

Example Radio.

Give it a TRY! »


CheckBoxes.

Select the Operating System:
Mac OS X. Windows8. Linux .

1.Checkbox allows user to select(or unselect) one or more options.

2.The attributes of checkbox are similar to that of radio buttons.

CheckBox Input Example.

Give it a TRY! »




Multiple lines Textarea.

So, why do you want to learn HTML?

1.Multiple line textarea is used to collect textual data from user in detailed form(multiple line).

2. Use < textarea > to encaplsulate the textbox, rows and columnsspecify the rows and columns of text input .

Text area Input Example.

Give it a TRY! »






Related Examples

Related Tags