Tags and attributes used in creating HTML Form

Tags and attributes used in creating HTML Form

If you know the tags and attribute used in creating a html form then you can easily create html form in less than a minute.

Form starts with a <form> tag and close with a </form> tag

HTML form input types

Before you learn how to make a form you must know different HTML form input type
You will require input fields where you can ask visitor to fill the data
there are many input types but commonly used types are explained below

• text
• checkbox
• radio
• submit
• password

Input type Text

Your Name = <input type="text" name="firstname" value="Rahul">

Input type Radio

<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female

html form checkbox (Input type checkbox)

<input type="checkbox" name="cloths" value="top">I have a top
<input type="checkbox" name="cloths" value="jeans">I have a jeans
<input type="checkbox" name="cloths" value="tshirt">I have a tshirt

html form drop down - html form select <select><option>

Select, Option
Select element show drop down list.
The option elements explain the options to select.

<select name="cars">
<option>BMW</option>
<option>Audi</option>
<option>Jaguar</option>
</select>

Input type Password

when you want to add password in text field use input type password

Enter your password <input type="password" name="pass">

html form submit (input type submit)

for submitting the form you can use input type submit
<input type="submit" value="Submit Me">

HTML <form> action Attribute

when you hit the submit button at that time where will the data go is defined by form action attribute
syntax
<form action="url"> (here url means where to send the form data when the form is submitted)

<form action=page.php>  (this is a relative url, it means it points to a file within a web site)
<form action="http://anydomain.com/page.htm">  (this is a absolute url where it points to another website)

HTML form button

The button element explain i am clickable button.
Explain:-
<button type="button" onclick="alert('Hii rahul')">  click me </button>

html form method

html form method tells how to send form data where form data is sent to page specifed in action attribute

Syntax
<form method="get"> or <form method="post">

1. Method GET:

Appends form-data into the URL in name/value pairs.GET is only better for non-secure data, like query strings in Google. The length of a URL is limited about 3000 characters. Never use GET to send sensitive data!  as it will be visible in the URL. Get method is useful for form submissions where a user want to bookmark the result.

2. Method POST:

Appends form-data inside the body of the HTTP request where data is not shown in URL. Post method has no size limitations. Form submissions with POST cannot be bookmarked


Now you know tags and attributes used in html form. Now in my next tutorial you can easily understand all the tags and attributes i will use in creating a html form.

I have skipped many tags here if you know some then you can comment.  :)

Share on Google Plus

About Rahul Rana

I am an experienced web designer and SEO expert. I am running my own online marketing company i.e "SEO To Web Design". Thanks for reading, keep sharing online marketing and web design knowledge.