HTML FORMS WITH DETAIL

Tweet

Html forms are used for website interaction. In this way the visitors can communicate with you. The html forms contain different elements such as first name, last name, password, confirm password, favorite lists, gender etc .html form start with <form> and end with </form>. <input> this tag contain different attributes such as name, size, maxlength and type. It is used to make input field between form tags.           Type=  It tells the browser that it is text field, password, submit field.           Name= Defines the name of field.           Size=  This attribute used to define the size of input box.         Maxlength= This is used for maximum character in the input box. FIRST NAME; In text type you can add any which in text such as first name, last name etc. FOR EXAMPLE First name :< input type=”text” size=”15” maxlength=”30” name=”first name”>          Password; In this type you can add the password field in your form which means if you type any thing in the password it appears in the shape of black dots. FOR EXAMPLE; First name :< input type=”password” size=”15” maxlength=”30” name=”first name”>  SUBMITTING DATA. Now little bit your farm is complete but problem is that how we send data and where and adding submitting button.  There are two type of method of sending data.   get it sends the data showing its as url. This is easy to hack for hackers.  Post it send the data without showing its as url. NOTE get is on the default if you don’t tell the browser it automatically use get method. How to define the method of post in form? You can define with attribute of method just like that <form method=’post’> Where to send data? The two type of sending data one is you can send to the email system and this is very easy method. Second is the scripting you can use the script of php, perl, javascript etc. You use action attribute in form tag.just like that. EXAMPLE; <form mehod=’post’ action=’mailto:mohammadwaqar401@gmail.com’> SUBMIT BUTTON; Adding submit button again we use input tag between form tags. EXAMPLE; <input type=’submit’ value=’submit’> RADIO BUTTON In the radio button you have only on choice. You give the two option choose your gender one option is male and other is female. If you click on the male it marked and when you click on female it marked the female but unmarked the male. Forexample Gender  <input type='radio' name='gender' value='Male'>Male                        <input type='radio' name='gender' value='Female'>Female CHECK BOX; In the check you have multiple choice. Just like that tick  your favorites cities. If there is newyork, London, sydny you can select all of these. For example; <input type='checkbox' name='cities' value='Newyorl'>New york <br />                 <input type='checkbox' name='cities' value='Sydny'>Sydny <br />                 <input type='checkbox' name='cities' value='London'>London <br /> DROPDOWN LISTS; In this you can add list and you can select one item from the list. Drop down list contain two tags one is select and second is option. Option tag placed between select tag. For example   <select name='birthyear'> <option> 2001</option> <option> 2002</option> <option> 2003</option> <option> 2004</option> <option> 2005</option> <option> 2006</option> <option> 2007</option> <option> 2008</option> <option> 2009</option> <option> 2010</option> <option> 2011</option> <option> 2012</option> <option> 2013</option> <option> 2014</option> </select> FINAL WORDS; Now you know how to make form in html. It is very easy but it need some practice. Keep practicing remember in your prayer and don’t forget to share our post with your friend. Keep Visiting!

Html forms are used for website interaction. In this way the visitors can communicate with you. The html forms contain different elements such as first name, last name, password, confirm password, favorite lists, gender etc .html form start with <form> and end with </form>.

<input> this tag contain different attributes such as name, size, maxlength and type. It is used to make input field between form tags.

          Type=  It tells the browser that it is text field, password, submit field.

          Name= Defines the name of field.

          Size=  This attribute used to define the size of input box.

        Maxlength= This is used for maximum character in the input box.

FIRST NAME;

In text type you can add any which in text such as first name, last name etc.

FOR EXAMPLE

First name :< input type=”text” size=”15” maxlength=”30” name=”first name”>

        

Password;

In this type you can add the password field in your form which means if you type any thing in the password it appears in the shape of black dots.

FOR EXAMPLE;

First name :< input type=”password” size=”15” maxlength=”30” name=”first name”>

 SUBMITTING DATA.

Now little bit your farm is complete but problem is that how we send data and where and adding submitting button.

 There are two type of method of sending data.

  get it sends the data showing its as url. This is easy to hack for hackers.

 Post it send the data without showing its as url.

NOTE

get is on the default if you don’t tell the browser it automatically use get method.

How to define the method of post in form?

You can define with attribute of method just like that <form method=’post’>

Where to send data?

The two type of sending data one is you can send to the email system and this is very easy method. Second is the scripting you can use the script of php, perl, javascript etc.

You use action attribute in form tag.just like that.

EXAMPLE;

<form mehod=’post’ action=’mailto:mohammadwaqar401@gmail.com’>

SUBMIT BUTTON;

Adding submit button again we use input tag between form tags.

EXAMPLE;

<input type=’submit’ value=’submit’>

RADIO BUTTON

In the radio button you have only on choice. You give the two option choose your gender one option is male and other is female. If you click on the male it marked and when you click on female it marked the female but unmarked the male.

Forexample

Gender  <input type='radio' name='gender' value='Male'>Male
                       <input type='radio' name='gender' value='Female'>Female

CHECK BOX;

In the check you have multiple choice. Just like that tick  your favorites cities.

If there is newyork, London, sydny you can select all of these.

For example;

<input type='checkbox' name='cities' value='Newyorl'>New york <br />
                <input type='checkbox' name='cities' value='Sydny'>Sydny <br />
                <input type='checkbox' name='cities' value='London'>London <br />

DROPDOWN LISTS;

In this you can add list and you can select one item from the list. Drop down list contain two tags one is select and second is option. Option tag placed between select tag.

For example

  <select name='birthyear'>
<option> 2001</option>
<option> 2002</option>
<option> 2003</option>
<option> 2004</option>
<option> 2005</option>
<option> 2006</option>
<option> 2007</option>
<option> 2008</option>
<option> 2009</option>
<option> 2010</option>
<option> 2011</option>
<option> 2012</option>
<option> 2013</option>
<option> 2014</option>
</select>

FINAL WORDS;

Now you know how to make form in html. It is very easy but it need some practice. Keep practicing remember in your prayer and don’t forget to share our post with your friend. Keep Visiting!