Example Navigation

Example 7: Multiple fields using SELECT/OPTION elements

Best Practice Rating: Good

Example Start

Start Date - - (Month-Day-Year)
End Date - - (Month-Day-Year)

Example End

HTML Source Code


<fieldset class="date">
  <legend>Start Date </legend>
  <label for="month_start">Month</label>
  <select id="month_start"
          name="month_start" />
    <option>January</option>      
    <option>February</option>      
    <option>March</option>      
    <option>April</option>      
    <option>May</option>      
    <option>June</option>      
    <option>July</option>      
    <option>August</option>      
    <option>September</option>      
    <option>October</option>      
    <option>November</option>      
    <option>December</option>      
  </select> -
  <label for="day_start">Day</label>
  <select id="day_start"
          name="day_start" />
    <option>1</option>      
    <option>2</option>      
    <option>3</option>      
    <option>4</option>      
    <option>5</option>      
    <option>6</option>      
    <option>7</option>      
    <option>8</option>      
    <option>9</option>      
    <option>10</option>      
    <option>11</option>      
    <option>12</option>      
    <option>13</option>      
    <option>14</option>      
    <option>15</option>      
    <option>16</option>      
    <option>17</option>      
    <option>18</option>      
    <option>19</option>      
    <option>20</option>      
    <option>21</option>      
    <option>22</option>      
    <option>23</option>      
    <option>24</option>      
    <option>25</option>      
    <option>26</option>      
    <option>27</option>      
    <option>28</option>      
    <option>29</option>      
    <option>30</option>      
    <option>31</option>      
  </select> -
  <label for="year_start">Year</label>
  <select id="year_start"
         name="year_start" />
    <option>2009</option>      
    <option>2010</option>      
    <option>2011</option>      
    <option>2012</option>      
    <option>2013</option>      
    <option>2014</option>      
    <option>2015</option>      
    <option>2016</option>      
    <option>2017</option>      
    <option>2018</option>      
  </select>
  <span class="inst">(Month-Day-Year)</span>
</fieldset>

<fieldset class="date">
  <legend>End Date </legend>
  <label for="month_end">Month</label>
  <select id="month_end"
          name="month_end" />
    <option>January</option>      
    <option>February</option>      
    <option>March</option>      
    <option>April</option>      
    <option>May</option>      
    <option>June</option>      
    <option>July</option>      
    <option>August</option>      
    <option>September</option>      
    <option>October</option>      
    <option>November</option>      
    <option>December</option>      
  </select> -
  <label for="day_end">Day</label>
  <select id="day_end"
          name="day_end" />
    <option>1</option>      
    <option>2</option>      
    <option>3</option>      
    <option>4</option>      
    <option>5</option>      
    <option>6</option>      
    <option>7</option>      
    <option>8</option>      
    <option>9</option>      
    <option>10</option>      
    <option>11</option>      
    <option>12</option>      
    <option>13</option>      
    <option>14</option>      
    <option>15</option>      
    <option>16</option>      
    <option>17</option>      
    <option>18</option>      
    <option>19</option>      
    <option>20</option>      
    <option>21</option>      
    <option>22</option>      
    <option>23</option>      
    <option>24</option>      
    <option>25</option>      
    <option>26</option>      
    <option>27</option>      
    <option>28</option>      
    <option>29</option>      
    <option>30</option>      
    <option>31</option>      
  </select> -
  <label for="year_end">Year</label>
  <select id="year_end"
         name="year_end" />
    <option>2009</option>      
    <option>2010</option>      
    <option>2011</option>      
    <option>2012</option>      
    <option>2013</option>      
    <option>2014</option>      
    <option>2015</option>      
    <option>2016</option>      
    <option>2017</option>      
    <option>2018</option>      
  </select>
  <span class="inst">(Month-Day-Year)</span>
</fieldset>

CSS Source Code

  <style type="text/css">
fieldset.date {
  margin: 0;
  padding: 0;
  padding-left: 20px;
  padding-bottom: .5em;
  display: block;
  border: none;
}

fieldset.date legend {
  margin: 0;
  padding: 0;
  margin-top: .25em;
  font-size: 100%;
}


fieldset.date label {
  position: absolute;
  top: -20em;
  left: -200em;
}

fieldset.date select {
margin: 0;
padding: 0;
font-size: 100%;
display: inline;
}

span.inst {
  font-size: 75%;
  color: blue;
  padding-left: .25em;
}


fieldset.date select:active,
fieldset.date select:focus,
fieldset.date select:hover
{
  border-color: gray;
  background-color: lightyellow;
}


  </style>