Example 9 - Required text box using image

Example Start

required Indicates required fields.

Example End

Example Description

Example Features

Related Rules

HTML Source Code


<div class="inst">
    <img src="http://webaccessibility.cita.illinois.edu/media/examples/images/asterisk-blue.png" alt="required"/> Indicates required fields.
</div>

<div class="text">
    <label for="name">Name <img src="http://webaccessibility.cita.illinois.edu/media/examples/images/asterisk-blue.png" alt="required"/></label>
    <input type="text" size="30" name="name" id="name"/>
</div>

<div class="text">
    <label for="email">E-mail <img src="http://webaccessibility.cita.illinois.edu/media/examples/images/asterisk-blue.png" alt="required"/></label>
    <input type="text" size="25" name="email" id="email"/>
</div>


<div class="text">
    <label for="comment">Comment <img src="http://webaccessibility.cita.illinois.edu/media/examples/images/asterisk-blue.png" alt="required"/></label>
    <textarea rows="5" cols="50" id="comment" name="comment"></textarea>
</div>

CSS Code


div.inst {
  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;
  display: block;
  font-size: 100%;
}

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