HTML form

Everywhere we notice the existence of the form in the real world. Search engines (Google, Bing), social media (Facebook, Twitter, G +, etc.) they are used by a wide range of forms. That’s why Internet has been completed so many practical benefits.

A variety of forms can be designed in html. For example : data form, students admission forms, registration forms, contact forms, web forms and form for the supply of goods, etc. The user fill data by this form which can be used for purposes of sending data or receiving to answer the question.

The HTML form is a method of extracting information to your web site from visitors. Some of the boxes and buttons can be added to your web page where your visitors will provide their information and you can get them via email < form></form> tag is needed to create a form. <Form> tag is a container tag; it means that which have between the <form> and </ form> tag is the part of those form element. For that| declaration syntax is <form>…..</form>

Basic forms structure:

<form action=”….”method=”…”>
………………………….
</form>

Form action and Method:

Action: This attribute determines the destination URL where of the form data will be accepted. The received data will be processed according to the needs of the website server again.

Method:
How the data will be transmitted to the destination URL that determines the method. It uses the two values.
1. Get
2. Post

Gate value:

Gate value, Sends the received data specified address in the URL. Mainly these input values are added to the end of the URL of the specified action attribute. It is a default value, If the method attribute is not specified anything.

Post value:
Post value, Sends data to encoded HTTP data. The data is not possible seen the url address by the user. It is a safe method of sending data, but it should only be used for large-scale data transmission. For example: uploading to a large file or any confidential bank data, passwords etc.

Syntax: Action and Method Attribute
<form action=”http://www.digitech.com/form.php”method=”get”>
……………………………………….
</form>

ID attributes:

ID attributes, for the form element to create a special identity that helps you. The id value is used for validation by the JavaScript and for styling purpose by the CSS selectors.

Text input:

For attaching text, the form field is created by using <input> element. For example, the name of any person or organization.

Type of input is determined by the type attribute. The form control name is determined by the name attribute.
Format: <input type=”text” name=”….” value=”…..”>

If necessary, the size of the text box fields may be mentioned. That case format will be like the following: <input type=”text” name=”firstName:” size=10 maxlength=”15″/>

Example:

HTML Code:

<!DOCTYPE HTML>                        
<html>
<form>
My name: <input type="text" value="Ganesh karmakar"><br>
My brother's name: <input type="text" value= "Poresh Karmakar">
</form>
</body>
</html>

Display in Browsers:

My name:
My brother’s name:

Password Input:

It creates input to receive a password from the user. Such as attribute type=”password”, For security reasons, the input of a password is visible as disguise an asterisk (*) or bullets (●) Symbol.

Example:

HTML Code:

<!DOCTYPE HTML>                        
<html>

<form>
Password: <input type="password" name="pswd"><br>
Re-enter your Password: <input type="password" name="pswd"></br>
</form>
</body>
</html>

Display in Browsers:

Password:
Re-enter your Password:

 

Radio button:

This kind of form is designed to select a specific item from a multiple items. There are two options – on and off. It is determined by the radio input that means, If you want to select any option you must use this radio input. For example: multiple choice questions and answers. It has three attributes such as name, value and checked.

Name: It provides a form control name.
Value: It is determined, which option is selected by the value these values will be sent to the server.

Checked: When the page is loaded first, that time this attribute to determine which option is checked.
Syntax:
<input type=”radio” name=”radioset” value=”data”/> Label (option)

Example:

HTML Code:

<!DOCTYPE HTML>                        
<html>
<style>body{font-family:Verdana;}</style>
<body style"font-family:Verdana;
<form>
<p>Question: What is your favourites Web browser.</p> 
<input type="radio"/> Internet Explorer 8<br>
<input type="radio"/> Google Crome<br>
<input type="radio"/> Mozila Firefox<br>
<input type="radio"/> Opera
</form>
</body>
</html>

Display in Browsers

Question: What is your favourites Web browser.

Internet Explorer 8
Google Crome
Mozila Firefox
Opera

Checkbox:

The user can select or deselect one or more options by the checkbox. Checkbox attributes are same of the radio button attributes.

Example:

HTML Code:

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car<br />
<input type="checkbox" name="vehicle" value="Bicycle" /> I have a bicycle
</form>

Display in Browsers:

I have a bike
I have a car
I have a bicycle

Multiple Lines texts Area:

Multiple line text area is used to collect more than one line of text in detail from the user. For example: user feedback, home addresses etc.
For this tag is <text area>
Format: <textarea cols=”65″ rows=”4″ name=”Feedback”></textarea>

Example:

HTML Code:

<html>
<head>
<title>Simple table Form</title>
</head>
<body>
<h2>Simple table Form</h2>
<form action="submit" method="get">
<p style="background-color: #eeeeee; padding: 8px;">
<table>
<tr><td>Name</td><td colspan="5"><input type="text" size="65" /></td></tr>
<tr>
<td>Address</td><td colspan="5"><input type="text" size="65" /></td>
</tr>
<tr><td>City</td><td><input type="text" /></td><td>State</td>
<td><select><option value="FL">FL</option></select></td>
<td>Zip</td><td><input type="text" size="14" /></td></tr>
<tr><td>Email</td><td colspan="5"><input type="text" size="65" /></td></tr>
<tr><td colspan="6">Message</td></tr>
<tr><td colspan="6"><textarea cols="65" rows="10"></textarea></td></tr>
<tr><td colspan="6"><input type="button" value="Submit" /></td></tr>
</table>
</form>
</body>
</html>

Display in Browsers:

Simple table Form

Simple table Form

Name
Address
City State Zip
Email
Message

 

Leave a Reply

Your email address will not be published. Required fields are marked *