HTML and CSS  Home HTML and CSS Tutorials Form & HTML Input
rss

Form & HTML Input

Author: Een More by this author


Form & HTML InputSometimes 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: 

Name:
Address:

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:

Name:
Address:

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.

What do you think about this web site ? nice
cool
not bad
bad

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: 

Select your country

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:

what do you like on this site ? HTML tutorial
Free stuffs
Keywords tutorial
Design

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:

Your comments please ?

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">&nbsp;
<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:

Name
Address
What do you think about this web site ? nice
cool
not bad
bad
Select your country
What do you like on this site ? HTML tutorial
Free stuffs
Keywords tutorial
Design
Your comments please ?
   
   

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%">&nbsp;</td>
<td width="46%">&nbsp;</td>
</tr>
<tr>
<td width="54%">&nbsp;</td>
<td width="46%"><font size="2">
<input type="submit" value="Send Data" name="submit">&nbsp;
<input type="reset" value="Reset Data" name="Reset"></font></form></td>
</tr>
</table>


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Form & HTML Input"