Hidden Fields
Hidden fields do not actually appear in the browser, however, are often used in forms to avoid having users input the same data multiple times or to include data that in relevant to the script in use, but is not relevant to the user. You can place hidden fields anywhere within your form tags. Keep in mind that although hidden fields are not displayed in the browser, the field can be viewed in the source code.
<input type="hidden" name="name value="value">
You may optionally use an image for submitting the form data instead of the built-in submit button. This is similar to how image maps works in that when the user clicks on the image, the current mouse coordinates are sent to the server.
<form method="post" action="mailto:kmarrs@beyondmarrs.com">
<h3><font color="#000099">Cast Your Vote!</font></h3>
<h4><font color="#009900">Do you love to write HTML code?</font></h4>
<input type="radio" name="vote" value="yes" checked> YES!<br>
<input type="radio" name="vote" value="no"> NO!<br><br>
<input type="image" src="vote.jpg" name="submit"></form>Cast Your Vote!
Do you love to write HTML code?
YES!
NO!
In addition, you can incorporate an image map into your form. Because all of the form data is sent to and processed by the script, it's a good idea to provide your users with instructions on how to use the image map. Keep in mind, that ideally you would want to have a custom script that can extract the x,y coordinates and return the appropriate data from the image. Without a means to identify which coordinates are relevant to which data, you will have a difficult time interpreting the data submitted. Alternatively, you can open the image in an image editor that displays the mouse coordinates and match those up with the coordinates returned by the server.
<h3>Please send me information on your training programs:</h3>
<form method="post" action="mailto:kmarrs@beyondmarrs.com">
Name: <input type="text" name="name" size="30"><br>
Email: <input type="text" name="email" size="30"><br><br>
I am interested in the following formats:<br>
<input type="checkbox" name="interest" value="online" checked>Online
<input type="checkbox" name="interest" value="classroom" checked> Classroom
<input type="checkbox" name="interest" value="selfstudy" checked> Self-study<br><br>
I would like to start training on:<br>
<input type="image" src="2002calendar.gif" name="submit"></form>Please send me information on your training programs:
Password boxes are simply text boxes that displays **** when the user types their password. There is no encryption or other security. It simply prevents an onlooker from being able to see the password as it is typed.
<input type="password" name="password" size="10">
Setting tab order
Setting the tab order for forms is the same as doing so for links. Keep in mind that the first time a user presses the tab key, it activates the address box. By default, the tab order follows the order in which elements appear on the page. You can assign tab order to text fields, password fields, checkboxes, radio buttons, text blocks, menus and buttons, as well as to links and client-side image maps.
<input type="text" name="firstname" tabindex="1">
Disabling form elements
You can disable an element with the disabled attribute. Keep in mind you will need a script that reenables the element based on user action you define. For example, you may want to disable the submit button to ensure the user has entered desired desired elsewhere in the form. A script would then reenable the form by testing that the user filled in required fields. Note that the element is grayed out when it is disabled.
<input type="submit" name="submit" disabled>
Making elements read-only
Designers often want to display certain data in a form that was already obtained, however, they do not want users to be able to change the data. You can make elements read-only by using the readonly attribute.
<textarea name="purchasehistory" cols="25" rows="4" readonly>