<class home>  <forms>   <back   next>

Organizing Forms: Legends and Tabs

You can organize your form information to help users to fill it out in a certain order, you do this with the <legend> and <fieldset> tags.


Legends

ex.
Personal Information

name:

email:

Comments

Please add your comments below:


the code that makes the above:

<form name="form2" method="post" action="">
<fieldset><legend>Personal Information</legend>
<p>name:
<input type="text" name="name">
</p>
<p>email:
<input type="text" name="email">
</p>
</fieldset>
<fieldset><legend align="right">
Comments</legend>
<p>Please add your comments below:<br />
<textarea name="comments" rows="10"></textarea>
</p>
</fieldset>

</form>


Tab Order

You can also set up a tab order for "tabbing" through forms with the:
tabindex="n"
attribute.

ex.
-it can be added to anchor tags, <a href="page2.html" tabindex="3">About Us</a>
-it can also be added to form elements:
<form name="form1" method="post" action="">
<input type="text" name="name" tabindex="1" />
<input type="password" name="funny" tabindex="2" size="8" />
</form>

ex.

about Us

name:

password:

code for the above:

<form name="form1" method="post" action="">
<p><a href="http://www.larabank.com" tabindex="3">about Us</a><br>
<br>
name:
<input type="text" name="name" tabindex="1">
</p>
<p>password:
<input type="password" name="password" maxlength="8" size="9" tabindex="2">
</p>
</form>