FORM TAGS

dt and dd with a form

by Julien Etienne

HTML

<form id="form1">
    <fieldset>
        <legend>Person</legend>
        <dl>
          
          <dt><label for="first-name">First name:</label><dt>
          <dd><input type="text" name="fname" id="fname"></dd>

          <dt><label for="last-name">Last name:</label></dt>
          <dd><input type="text" name="fname" id="lname"></dd>
          
          <dt><label for="email">Email:</label></dt>
          <dd><input type="text" name="email" id="email"></dd>
          
          <dt><label for="">About:</label></dt>
          <dd> <select id = "myList">
               <option value = "1">Giza Necropolis</option>
               <option value = "2">Great Wall of China</option>
               <option value = "3">Petra</option>
               <option value = "4">Colosseum</option>
            <option value = "1">Chichen Itza</option>
               <option value = "2">Machu Picchu</option>
               <option value = "3">Taj Mahal</option>
               <option value = "4">Christ the Redeemer</option>
             </select></dd>
          
          <dt><label for="lname">Message:</label></dt>
          <dd><textarea type="text" name="message" id="message" rows="5" cols="23"></textarea></dd>
          
        </dl>
        <input type="submit" name="submit" class="submit" value="Submit">
    </fieldset>

</form>

CSS

input,select,textarea{
  padding: 0;
  margin: 0;
  display: inline-block;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
  border:1px;
  outline:0px;

 
  
 
 

text-indent: 0px;
text-shadow: none;

  background-color: #8A8B8B;
}

select{

  width: 22ch;
}
textarea{
resize: none;
  font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
 
  display: inline-block;
}
.invalid{background:red;}