Creating Fill-Out Forms

HTML includes about a half-dozen elements for creating fill-out form elements. A form must begin with <FORM> and end with </FORM>:

Code:

  <form action="http://stein.cshl.org/cgi-bin/test-cgi.pl" method="POST">
     Choose a Motif:
        <input type="text"   name="motif" value="TATTAT"> <br>
        <input type="submit" name="search" value="Search!"> <br>  
  </form>

Result:

The <FORM> Tag

Attributes:

action (required)

CGI script to submit contents of form to.

method (required)

Submission method. Depends on CGI script. One of:

• POST
• GET

encoding

Required by certain scripts that accept file uploads. One of:

• application/x-www-form-urlencoded
• multipart/form-data

<INPUT> Elements

Used for text fields, buttons, checkboxes, radiobuttons. Attributes:

type

Type of the field. Options:

• submit
• radio
• checkbox
• text
• password
• hidden
• file

name

Name of the field.

value

Starting value of the field. Also used as label for buttons.

size

Length of text fields.

checked

Whether checkbox/radio button is checked.

Examples:

<input type="text" name="motif1" value="TATTAT"> <input type="checkbox" name="motif2" value="TATTAT"> <input type="radio" name="motif3" value="TATTAT" checked> <input type="radio" name="motif3" value="GGGGGG"> <input type="hidden" name="settings" value="PRIVACY MODE ON"> <input type="submit" name="search" value="SEARCH!">

<SELECT> Element

Used to create selection lists.

Attributes:

name

Name the field.

size

Number of options to show simultaneously.

multiple

Allow multiple options to be shown simultaneously.

<OPTION> Element

Contained within a >SELECT> element. Defines an option:

>option>I am an option</option>

Attributes:

selected

Whether option is selected by default.

value

Give the option a value different from the one displayed.

<select name="motif1">
  <option>GATTTAA</option>
  <option selected>GGGTTTTC</option>
  <option>TTTTTAAAAA</option>
  <option>TATATATAT</option>
  <option value="Tricky!">GGCCGGTTA</option>
</select>
	

<select name="motif2" size=6>
  <option>GATTTAA</option>
  <option selected>GGGTTTTC</option>
  <option>TTTTTAAAAA</option>
  <option>TATATATAT</option>
  <option>GGCCGGTTA</option>
</select>
	

<select name="motif3" size=6 multiple>
  <option>GATTTAA</option>
  <option selected>GGGTTTTC</option>
  <option>TTTTTAAAAA</option>
  <option>TATATATAT</option>
  <option>GGCCGGTTA</option>
</select>
	

<input type="submit" name="search" value="SEARCH!">

<TEXTAREA> Elements

Used to create big text elements.

Attributes:

name

name of field

rows

rows of text

cols

columns of text

wrap

type of word wrapping

<textarea name="sequence" rows=10 cols=30>
NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN
NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN	
</textarea>
	

<input type="submit" name="search" value="SEARCH!">

Previous

Contents

Next