List of all form objects in HTML

List of objects recognized by all browsers, with the source code, and how to use them.
We will also see how to transmit the form data to different pages or scripts on the server.

The form objecty itself is created by the HTML form tag as detailed in the Introduction to forms:

<form name="myform" id="myform" action="page.html" onSubmit="return fun()">
 ... objects...
</form>

The name or id attribute can access by script to its content. It is best to use both attributes with the same identifier, for the sake of compatibility.

The action attribute indicates the page to which send the form data. If this attribute is empty, the page that contains the form that will be charged the data as parameters.

The onSubmit attribute associates a test function on the form. If the function return false, the form data are not sent, we stay on the same page.

Object
Appearence
 Code
Button 
<input type="button" value="Send" onclick="myfunction()">

If it is a simple button and not a submit button, you need to associate JavaScript code with the onclick event to execute something.
You can customize it by associating a CSS class.
Text field

The corresponding code:

<input type="text" name="mytext" value="default text">

As shown, the field may be pre-filled with the value attribute.

Other attributes are:

  • type = "password" for a field to the hidden content.
  • size = width of the text field.
  • maxlength = maximum number of characters.
Text area 
<textarea name="textarea">content</textarea>

Text field on several lines. The difference with the previous object is that the initial content is placed between the starting and ending tags, not in an attribute.
Password 
<input type="password" name="pass" value="12345">
Hidden field   
<input type="hidden" value="code">

Allows to add data to values sent by the form, that are defined by a script rather than entered by the user.

Checkbox 
<input type="checkbox" name="cb1" value="true" checked>
  • The checked attribute allows you to check the box initially.

An article is dedicated to the study of the use of check boxes.
Radio button 

<input type="radio" name="radiox" value="radio1">
Radio group 

<label>Choix 1
<input type="radio" name="myradio" value="radio1">
</label><br>
<label>Choix 2
<input type="radio" name="myradio" value="radio2">
</label>

A radio button works as a checkbox. But a group of radio buttons allows an alternative: checking one unchecks others.

Yes No

<input type="radio" name="id1" value="true" checked> Yes 
<input type="radio" name="id1" value="false"> No

So that the buttons are alternative, we must give the same name or id for all.
Menu 
<select name="select">
  <option>cherry</option>
  <option>orange</option>
  <option>apple</option>
</select>

The select tag and option inner tags allow to build a menu that can take the form of a scrolling list or a static list.

  • The size attribute specifies the number of rows displayed. If this number is less than the number of options, a vertical scroll bar appears.
  • The multiple attribute allows simultaneous multiple selection.
  • The selected option attribute indicates which element is initially selected.
List 
<select name="select2" size="3">
  <option>cherry</option>
  <option>orange</option>
  <option>apple</option>
</select>
File 
<input type="file" name="file">

HTML has a file selection function with the file type "file" which combines a text field and a button.

The local filename is assigned to the value attribute of the object.
The content of the local file is added to form data and sent with them.

Image field 
<input type="image" name="image" src="xulfr.gif">
  • The src attribute indicates the URL of the image.

The difference with the img tag is that it is taken into account in the form data passed to another page.
Submit button 
<input type="submit" value="Submit">

It send the form data to a script or another page.

  • The value attribute defines the label to display on the button.

When you press this button, the file defined by the action attribute of the form is loaded in place of the current page and the form data are given as parameters.

If the action field is empty, the current page is reloaded with for parameters the form data.

It is possible to have multiple submit buttons and dynamically modify the content of action in JavaScript to load different pages. In this case, we associate an onclick event to the submit buttons.

Forms in HTML 4 may be extended with widgets in JavaScript or CSS designed by the webmaster. Examples:

See also

© 2009-2012 Xul.fr