9.1 Input Text

Setting the value of the form attribute type to text means that visitors can enter alpha-numeric text into a form. For example here is a simple form requesting a name:

<form name="people">
Forename:
<input type="text" name="firstname">
<br />
Surname:
<input type="text" name="surname">
</form>

Here we have also used the attribute name to assign useful variables to the reqested names. This can be passed for example to an email address upon processing of the form. This example would look like this in a browser (try entering your name - it won't go anywhere):

Forename:
Surname:

The width of the text field is 20 characters by default (in most browsers). This can be altered using the size attribute like below:

<form name="people">
Forename:
<input type="text" name="firstname" size="40">
<br />
Surname:
<input type="text" name="surname" size="40">
</form>

This would look like this in a browser:

Forename:
Surname:

You may have noticed the input boxes are not quite lined up. Form tags used to be placed within tables to control layout but this is best avoided. This misalignment can be fixed by adding some styling using the style attribute and wrapping the inputs in <p> tags like this (and we can also remove the <br /> tag):

<form name="people">
<p style="width:350px;text-align:right;">
Forename:
<input type="text" name="firstname" size="40">
</p>
<p style="width:350px;text-align:right;">
Surname:
<input type="text" name="surname" size="40">
</p>
</form>

This would look like this in a browser:

Forename:

Surname:

Like with most HTML elements and styling, this is something that is better achieved using CSS and will be discussed in the CSS Tutorial later.