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





+ 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




+ 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




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



+ 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>
Your Name:



+ 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>
Personal Data Your Name:
E-Mail:
Payment Info Credit Card: VISA MASTER
Expiration:



+ 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>
<-- 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>
First Name:
Last Name:
Comment:


+ 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>
First Name:
Last Name:



HTML Design Guide | Style Sheet Guide
Document | Page | Font | Text | Image | Form | Table | Frame | Objects | XML
HTML TAG LIST | PDF Edition


BACK TO NCD HOME
Network Communication Design - http://www.ncdesign.org/
Copyright & Publishing 1994-2008 Network Communication Design