Web Design Tutorials and Lessons: Other Form Elements

Stay at Home and Learn

Web Design Tutorials

Computer Tutorials List

Other HTML Form Elements

In this final section on forms, you'll see how to add password boxes, command buttons, image buttons, and hidden form elements. First up, password boxes.

Password Boxes

You can add a password box to you form. This is identical to a text box in its appearance. The only difference is that when you type in the box the characters are replaced by asterisks ( * ). It's important to remember that although password box hides the text from prying eyes, the data is not encrypted in any way. If you use METHOD = Get instead of Post, the password would show up in the address line of the browser.

The code for a password box is this:

The MAXLEGTH attribute is the maximum number of characters that can be entered into the password text box.

To add a Password text box to your Form with the Editor, do this:

From the menu bar, click on Add
From the drop down menu, click Add a Form Element
From the sub menu, click Password Box
The password box code is inserted onto your page

The NAME and MAXLENGTH attributes will be blank. Insert your own values for these two attributes, or delete them if you prefer. Only the TYPE attribute is necessary.

Command Button

A command button looks just like the Submit and Reset buttons that you've already added to a form. The difference is that the Submit and Reset buttons have code built-in to them. This code will do the work of submitting the form or resetting the values to their defaults. A command button element has no code built-in to it. You write the code yourself for these buttons. We'll be meeting them in the Scripting section of this book. For now, let's see what the HTML code is for inserting one onto your form. It's this:

Note the TYPE is "Button". The NAME is used as a reference to distinguish it from any other buttons on your form. The VALUE attribute is the text that appears on the button itself. This can be anything you like.

To add a Command Button to your Form with the HTML Editor, do this:

From the menu bar, click on Add
From the drop down menu, click Add a Form Element
From the sub menu, click Command Button
The Command Button code is inserted onto your page

HTML Image Buttons

Command buttons look rather dull and grey. You can replace the grey command buttons with an image of your own. Then when the image is clicked on, any code underneath your button will get executed in the normal manner. The code for an Image Button is this:

Note that TYPE is now not "Button" but "Image". If you're using an image as a button, the browser needs to know the source. In other words, the place where the image is stored. So you need the SRC attribute. Something like:

SRC = "MyButtonImage.jpg"

Hidden Elements

You can have something called an Hidden Element on your forms. Hidden elements are for your benefit, not your users. You can store information in a hidden element, and then pass the information to a second web page or form.

The Code for a hidden element is this:

As the name of the element implies, any data stored in the VALUE attribute does not show up on the page. However, if a viewer clicks View > Source in Internet Explorer, your code can be seen, and that includes any values you've hard-coded into the Value attribute of the Hidden element. So you wouldn't use the Hidden element to store sensitive data.

To add a Hidden Element using your Editor, do this:

From the menu bar, click on Add
From the drop down menu, click Add a Form Element
From the sub menu, click Hidden Form Element
The Hidden Element code is inserted onto your page

And that wraps up out lessons on HTML Forms. If you want to know how to validate the information your users entered into your forms, you need to study the JavaScript section.

The final section of the HTML course, though, is HTML frame documents.

<-- Back One Page Move on to the Next Section-->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses