Text boxes, Submit and Reset Buttons

The INPUT Tag and Text Boxes

For most form elements, the word INPUT is used to set up the element. Next, you type a space followed by the word TYPE. This tells the browser what type of form elements to draw on your page. If you want a text box, the TYPE to use is "Text":

<INPUT TYPE = "Text">

(Notice that there is no end tag for INPUT.)
Next, you add the attributes you want. There are quite a lot of attributes for text boxes. The three most common ones are Size, Value, and Name. Size refers to how long the text box is in pixels rather than the number of characters it can contain. It's a good idea to limit how many text characters can fit into your text box, and for this the Maxlength attribute is used:

<INPUT TYPE = "Text" Size = 20 Value = "" Name = "text1" Maxlength="15">

The Value attribute means the text that will be typed in your text box. You can set some default text, if you like:

<INPUT TYPE = "Text" Size = 20 Value = "Default Text Here" Name = "text1">

Whatever is between the two quote marks of VALUE is what you get back when the form is sent somewhere.
A Name attribute should be added so that you can refer to it in scripts. It distinguishes it from any other text box you may have on your form.
Some other text box attributes are:

Accesskey
Height
TabIndex
Width

Height and Width are self-explanatory. Accesskey refers to a keyboard shortcut you can add, while TabIndex is a number value and refers to where the cursor will end up when you press the Tab key on your keyboard. As an example, take a look at the following three text boxes:

<INPUT TYPE = "Text" TabIndex="2">
<INPUT TYPE = "Text" TabIndex="3">
<INPUT TYPE = "Text" TabIndex="1">

The third of the three text boxes above will be activated first when the tab key is pressed. Press the tab key again and the cursor will appear in the top text box, followed by the middle one. You can really annoy your visitors if you get the tab index wrong!

The Submit Button

If you want your form to be sent somewhere, a Submit button is needed (though you can write code for your own submit button). When the Submit button is clicked, the browser will check the ACTION attribute of the FORM tag to see where you want the data sent. It then checks the METHOD attribute to see what method you want to use, Post or Get. The browser will then try to send the form's data for you.
The code for a Submit button is this:

<INPUT TYPE = "Submit" Value = "Submit">

This time, the TYPE is set to "Submit". The VALUE attribute is the text that will appear on the button itself. The width of the button is determined by the width of the text for the VALUE attribute. If you wanted a really wide button, you can use this old trick:

Value = " Submit ">

Here, spaces are added to the left and right of the text. The browser will see the spaces as text and adapt the width accordingly.

The Reset Button

The Reset button returns the form to the state it was originally in when it was loaded. Any default values you added will be retained. The code for a rest button is this:

<INPUT TYPE = "Reset" Value = "Clear">

Note the TYPE is now "Reset". The value attribute works in the same way that the Submit button does - it's the text that will appear on the button.

To test out the text box element and the buttons, add the following between the BODY tags of your HTML code:
<FORM>
<INPUT TYPE="Text">
<P>
<INPUT TYPE="Submit" Value="Submit">
</FORM>
The form is just a text box and a button. Notice that the two are separated by a P tag, otherwise they'd be side-by-side.
Save your work and view the results in your browser. You should see this:

Type something into your text box and click the button. What you'll find is that the text will disappear. If you had added Method and Action attributes to the FORM tag then the text box data would be sent to a location of your choice (email address, script, etc).
Now amend your INPUT TYPE="Text" line and add SIZE and VALUE attributes:

<INPUT TYPE="Text" Size="25" Value="Enter your first name">

When you save and reload, the browser will look like this:

The text box will be longer and your default text will display.

Styling Form Buttons

Buttons, like any form element can have a CSS style applied. In the code below, we've applied various styles to our form button:

#Button1 {

Height: 30px;
Width: 180px;
background-color: #820404;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFFFFF;

}

#Button1:hover {

background-color: #CCCCCC;

}

Add an ID attribute to your button:

<INPUT TYPE="Submit" Value="Submit" ID="Button1">

Then try some CSS styles in your own code to see how they work. Try the padding and border properties to see what happens. The border-color property is also worth trying out.
Before implementing any button styles, though, it's worth checking out the results in more than one browser, especially when it comes to borders.
You can actually use images as buttons, if you like. But they need Javascript switched on in the browser to make them work. The TYPE to use is IMAGE:

<INPUT TYPE="image" SRC="image_name.gif" ALT="alt text" onClick="submit_function()">

If you're selling things on your site then image buttons may not be a good idea as some of your users won't see them.

In the next lesson, you'll see how to use CSS to format your text boxes.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 8 (HTML forms)