HTML Forms

All form elements are inline by default

When a form is submitted, the elements are sent as key-value pairs based on the name and value attributes
For a textarea, the value is the content of the element
For a multiple-selection list, the value is typically received on the server as an array of strings

Form Elements

Button

<button type="submit" value="alpha">Displayed Text</button>
<button type="reset" value="beta">Displayed Text</button>
<button type="button" value="gamma" onclick="btnAction();">Displayed Text</button>
 
<input type="button" value="Displayed Text" onclick="btnAction();" />

For non-submit and -reset buttons, the input tag is better supported

Check box

<input type="checkbox" name="myName" value="alpha" [checked="checked"] />

Does not display any text

File selection

<input type="file" name="myName" [accept="text/html"] />

Hidden field

<input type="hidden" name="myName" value="Hidden Content" />

Label

<label for="myId">Content</label>
<... id="myId">...</...>

<label>
    Content
    <... id="myId">...</...>
</label>

Associates a label with a form element
Clicking on the label selects the form element
Useful for displaying text for check boxes and radio buttons, and for describing elements

List box

<select size="2" name="myName" [multiple="multiple"]>
    <option value="alpha" [selected="selected"]>Choice 1</option>
    <option value="beta">Choice 2</option>
    <option value="gamma" [disabled="disabled"]>Choice 3</option>
</select>

Combo box
If a value attribute is not specified, the submitted value is the content of the selected option

Radio button

<input type="radio" name="myName" value="alpha" [checked="checked"] />
<input type="radio" name="myName" value="beta" />

Does not display any text

Select box

<select size="1" name="myName">
    <option value="alpha" [selected="selected"]>Choice 1</option>
    <option value="beta">Choice 2</option>
    <option value="gamma" [disabled="disabled"]>Choice 3</option>
</select>

Pulldown list, dropdown list
If a value attribute is not specified, the submitted value is the content of the selected option
The multiple attribute cannot be used for a select box

Text box

<input type="[text,password]" name="myName" value="Content" size="n" maxlength="m" />

Textarea

<textarea class="textarea" name="myName" cols="m" rows="n">Content</textarea>

Sample code

<!-- Form -->
<form action="http://mydomain.com/mypage.html" method="post">

<!-- Text box -->
<label for="myTextBox">Enter user name:</label>
<input type="text" id="myTextBox" name="myTextBox" value="Content" size="20" maxlength="30" /><br />

<!-- Password -->
<label for="myPassword">Enter password:</label>
<input type="password" id="myPassword" name="myPassword" value="Content" size="8" maxlength="8" /><br /><br />

<!-- Textarea -->
<textarea class="textarea" name="myTextArea" cols="30" rows="4">Content</textarea><br /><br />

<!-- Check box -->
<input type="checkbox" id="checkboxAlpha" name="checkBox" value="alpha" checked="checked" />
<label for="checkboxAlpha">Choice 1</label><br /><br />

<!-- Radio buttons -->
<input type="radio" id="radioAlpha" name="myRadioButton" value="alpha" checked="checked" />
<label for="radioAlpha">Choice 1</label><br />
<input type="radio" id="radioBeta" name="myRadioButton" value="beta" />
<label for="radioBeta">Choice 2</label><br /><br />

<!-- Select box -->
<select size="1" name="mySelectBox">
    <option value="alpha" selected="selected">Choice 1</option>
    <option value="beta">Choice 2</option>
    <option value="gamma" disabled="disabled">Choice 3</option>
</select><br /><br />

<!-- List box / combo box -->
<select size="3" name="myListBox" multiple="multiple">
    <option value="alpha" selected="selected">Choice 1</option>
    <option value="beta">Choice 2</option>
    <option value="gamma" disabled="disabled">Choice 3</option>
</select><br /><br />

<!-- File selection -->
<input type="file" name="myName" /><br /><br />

<!-- Hidden field -->
<input type="hidden" name="myHiddenField" value="Hidden Content" /><br />

<!-- Submit button -->
<button type="submit" value="alpha">Submit</button><br />

<!-- Reset button -->
<button type="reset" value="beta">Reset</button><br />

<!-- Action buttons -->
<input type="button" value="Perform Action" onclick="btnAction();" /><br />
<button type="button" value="gamma" onclick="btnAction();">Perform Action</button><br />

</form>


<script type="text/javascript">
function btnAction() {
    alert("This is the button action");
}
</script>

Tags

button

<button> ... </button>

A push button
Attributes: name, value, type, disabled, tabindex

Type: submit (default), reset, button

form

<form action="[url]" method="[get,post]" [target="..."]>...</form>

An input form
Attributes: action, method, enctype, target

Action: destination url

Method: post, get (default; append parameters to the url)

Enctype: application/x-www-form-urlencoded (default), text/plain (for mailto:url)

By default, the url for a form action will open in the current window or frame
To open the action url in a different window or frame, use the target attribute

target (the name of the frame or iframe to open the action url in, or one of the following)
    _blank     New window
    _self      Current window
    _parent    Parent frame
    _top       Full browser window

input

<input> ... </input>

An input field
Attributes: type, name, value, checked, size, maxlength, align, disabled, readonly, tabindex

Type: text, password (*), checkbox, radio, submit (button), reset (button), file (user selects a file), hidden, image (submit, with a graphic instead of a button)

Align: top, middle, bottom, left, right

Checked: no value; for radio buttons and check boxes

Readonly: for text and password

There can be more than one submit button.

Attributes for type="image": src (image file), height, width, border, alt (text)

Image also sends: NAME.x=n&NAME.y=n; the coordinates of the selected region.

label

<label for="relatedId">Display Text</label>

optgroup

<optgroup> ... </optgroup>

Attributes: disabled

option

<option> ... </option>

A selection list selection (within a select)
Attributes: value, selected (no value), disabled

By default, the first non-disabled option in a select will be displayed
A disabled option appears greyed-out

select

<select> ... </select>

A selection list
Attributes: name, multiple (no value), size, disabled, tabindex

If the size is one, it's a drop-down list; otherwise, it's a scrollable list.

The exact way for the user to select multiple items is platform-specific.

textarea

<textarea> ... </textarea>

A text input window
Attributes: name, rows, cols, disabled, readonly, tabindex

Misc

For all practical purposes, can't nest a form within another form. The fields wind up getting merged together into the outer form, leaving the inner form with none.
When a link is opened in a new tab in Firefox (via right-clicking), the onclick event is not fired. If a form is dynamically submitted or URL parameters are dynamically added in the onclick event, none of the form fields or URL parameters will arrive at the new page

Common attributes

selected="selected" (select box, list box)
checked="checked" (check box, radio box)
disabled="disabled" (disable the element)
readonly="readonly" (prevent changes)

Common events

onfocus
onblur
onselect (text box, textarea)
onchange

Forestpath.org

the personal website of M. Coughlin

HTML Forms

Form Elements

Button

Check box

File selection

Hidden field

Label

List box

Radio button

Select box

Text box

Textarea

Sample code

Tags

button

form

input

label

optgroup

option

select

textarea

Misc

Common attributes

Common events