Forms

Form Element

Element: <form>
Start tag: required
End tag: required
Attributes: action, method, enctype,
  accept-charset. id, class, lang,
  dir, style, title, target, onsubmit,
  onreset, onclick, ondblclick,
  onmousedown, onmouseup, onmouseover,
  onmousemove, onmouseout, onkeypress,
  onkeydown, onkeyup, more attribute info here

The <form> element is the container for all form elements. Attributes are action="", method="", enctype="", accept-charset="", accept="". action="" specifies the URL of the script that the form should be sent to. method="" values are get and post. enctype="" specifies the content type of the form. accept-charset="" specifies the character encodes for the form. accept="" specifies content types to accept.

Input Types

Element: <input>
Start tag: required
End tag: forbidden
Attributes: type, name, value,
  checked, disabled, readonly,
  size, maxlength, src, alt,
  usemap, accept. tabindex,
  accesskey, onfocus, onblur,
  onselect, onchange, more attribute info here

The <input> element is use for input areas in a form. Attributes of <input> are type="", name="", value="", size="", maxlength="", checked, src="", alt="", align="", readonly, disabled, tabindex="", accesskey="".

Values of type="" are text, password, checkbox, radio, submit, reset, file, hidden, image, and button. text creates a single line input box. password is like text but the value of the box is rendered hidden (i.e. bullets, asterisks). checkbox creates a box that when used with others of the same name can have multiple selections. radio creates a box that when used with others of the same name can only have one selected. submit is used to submit the form contents to a script. reset resets the entire form to it's initial value. file is for allowing a way to upload files. hidden fields will not be rendered but will be passed on to the script when submitted. image is for specifying an image as a submit button (alt="" and src="" are used to specify the alternate text and source of the image, respectively). button creates a push button.

name="" is used to assign a name to the input area. value="" sets the initial value of the area. size="" sets the horizontal size of the area. maxlength="" sets the maximum size of the characters allowed in the area. checked initially sets either a radio or checkbox area as checked. src="" supplies the source of an image. alt="" sets the alternate text of an image. align="" values are left, center, and right. readonly sets the value of the area to read-only. disabled disables the use of an area. tabindex="" sets the order in which the area should receive focus. accesskey="" sets a key to access the area.

<form action=""> <p><input type="text" value="some text" />
<input type="password" value="password" />
<input type="checkbox" name="one" />
<input type="checkbox" name="one" />
<input type="radio" name="two" />
<input type="radio" name="two" />
<input type="submit" value="Send it!" />
<input type="reset" value="Clear it all!" />
<input type="file" />
<input type="hidden" name="foo" value="bar" />
<input type="image" src="" alt="[it's an image]" />
<input type="button" value="This is a button" /></p>
</form>










(it's hidden)

Text Areas

Element: <textarea>
Start tag: required
End tag: required
Attributes: name, rows, cols,
  disabled, readonly. accesskey,
  onfocus, onblur, onselect,
  onchange, more attribute info here

The <textarea> element is used for large textual areas. Attributes are name="", rows="", cols="", readonly, disabled, tabindex="", and accesskey="".

name="" is used to assign a name to the textarea. rows="" sets the number of rows the area occupies. cols="" sets the number of columns the area occupies. readonly sets the value of the area to read-only. disabled disables the use of the area. tabindex="" sets the order in which the area should receive focus. accesskey="" sets a key to access the area.

<form action="">
<p><textarea cols="30" rows="3">
This is a textarea
</textarea></p>
</form>

Drop Down Select Menu

Element: <select>
Start tag: required
End tag: required
Attributes: name, size, multiple,
  disabled. tabindex, onfocus,
  onblur, onchange, more attribute info here

The <select> element is used to create a menu that will drop down when clicked on. Attributes are name="", size="", multiple, disabled, and tabindex="".

name="" is used to assign a name to the menu. multiple lets the user make multiple selections. size="" sets the vertical size of the area. disabled disables the use of the menu. tabindex="" sets the order in which the area should receive focus.

The <optgroup> element is used to create an option group. Attributes are label="". label="" specifies a label for the group.

The <optgroup> element is used to create an option. Attributes are selected, value="", and label="". value="" sets the value of the option. label="" specifies a shorter label for the option.

<form action="">
<p><select>
<optgroup label="Modems">
<option>Modems 101</option>
<option>Modems 102</option>
<option>Modems 103</option>
</optgroup>
<optgroup label="Keyboards">
<option>Keyboards 101</option>
<option>Keyboards 102</option>
<option>Keyboards 103</option>
</optgroup>
</select></p>
</form>

Button

Element: <button>
Start tag: required
End tag: required
Attributes: name, value, type,
  disabled. disabled, accesskey,
  usemap, onfocus, onblur, onclick,
  ondblclick, onmousedown, onmouseup,
  onmouseover, onmousemove,
  onmouseout, onkeypress, onkeydown,
  onkeyup, more attribute info here

The <button> element is used to make objects within your page either a submit, reset, or button. Attributes are name="", value="", and type="". name="" specifies the name of the element. value="" specifies the initial value of the form. type="" values are submit, reset, and button.

<form action="">
<p><button type="submit">
This would submit the form.
</button></p>
</form>

Label

Element: <label>
Start tag: required
End tag: required
Attributes: for. id, class, lang,
  title, style, accesskey, tabindex,
  onfocus, onblur, onclick, ondblclick,
  onmousedown, onmouseup, onmouseover,
  onmousemove, onmouseout, onkeypress,
  onkeydown, onkeyup, more attribute info here

The <label> element is used to label text as being associated with a form element. Attributes are for="" which must correspond with the id="" of a form element.

<form action="">
<p><label for="thatarea">
This is labeled 'thatarea'.
</label>

<input id="thatarea" size="25" type="text" value="this has an id of 'thatarea'" /></p>
</form>


<form action="">
<p>Your first name:<br>
<input size="30" type="text" name="firstname"><br>
<br>
<p>Your dog's name:<br>
<input size="30" type="password" name="dogname"><br>
<br>
What do you want to learn today?<br>
<input type="checkbox" name="learn" value="html">HTML<br>
<input type="checkbox" name="learn" value="JS">JavaScript<br>
<br>
Which of the following are you:<br>
<input type="radio" name="exp" value="new">New to authoring<br>
<input type="radio" name="exp" value="vet">Veteren<br>
<br>
How long have you been on the internet:<br>
<select name="internet">
<option value="less then a year">less then a year
<option value="more then a year">more then a year
</select>
<br>
Your life story:<br>
<textarea name="life_story" cols="30" rows="8">
put it here
</textarea>
<br>
<input type="button" name="itshere" value="This is just here"><br>
<br>
<input type="submit" value="Send it"><input type="reset" value="Clear it"></p>
</form>

Your first name:


Your dog's name:


What do you want to learn today?
HTML
JavaScript

Which of the following are you:
New to authoring
Veteren

How long have you been on the internet:
Your life story: