Example 12 - Instructions using tabindex

Example Start

Name can only contain letters.
E-mail will only be used to send you copy of your commment and allow us send you a response.
Please comment on the services and resources you found on this web site.

Example End

Example Description

Example Features

Related Rules

HTML Source Code



<div class="inst" tabindex="0">
  Name can only contain letters.    
</div>

<div class="text">
    <label for="name">Name </label>
    <input type="text" size="30" name="name" id="name" />
</div>

<div class="inst" tabindex="0">
  E-mail will only be used to send you copy of your commment and allow us send you a response.  
</div>

<div class="text">
    <label for="email">E-mail </label>
    <input type="text" size="25" name="email" id="email" />
</div>

<div class="inst" tabindex="0">
   Please comment on the services and resources you found on this web site.
</div>

<div class="text">
    <label for="comment">Comment </label>
    <textarea rows="5" cols="50" name="commnet" id="comment" ></textarea>
</div>

CSS Code



div.inst {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  margin-top: .75em;
  margin-bottom: .25em;
  font-size: 80%;
  font-style: italic;
}


div.text label {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  display: block;
  font-size: 100%;
  font-weight: bold;
}

div.text input,
div.text textarea {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  margin-bottom: .5em;
  font-size: 100%;
}

div.text img {
  margin: 0;
  padding: 0;
  padding-left: .25em;
}

input:active,
input:focus,
input:hover,
textarea:active,
textarea:focus,
textarea:hover {
  background-color: lightyellow;
  border-color: yellow;
}