Sometimes we need information from our web site visitors. HTML tag can be used to get input from the
visitors, for example: polls, request product, visitors comments, etc.
Following is the codes to arrange form:
<Form>.....</Form>
While its attributes are:
Method ="post" or Method ="get"
Action="specify_your_url_here" or Action="specify_your_email"
Post method is utilized to get visitors input, while get method is utilized to get inputs from another document or web page.
Usually, the inputs that visitors will have been being typed is sent to script program, like CGI, PHP, Asp, etc.
Following is the types of form:
1) Text : this form is utilized to get strings input (numbers or characters) from
visitorr. Following is the example:
While the codes are:
| <form> <font size="2">Name: </font> <input type="text" size="20" name="name"><br> <font size="2">Address: </font> <input type="text" size="20" name="Addres"></form> |
To make your form look smooth, it is recommended for you to use no bordered table. Following is the example:
While the codes are:
| <form> <table width="100%"> <tr> <td width="50%"> <font size="2">Name:</font></td> <td width="50%"> <input type="text" size="20" name="name"></td> </tr> <tr> <td width="50%"> <font size="2">Address:</font></td> <td width="50%"> <input type="text" size="20" name="name"></td> </tr> </table> </form> |
2) Radio : This kind of form will gives visitors few options, but only 1 option can be choiced.
While the codes are:
| <form> <table width="100%"> <tr> <td width="57%">What do you think about this web site ?</td> <td width="43%"> <input type="radio" checked value="nice" name="polls"> nice<br> <input type="radio" value="cool" name="polls"> cool<br> <input type="radio" value="not bad" name="polls"> not bad<br> <input type="radio" value=" bad" name="polls"> bad</td> </tr> </table> </form> |
3) Drop down box : this form will allows visitors to choose a choice from any list options. Following is the example:
Followings are the codes:
| <form> <table width="100%"> <tr> <td width="45%">Select your country</td> <td width="55%"> <select size="1" name="country" multiple> <option>Albania</option> <option>British</option> <option>China</option> <option>Dutch</option> </select></td> </tr> </table> </form> |
Check box : Check box will allow visitors to choose multiple choices even all options can be choose. Following is the example:
While the codes are:
| <form> <table width="100%"> <tr> <td width="50%">what do you like on this site ?</td> <td width="50%"> <input type="checkbox" name="favorite" value="html" checked> HTML tutorial<br> <font size="2"> <input type="checkbox" name="favorite" value="stuffs"> Free stuffs<br> <input type="checkbox" name="favorite" value="keywords"> Keywords tutorial<br> <input type="checkbox" name="favorite" value="design"> Design</font></td> </tr> </table> </form> |
Text Area : this form is utilized to get visitors input in memo form.
Following is the example:
Following is the codes:
| <form> <table width="100%"> <tr> <td width="50%"> <p style="line-height: 150%">Your comments please ?</td> <td width="50%"> <p style="line-height: 150%"> <textarea rows="3" name="comment" cols="24">the visitors is allowed to enter their comments here</textarea></td> </tr> </table> </form> |
4) Button : this form is utilized to call some function or script so it will make the form more interactive. Following is the example:
While the codes are:
| <form> <p align="center"> <input type="button" value="Click Me" name="call" onclick="your_script"></p> </form> |
5) Submit and Reset button :
Submit button is utilized to run the form, so that the form will send the data to your email or any
web page.
Reset button is utilized to reset the miss-input that have been entered, so that visitors can re-write
their input. Following is the example:
While the codes are:
| <table width="100%"> <tr> <td width="100%"> <form> <input type="submit" value="Submit" name="B1"> <input type="reset" value="Reset" name="B2"> </form> </td> </tr> </table> |
May be you want to change the values too:
Following is the codes:
| <table width="100%"> <tr> <td width="100%"> <form> <input type="submit" value="Send Data" name="submit"> <input type="reset" value="Reset Data" name="Reset"></p> </form> </td> </tr> </table> |
And this is the example of form:
Followings are the codes:
| <table width="100%"> <tr> <form method="POST" action="your_email"> <td width="54%"> <font size="2">Name</font></td> <td width="46%"> <input type="text" size="20" name="Name"></td> </tr> <tr> <td width="54%"> <font size="2">Address</font></td> <td width="46%"> <input type="text" size="20" name="Addres"></td> </tr> <tr> <td width="54%"><font size="2">What do you think about this web site ?</font></td> <td width="46%"><font size="2"> <input type="radio" checked value="nice" name="polls"> nice<br> <input type="radio" value="cool" name="polls"> cool<br> <input type="radio" value="not bad" name="polls"> not bad<br> <input type="radio" value=" bad" name="polls"> bad</font></td> </tr> <tr> <td width="54%"><font size="2"> Select your country</font></td> <td width="46%"><font size="2"> <select size="1" name="country" multiple> <option>Albania</option> <option>British</option> <option>China</option> <option>Dutch</option> </select></font></td> </tr> <tr> <td width="54%"><font size="2">What do you like on this site ?</font></td> <td width="46%"><font size="2"> <input type="checkbox" name="favorite" value="html" checked> HTML tutorial<br> <input type="checkbox" name="favorite" value="stuffs"> Free stuffs<br> <input type="checkbox" name="favorite" value="keywords"> Keywords tutorial<br> <input type="checkbox" name="favorite" value="design"> Design</font></td> </tr> <tr> <td width="54%"><font size="2"> Your comments please ?</font></td> <td width="46%"><font size="2"> <textarea rows="3" name="comment" cols="24">the visitors is allowed to enter their comments here</textarea></font></td> </tr> <tr> <td width="54%"> </td> <td width="46%"> </td> </tr> <tr> <td width="54%"> </td> <td width="46%"><font size="2"> <input type="submit" value="Send Data" name="submit"> <input type="reset" value="Reset Data" name="Reset"></font></form></td> </tr> </table> |
