Share this page 

Cool FORM tipsTag(s): Form HTML/CSS


The visual output on this page is different than a regular HTML because of the framework used to build this site.
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

Name
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 :




Choose or

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 :

Name Email

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):

Contact us

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 :

Type your query