Example 4: Survey using select boxes

<form method="post" action="form-example-survey-label.php">

  <!--
      Using hidden LABELs to provide effective labels for form controls densely packed in layout tables.
   -->

  <h3>Survey Instructions</h3>

  <p>Please rate the following statements (1 is lowest, 9 is highest) by indicating:</p>

  <ul class="survey">
     <li><div>Minimum --</div> the number that represents the minimum level of service that you would find acceptable</li>
     <li><div>Desired --</div> the number that represents the level of service that you personally want</li>
     <li><div>Perceived --</div> the number that represents the level of service that you believe our library currently provides</li>
  </ul>

  <p>For each item, you must EITHER rate the item in all three columns OR identify the item as "N/A" (not applicable). Selecting "N/A" will override all other answers for that item.</p>

  <h3>Survey Questions</h3>

  <table class="survey" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th class="prefix" id="pre_s1" colspan="2">When it comes to..</th>
        <th id="na_s1"   class="column"><abbr title="Not Applicable">N/A</abbr></th>
        <th id="min_s1" class="column">My Minimum<br/>Service Level Is</th>
        <th id="des_s1" class="column">My Desired<br/>Service Level Is</th>
        <th id="per_s1" class="column">Perceived Service<br/>Performance Is</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd top">
        <td class="number" align="left" valign="middle">
           1)
        </td>
        <td class="question" align="left" valign="middle">
            Employees who instill confidence in users
        </td>
        <td class="low" align="center" valign="middle" >
           <label class="offscreen" for="s1_q1_na">Question 1, Employees who instill confidence in users, is not applicable to me</label>
           <input class="low" type="checkbox" name="s1_q1_na" id="s1_q1_na"/>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q1_min">Rate my minimum service level, for question 1 Employees who instill confidence in users</label>
           <select name="s1_q1_min" id="s1_q1_min">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q1_desc">Rate my desired service level, for question 1 Employees who instill confidence in users</label>
           <select name="s1_q1_desc" id="s1_q1_desc">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q1_pre">Rate my perceived service performance, for question 1 Employees who instill confidence in users</label>
           <select name="s1_q1_pre" id="s1_q1_pre">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

      </tr>
      <tr class="even top">
        <td class="number" align="left" valign="middle">
           2)
        </td>
        <td class="question" align="left" valign="middle">
            Making electronic resources accessible from my home or office
        </td>
        <td class="low" align="center" valign="middle" >
           <label class="offscreen" for="s1_q2_na">Question 2, Making electronic resources accessible from my home or office, is not applicable to me</label>
           <input class="low" type="checkbox" name="s1_q2_na" id="s1_q2_na"/>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q2_min">Rate my minimum service level, for question 2 Making electronic resources accessible from my home or office</label>
           <select name="s1_q2_min" id="s1_q2_min">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q2_desc">Rate my desired service level, for question 2 Making electronic resources accessible from my home or office</label>
           <select name="s1_q2_desc" id="s1_q2_desc">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q2_pre">Rate my perceived service performance, for question 2 Making electronic resources accessible from my home or office</label>
           <select name="s1_q2_pre" id="s1_q2_pre">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

      </tr>
      <tr class="odd top">
        <td class="number" align="left" valign="middle">
           3)
        </td>
        <td class="question" align="left" valign="middle">
            Library space that inspires study and learning
        </td>
        <td class="low" align="center" valign="middle" >
           <label class="offscreen" for="s1_q3_na">Question 3, Library space that inspires study and learning, is not applicable to me</label>
           <input class="low" type="checkbox" name="s1_q3_na" id="s1_q3_na"/>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q3_min">Rate my minimum service level, for question 3 Library space that inspires study and learning</label>
           <select name="s1_q3_min" id="s1_q3_min">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q3_desc">Rate my desired service level, for question 3 Library space that inspires study and learning</label>
           <select name="s1_q3_desc" id="s1_q3_desc">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q3_pre">Rate my perceived service performance, for question 3 Library space that inspires study and learning</label>
           <select name="s1_q3_pre" id="s1_q3_pre">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

      </tr>
      <tr class="even top">
        <td class="number" align="left" valign="middle">
           4)
        </td>
        <td class="question" align="left" valign="middle">
            Giving users individual attention
        </td>
        <td class="low" align="center" valign="middle" >
           <label class="offscreen" for="s1_q4_na">Question 4, Giving users individual attention, is not applicable to me</label>
           <input class="low" type="checkbox" name="s1_q4_na" id="s1_q4_na"/>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q4_min">Rate my minimum service level, for question 4 Giving users individual attention</label>
           <select name="s1_q4_min" id="s1_q4_min">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q4_desc">Rate my desired service level, for question 4 Giving users individual attention</label>
           <select name="s1_q4_desc" id="s1_q4_desc">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q4_pre">Rate my perceived service performance, for question 4 Giving users individual attention</label>
           <select name="s1_q4_pre" id="s1_q4_pre">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

      </tr>
      <tr class="odd top">
        <td class="number" align="left" valign="middle">
           5)
        </td>
        <td class="question" align="left" valign="middle">
            A library Web site enabling me to locate information on my own
        </td>
        <td class="low" align="center" valign="middle" >
           <label class="offscreen" for="s1_q5_na">Question 5, A library Web site enabling me to locate information on my own, is not applicable to me</label>
           <input class="low" type="checkbox" name="s1_q5_na" id="s1_q5_na"/>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q5_min">Rate my minimum service level, for question 5 A library Web site enabling me to locate information on my own</label>
           <select name="s1_q5_min" id="s1_q5_min">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q5_desc">Rate my desired service level, for question 5 A library Web site enabling me to locate information on my own</label>
           <select name="s1_q5_desc" id="s1_q5_desc">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

        <td align="center">
           <label class="offscreen" for="s1_q5_pre">Rate my perceived service performance, for question 5 A library Web site enabling me to locate information on my own</label>
           <select name="s1_q5_pre" id="s1_q5_pre">
             <option>select rating</option>
             <option>1, lowest</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, highest</option>
          </select>
        </td>

      </tr>
    </tbody>
  </table>
  <table class="survey" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th class="prefix" id="pre_s2" colspan="2">Please indicate your library usage patterns:</th>
        <th id="min_s2" colspan="9" class="column">Rating</th>
      </tr>
    </thead>
    <tbody>
      <tr class="even top">
        <td class="number" align="left" valign="middle">
           6)
        </td>
        <td class="question" align="left" valign="middle">
            The library helps me stay abreast of developments in my field(s) of interest.
        </td>
        <td>
           <label class="offscreen" for="s2_q6_desc">Rating for question 6 The library helps me stay abreast of developments in my field(s) of interest.</label>
           <select name="s2_q6_desc" id="s2_q6_desc">
             <option>select rating</option>
             <option>1, strongest disagreement</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, strongest agreement</option>
          </select>
        </td>

      </tr>
      <tr class="odd top">
        <td class="number" align="left" valign="middle">
           7)
        </td>
        <td class="question" align="left" valign="middle">
            The library aids my advancement in my academic discipline or work.
        </td>
        <td>
           <label class="offscreen" for="s2_q7_desc">Rating for question 7 The library aids my advancement in my academic discipline or work.</label>
           <select name="s2_q7_desc" id="s2_q7_desc">
             <option>select rating</option>
             <option>1, strongest disagreement</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, strongest agreement</option>
          </select>
        </td>

      </tr>
      <tr class="even top">
        <td class="number" align="left" valign="middle">
           8)
        </td>
        <td class="question" align="left" valign="middle">
            The library enables me to be more efficient in my academic pursuits or work.
        </td>
        <td>
           <label class="offscreen" for="s2_q8_desc">Rating for question 8 The library enables me to be more efficient in my academic pursuits or work.</label>
           <select name="s2_q8_desc" id="s2_q8_desc">
             <option>select rating</option>
             <option>1, strongest disagreement</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, strongest agreement</option>
          </select>
        </td>

      </tr>
      <tr class="odd top">
        <td class="number" align="left" valign="middle">
           9)
        </td>
        <td class="question" align="left" valign="middle">
            The library helps me distinguish between trustworthy and untrustworthy information.
        </td>
        <td>
           <label class="offscreen" for="s2_q9_desc">Rating for question 9 The library helps me distinguish between trustworthy and untrustworthy information.</label>
           <select name="s2_q9_desc" id="s2_q9_desc">
             <option>select rating</option>
             <option>1, strongest disagreement</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, strongest agreement</option>
          </select>
        </td>

      </tr>
      <tr class="even top">
        <td class="number" align="left" valign="middle">
           10)
        </td>
        <td class="question" align="left" valign="middle">
            The library provides me with the information skills I need in my work or study.
        </td>
        <td>
           <label class="offscreen" for="s2_q10_desc">Rating for question 10 The library provides me with the information skills I need in my work or study.</label>
           <select name="s2_q10_desc" id="s2_q10_desc">
             <option>select rating</option>
             <option>1, strongest disagreement</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
             <option>6</option>
             <option>7</option>
             <option>8</option>
             <option>9, strongest agreement</option>
          </select>
        </td>

      </tr>
    </tbody>
  </table>
  <table class="survey" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th class="prefix" id="pre_s3" colspan="2">Please answer a few questions about yourself:</th>
        <th id="min_s3" colspan="9" class="column">Rating</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd top">
        <td class="number" align="left" valign="middle">
           11)
        </td>
        <td class="question" align="left" valign="middle">
            <label for="s3_q11_select"> The library that you use the most often:</label>
        </td>
        <td class="low select" align="left" valign="middle">
           <select name="s3_q11_select" id="s3_q11_select">
             <option value="1++">Downtown Branch</option>
             <option value="1++">Southwest Branch</option>
             <option value="1++">Northeast Branch</option>
             <option value="1++">Bookmobile</option>
           </select>
        </td>
      </tr>
      <tr class="even top">
        <td class="number" align="left" valign="middle">
           12)
        </td>
        <td class="question" align="left" valign="middle">
            <label for="s3_q12_select">Age:</label>
        </td>
        <td class="low select" align="left" valign="middle">
           <select name="s3_q12_select" id="s3_q12_select">
             <option value="1++">Under 18</option>
             <option value="1++">18-22</option>
             <option value="1++">23- 30</option>
             <option value="1++">31-45</option>
             <option value="1++">over 45</option>
           </select>
        </td>
      </tr>
      <tr class="odd top">
        <td class="number" align="left" valign="middle">
           13)
        </td>
        <td class="question" align="left" valign="middle">
            <label for="s3_q13_select">Sex:</label>
        </td>
        <td class="low select" align="left" valign="middle">
           <select name="s3_q13_select" id="s3_q13_select">
             <option value="1++">Male</option>
             <option value="1++">Female</option>
           </select>
        </td>
      </tr>
      <tr class="even top">
        <td class="number" align="left" valign="middle">
           14)
        </td>
        <td class="question" align="left" valign="middle">
            <label for="s3_q14_select">Discipline:</label>
        </td>
        <td class="low select" align="left" valign="middle">
           <select name="s3_q14_select" id="s3_q14_select">
             <option value="1++">Agriculture / Environmental Studies</option>
             <option value="1++">Business</option>
             <option value="1++">Communications / Journalism</option>
             <option value="1++">Education</option>
             <option value="1++">Engineering / Computer Science</option>
             <option value="1++">General Studies</option>
             <option value="1++">Health Sciences</option>
             <option value="1++">Humanities</option>
             <option value="1++">Law</option>
             <option value="1++">Military / Naval Science</option>
             <option value="1++">Other</option>
             <option value="1++">Performing &amp; Fine Arts</option>
             <option value="1++">Science / Math</option>
             <option value="1++">Psychology/Sociology</option>
             <option value="1++">Undecided</option>
             <option value="1++">Miscellaneous</option>
             <option value="1++">Architecture</option>
           </select>
        </td>
      </tr>
    </tbody>
  </table>
  <p class="submit"><input type="submit" value="Submit Survey Responses"/></p>
</form>

  <style type="text/css">
/* CSS Document */


.offscreen {
  position: absolute;
  left: -200em;
  top: -20em;
}

table.survey {
  margin-bottom: 2em;
}

table.survey th {
  padding: .5em;
  text-align: center;
}

table.survey th.prefix {
  border-bottom: solid white 2px;
}

table.survey th.column {
  border-left: solid white 2px;
  border-bottom: solid white 2px;
}

table.survey th.low,
table.survey td.low,
table.survey th.na {
  border-left: solid white 2px;
}

table.survey th.low,
table.survey th.high,
table.survey th.na {
  font-weight: normal;
  font-size: 90%;
}  

table.survey th.low {
  font-size: 90%;
}

table.survey th.high {
  text-align: right;
}

table.survey thead {
  background-color:#CCCCFF;
}

table.survey tr.odd td {
  background-color: #EEEEEE;
}

table.survey tr.even {
  background-color: #FFFFCC;
}

table.survey tr.top td {
  border-top: solid white 2px;
  padding-top: .125em;
}

table.survey td,
table.survey td {
  padding: 0;
  margin: 0;
}

table.survey td input,
table.survey td input {
  padding: 0;
  margin: 0;
}


table.survey td.rating {
  padding: 0;
  margin: 0;
  font-size: 70%;
  color: #606060;
}

table.survey td.question {
  font-size: 100%;
  font-weight: normal;
  padding-right: 1.25em;
}

table.survey td.number {
  font-size: 100%;
  font-weight: bold;
  width: 2em;
  padding-left: .125em;
}

table.survey td.select {
  width: 30em;
}

table.survey td.select select{
  margin: .5em;
}

ul.survey li {
  list-style: none;
}

ul.survey li div {
  width: 10em;
  padding-right: .5em;
  text-align: right;
  font-weight: bold;
  float: left;
}

table.survey h3 {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
}

  </style>