Example 11: Invalid text boxes using hidden text

<div class="inst">
    <img src="images/required.png" alt="required imemail"/> Indicates required fields.
</div>

<div class="text">
    <label for="name">Name <span class="hidden">Invalid: Names cannot contain numbers or punctuation characters</span></label>
    <div><input class="invalid" type="text" size="30" name="name" id="name" value="Mike4"/><img src="images/required-invalid.png" alt=""/></div>
    <div class="invalid"><strong>Invalid:</strong> Names cannot contain numbers or punctuation characters</div>
</div>

<div class="text">
    <label for="email">E-mail <span class="hidden">Invalid: you must supply a valid e-mail address for you to track any responses to the comment</span></label>
    <div><input class="invalid" type="text" size="25" name="email" id="email" value="joe.smith#nowhere.net"/><img src="images/required-invalid.png" alt=""/></div>
    <div class="invalid"><strong>Invalid:</strong>You must supply a valid e-mail address for you to track any responses to the comment</div>
</div>

<div class="text">
    <label for="comment">Comment <span class="hidden">Invalid: You must include a comment</span></label>
    <textarea class="invalid" rows="5" cols="50" id="comment" name="comment"></textarea>
    <div class="invalid"><strong>Invalid:</strong> You must include a comment</div>
</div>

  <style type="text/css">

span.hidden  {
  position: absolute;
  top: -20em;
  left: -300em;
}

.invalid {
  color: red;
}

input.invalid,
textarea.invalid {
  color: black;
  background-color: #FFA0A0;
}


div.inst,
div.invalid {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  margin-bottom: 1em;
}

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

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;
}

  </style>