Member Login:


HTML4.01 Form Input Control Types

Document Reference: TN200907001 - Rev: 4.8 - Last Update: 28-04-2016 16:45 GMT - Downloaded: 19-Mar-2024 07:39 GMT

HTML4.01 offers the following control types that can be created with an input element.

submit - Submit Button

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

When activated, a submit button sends the form content to the server. E.g.:

reset - reset Button

<input type="reset" value="Reset">

When activated, a reset button clears text entries and sets all controls to their initial values. E.g.:

image - Graphical Submit Button

<input type="image" value="Submit Form">

Allows the use of an image as a submit button. When activated, the form content will be send to the server. E.g.:

button - Push Button

<input type="button" value="Calculate" onClick="script()">

You may associate a client-side script to a push button. E.g.:

text - Text Field

<input type="text" id="idattribute" maxlength="9" name="user">

Creates a single line text field. E.g.:

The maxlength attribute prevents a visitor to enter too much text. However, a malicious visitor could remove this attribute.

password - Text Field

<input type="password" id="idattribute" maxlength="20" name="password">

Creates a single line text field. However the browser displays an alternative character (e.g. asterisks) when text is entered. E.g.:

You can use this control to hide a text entry from a casual observer. However, text entered is send to the server in clear text.

hidden - Hidden Control

<input type="hidden" value="data not rendered in browser" name="data">

Allows you to create a control that is not displayed in the browser. However, values set to this control are send with the form to the server. E.g.:

Note that the above control can not be seen as it is not rendered!

checkbox - Multiple Tick Box

Go on foot: <input type="checkbox" name="travel" value="foot" checked="checked"><br>
Go by bus: <input type="checkbox" name="travel" value="bus"><br>
Go by bicycle: <input type="checkbox" name="travel" value="bike"><br>
Go by car: <input type="checkbox" name="travel" value="car">

Checkboxes allows the visitor to select one or more options of a given number of choices. E.g.:

Go on foot:
Go by bus:
Go by bicycle:
Go by car:

Multiple checkboxes within the same form may share the same control name.

radio - Single Selection Box

<input type="radio" id="yes" name="survey" value="yes">I like tea<br>
<input type="radio" id="no" name="survey" value="no">I don't like tea<br>
<input type="radio" id="na" name="survey" value="na" checked="checked">Not selected

Radio buttons allows the visitor to select one option of a given number of choices. E.g.:

I like tea
I don't like tea
Not selected

You should always have one radio button with the checked attribute selected by default. This is to send a defined result to the server.

file - File Upload Field and File Browse Button

<input type="file" id="idattribute" name="file">

Allows the visitor to enter a file path and file name, or alternatively activate a browse button to open a file browse dialog window. E.g.:

Related Attributes

checked

The checked attribute allows a default selection for checkbox and radio type input controls.

disabled

The disabled attribute disables the input element. Values can not be entered/changed and the field value is not included when submitting the form.

maxlength

The maxlength attribute sets the maximum allowed charachters for an input element.

readonly

The readonly attribute sets the input element to read-only. Values can not be entered/changed, but the field value is included when submitting the form.

value

The value attribute sets the default value for an input element.

This website uses cookies to give you the best experience on our website, to personalise content and to analyse our website traffic. Some cookies may have been set already. To find out more about our use of cookies you can visit our Privacy Statement. By browsing this website, you agree to our use of cookies.

Hide this message