FORM TAGS

NCD HTML Design Guide v6.0

Sponsor's ADs:

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

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>

<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>

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>

<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>

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>

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>

File Select

<input type=file>

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

Button

<input type=button value=#>

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

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>

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>

Old Input Style

<isindex prompt=*>

<isindex prompt="Enter Search Keyword: ">

This is a deprecated element and should be replaced by INPUT.

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="f.gif"><BR>SUBMIT</button>
<button type="reset"><IMG SRC="f.gif"><BR>RESET</button>
</form>

Field Style

<fieldset align=#> ... </fieldset>
*=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>

Label

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

<label for="inputdata">
   Please tell me your E-Mail Address!
</label>
<form action=/cgi-bin/post-query method=POST>
   <input type=text name=e-mail id="inputdata">
   <input type=submit><input type=reset>
</form>

Please tell me your E-Mail Address! <-- Click this text, reach inputbox faster.

Tabbing Navigation

<input tabindex="#"> #=number

<form action=/cgi-bin/post-query method=POST>
   First Name: <input type=text tabindex="1"><br>
   Last Name:  <input type=text tabindex="3"><br>
   Comment:    <input type=text tabindex="2"><br>
<input type=submit tabindex="4"><input type=reset>
</form>

Disabled Control

<input disabled="#">
#=true, false

<form action=/cgi-bin/post-query method=POST>
First Name: <input type=text><br>
Last Name:  <input type=text disabled="true"><br>
</form>

Network Communication Design - /
Copyright & Publishing 1994-2008 Network Communication Design