Cool FORM tips - Real's Javascript How-to

Cool FORM tipsTag(s): Form HTML/CSS

Here some little known HTML tags to enhance the look and feel of HTML FORM.

The first one is the tag LABEL. This tag is used to attach a label to a component.

If you use something like this :

<FORM>
Name <INPUT TYPE="text" ID="fname" VALUE="">
</FORM>

The result is

You need to click in the field to give focus and be able to type something.

If you attach a LABEL to a field then you can click the label (or the field) and then the attached component will gain the focus.

<FORM>
  <LABEL FOR="tf1">Name </LABEL>
  <INPUT TYPE="text" ID="tf1" VALUE="">
  <BR>
  <LABEL FOR="tf2">Email</LABEL>
  <INPUT TYPE="text" ID="tf2" VALUE=""><br><BR>
  
  Choose <LABEL FOR="rb1">Yes</LABEL> or <LABEL FOR="rb2">No</LABEL> 
  <INPUT ID="rb1" NAME="nlrb" TYPE="radio" VALUE="yes"> 
  <LABEL FOR="rb1"> Yes</LABEL> 
  <INPUT ID="rb2" NAME="nlrb" TYPE="radio" VALUE="no"> 
  <LABEL FOR="rb2">No</LABEL>
</FORM>

You can try it here :

The FIELDSET defines a group of form elements as being logically related. The browser draws a box around the set of fields to indicate that they are related.

<FORM>
<FIELDSET>
Name <INPUT TYPE="text" ID="name" VALUE=""> 
Email<INPUT TYPE="text" ID="email" VALUE="">
</FIELDSET>
</FORM>

Here how it looks :

It is possible to put a title with the tag LEGEND.

<FORM>
<FIELDSET  STYLE="width : 45%; ">
<LEGEND>Contact us</LEGEND>
<label for="name2">Name </label>Name <INPUT TYPE="text" ID="name2" VALUE=""> <br>
<label for="email2">Email</label>Email<INPUT TYPE="text" ID="email2" VALUE="">
</FIELDSET>
</FORM>

Here how it looks (with STYLE to limit the width):

And finally, you can make the SUBMIT button a little less boring...

<STYLE TYPE="text/css">
input.howto {
    background-color: #FFFFCC; 
    font-weight: bold; 
    font-size: 12px; 
    color: black;}
</STYLE>

<FORM>
<FIELDSET  STYLE="width : 45%; ">
<LEGEND><B>Type your query</B></LEGEND>
<LABEL FOR="query">Name </LABEL> <INPUT TYPE="text" ID="query" VALUE=""> 
<INPUT  CLASS="howto" TYPE="submit" VALUE="Submit">
</FIELDSET>
</FORM>

Here how it looks :