FORM TAGS

Tony's HTML4 Course


Basic Structure
Text & Password
Checkbox & Radio
Image coordinates
Hidden Elements
File Select
Button
Selectable Menu
Text Area
Old Input Style
Button Style
Field Style
Label

pic Basic Structure

Form Basic
      <form action="url" method=*>
       ...
      <input type=submit> <input type=reset>
      </form>

url=url of CGI script
*=GET, POST

Input Basic
      <input type=* name=**>

*=text, password, checkbox, radio, image, hidden, submit, reset
**=Symbolic Name for CGI script


pic Text & Password

<input type=*>
<input type=* value=**>
*=text, password

<form action=/cgi-bin/post-query method=POST>
Your Name: 
<input type=text name=name><br>
Your Home Page: 
<input type=text name=home value=http://><br>
Password: 
<input type=password name=name><br>
<input type=submit><input type=reset>
</form>
Your Name:
Your Home Page:
Password:


<input type=* size=**>
<input type=* maxlength=**>

<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>





pic Checkbox & Radio

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=f01>
	Banana
<input type=checkbox name=f02 checked>
	Apple
<input type=checkbox name=f03 value=Orange>
	Orange
<br><br>
<input type=submit><input type=reset>
</form>
Banana Apple Orange



<input type=radio value=**>
<input type=radio value=** checked>

<form action=/cgi-bin/post-query method=POST>
<input type=radio name=fruits>
	Banana
<input type=radio name=fruits checked>
	Apple
<input type=radio name=fruits value=Orange>
	Orange
<br><br>
<input type=submit><input type=reset>
</form>
Banana Apple Orange




pic Image coordinates

<input type=image src=url.gif>

<form action=/cgi-bin/post-query method=POST>
<input type=image name=face src=f.gif><br><br>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<br><br>
<input type=reset>
</form>


x2 x4 x6




pic Hidden Elements

<input type=hidden value=*>

<form action=/cgi-bin/post-query method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <br><br>
<input type=submit><input type=reset>
</form>
Here is a hidden element.



pic File Select

<input type=file>

<form action="url to script" enctype="multipart/form-data" method=POST>
<input type=file name=upload> <BR><BR>
</form>



pic Button

<input type=button value=#>

<form>
<input type=button value="Open a new window!"
 onClick="window.open('samp/050window.htm')">
</form>


pic Selectable Menu

Select tag's Basic Construction
      <select name=*>
      <option> ...
      </select>


<option selected>
<option value=**>

<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
	<option>Banana
	<option selected>Apple
	<option value=My_Favorite>Orange
</select><br><br>
<input type=submit><input type=reset>
</form>




<select size=**>

<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
	<option>Banana
	<option selected>Apple
	<option value=My_Favorite>Orange
	<option>Peach
</select><br><br>
<input type=submit><input type=reset>
</form>




<select size=** multiple>

<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3 multiple>
	<option selected>Banana
	<option selected>Apple
	<option value=My_Favorite>Orange
	<option selected>Peach
</select><br><br>
<input type=submit><input type=reset>
</form>





pic Text Area

<textarea name=* rows=** cols=**> ... <textarea>

<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=30>
</textarea>
<br><br>
<input type=submit><input type=reset>
</form>




Word Wrapping

<textarea wrap=off> ... </textarea>

This is same as default setting.


<textarea wrap=soft> ... </textarea>

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><br><br>
<input type=submit><input type=reset>
</form>




<textarea wrap=hard> ... </textarea>

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><br><br>
<input type=submit><input type=reset>
</form>





pic Old Input Style

<isindex prompt=*>

<isindex prompt="Enter Search Keyword: ">
This is a deprecated element and should be replaced by INPUT.



pic Button Style

<button type=*> ... </button>
*=submit, reset

<form action=/cgi-bin/post-query method=POST>
Your Name: <input type=text name=name><BR><BR>
<button type="submit"><IMG SRC="pic/1.gif"><BR>SUBMIT</button>
<button type="reset"><IMG SRC="pic/1.gif"><BR>RESET</button>
</form>
Your Name:



pic Field Style

<field align=#> ... </field>
*=left, center, right

<legend align=#> ... </legend>
*=top, bottom, left, center, right

<form action=/cgi-bin/post-query method=POST>
<fieldset>
   <legend>Personal Data</legend>
        Your Name: <input type=text name=name><br>
        E-Mail: <input type=text name=e-mail>
</fieldset>
<fieldset>
   <legend align=center>Payment Info</legend>
        Credit Card:<input type=radio name=card>VISA
                    <input type=radio name=card>MASTER<br>
        Expiration: <input type=text name=exp>
</fieldset>   <br>
   <input type=submit><input type=reset>
</form>
Personal Data Your Name:
E-Mail:
Payment Info Credit Card: VISA MASTER
Expiration:



pic Label

<label for=#>
<input id=#>

<-- Click this text, reach inputbox faster.





Back to Top

Back to HTML Index Page

Page | Font | Text | Image | Form | Table | Frame | Objects | XML

Please e-mail me at:d4188@hotmail.com
<script language="JavaScript">document.write("<no" + "script>")</script> </HTML>