Form Objects in HTML 4

List of objects recognized by all browsers, 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

It is created by the HTML form tag:

<form name="myform" id="myform" action="page.html"> 
 ... items ... 
 </ 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.

Text field

For user enters text.

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 box

Text field on several lines.

demo

  <textarea name="x">demo</textarea>

The difference with the previous object is that the initial content is placed between the starting and ending tags, not in an attribute.

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.

Local Explorer

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

<input type="file" value="">

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

Menu or list

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.

<select name="select" size="3"> 
      <option selected> one </ option> 
      <option> two </ option> 
      <option> three </ option> 
 </ select>

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.

Checkbox

<input type="checkbox" value="false" 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 buttons

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="identifier" value="true" checked> Yes 
 <input type="radio" name="identifier" value="false"> No

So that the buttons are alternative, we must give the same name or id for all.

Image field

<input type="image" src="xul.png">

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.

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.

Submit button

<input type="submit" value="Submit">

It terminates the form.

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.

Demonstration

See the demo of all form objects.

Extensions

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

Examples: