HTML Encyclopaedia

The input tag

The HTML element

<input> text </input>

is used to obtain user input in a variety of ways. The particular type of input is indicated by the value of the type attribute. All the examples here are active and invoke the program expr1.c

The Radio Button
The browser will display a set of buttons, only one of which can be selected. This actually requires a separate <input> ... </input> tag pair for each button, however all the <input> tags will have the same value of the name attriubte with a distinctive value of the value attribute.
Here's an example
Choose a day of the week
Monday
Tuesday
Wednesday
Thursday
Friday

And here's the HTML
```
<form action="http://www.scit.wlv.ac.uk/~jphb/encyc/expr1.cgi" method=get>
Choose a day of the week<br>
<input type=radio checked name=day value=1>Monday<br>
<input type=radio name=day value=2>Tuesday<br>
<input type=radio name=day value=3>Wednesday<br>
<input type=radio name=day value=4>Thursday<br>
<input type=radio name=day value=5>Friday<br>
<input type=submit>
</form>
```
The checked attribute is used to indicate an initial default (selected) value.

The checkbox button

This looks similar to the radio button only a separate name is associated with each button and, as shown in the following example, any number can be selected. Values are only transmitted if the button is selected.

Here's an example

Here's the HTML

<form action="http://www.scit.wlv.ac.uk/~jphb/encyc/expr1.cgi" method=get>
Choose a day of the week<br>
<input type=checkbox checked name=Monday value=1>Monday<br>
<input type=checkbox name=Tuesday value=1>Tuesday<br>
<input type=checkbox name=Wednesday value=1>Wednesday<br>
<input type=checkbox name=Thursday value=1>Thursday<br>
<input type=checkbox name=Friday value=1>Friday<br>
<input type=submit><input type=reset>
</form>

Note that the checked attribute can be used in exactly the same way as for the radio button.

The text input box
This provides a box in which the user can enter arbitrary text which is transferred to the server. Initial text can be displayed by using the value attribute.
Here's an example

Enter the required day of the week

Here's the HTML
```
<form action="http://www.scit.wlv.ac.uk/~jphb/encyc/expr1.cgi" method=get>
Enter the required day of the week
<input type=text value=Monday name=day>
<input type=submit>
</form>
```
The user can, of course, type anything, it is the responsibility of the "back-end" program to vet the user input.
The size attribute can be used to specify the actual size of the box and the maxlength attribute can be used to speciify the maximum amount of text that the user can enter. The two need not be the same, the behaviour of the display if the user enters more text than is specified by size is determined by the browser software.
The password input box
This is almost identical to the text input box except that the browser will echo text as asterisks rather than directly.
Here's an example
Enter secret information

Of course, as will be clear from the "back-end" output from this example, the text entered by the user is transmitted in plain form to the "back-end". Although it is unlikely, but not impossible, that anybody will capture it in transit, it is worth remembering that many WWW servers, such as that on 'scitsc', log all transfer requests in a publically accessible log file. [It's called /usr/local/ftp/admin/hlog on 'scitsc' by the way.] All information transferred using the GET method will be included in this log, information transferred using the POST method will not be logged this way.
The submit button
This has already been used in most of the examples. When selected all the information associated with the enclosing <form> ... </form> tags is gathered up and transferred to the server.
The actual value associated with the value attribute will be used to label the button. "Submit" is the default label. Under Microsoft Internet Explorer 4 the default label is "Submit Query".
Here's the secret message submission with a differently labelled button.

Enter secret information

You can have as many submit buttons as you like within <form> ... </form> tags.
The reset box
This is generally similar to the submit box only its effect is to reset all the user input fields to their initial values.
The image input method
This provides a facility similar to that associated with imagemaps. The main difference is that the co-ordinate data is transferred via the CGI mechanism as two values associated with variables called name.x and name.y where name is the string associated with the value attribute.
Here's an example

Here's the HTML
```
<form action="http://www.scit.wlv.ac.uk/~jphb/encyc/expr1.cgi" method=get>
<input type=image src=map.gif name=coord>
</form>
```
The src and align attributes are here used in exactly the same way as they would be used with the <img> tag
It should be noted that this method implies submission, the act of clicking on the map causes data to be transferred. There is no need for a submit. An image could be used as the submission element in a form with several other input elements so allowing a map user to specify several aspects of the map usage prior to actually selecting a point on the map. This could not be done with ismap and usemap maps.
The file input method
This is a fairly recent addition to HTML. As the name suggests it provides a means by which the user can select a file on his local computer and send it to the server. It generally looks rather like a text input box.
Here's an example.

Enter file name

The attributes of the <form> tag must be set correctly for this to work properly. In particular
1. The method attribute must be set to post and the associated "back-end" must be suitably coded.
2. The enctype attribute must be set to multipart/form-data
In the example above a modified back-end is invoked that simply lists the lines of text that it read from the standard input. As well as the actual text of the file it also includes code numbers and a Mime-like content indication.
This method should not be confused with RFC 959 style File Transfer Protocol.
If you are using this method to allow remote users to upload files to your computer you need to consider the security and access rights implications carefully.
The hidden input
Input of this type is never displayed to the user and can be used as a "cookie" like mechanism to return state information to the server which may well use the information to infer what previous pages from the server had been viewed.
There's a hidden input in the following

Enter your query

And here's the HTML
```
<form action="http://www.scit.wlv.ac.uk/~jphb/encyc/expr1.cgi" method=get>
<input type=hidden name=cookie value=12378XX57>
Enter your query
<input type=text name=query>
<input type=submit value="Enter now">
</form>
```

See also <form>, <select>, <textarea> and CGI notes