T7 Coding Challenge 4: Debug

avatar
unknown
plain_text
4 months ago
3.6 kB
10
Indexable
<!doctype html>
<html lang="en">
<head>
   <!--
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 7
   Coding Challenge 4
   
   Author:  John Robert Cabatbat
   Date:    02/27/2025
   Filename: code7-4.html

   -->
   <meta charset="utf-8">
   <link rel="stylesheet" href="code7-4_forms.css">
   <title>Coding Challenge 7-4</title>
</head>
<body>
   <h1>Contact Information</h1>
   <form action="submit-form.php" method="post">
      <fieldset>
         <label for="fnBox">First Name</label>
         <input type="text" id="fnBox" name="firstName" required/>

         <label for="lnBox">Last Name</label>
         <input type="text" id="lnBox" name="lastName" required/>

         <label for="idBox">Student ID</label>
         <input type="text" id="idBox" name="studentid" maxilength="8" regexp="^uw-\d{2}-\d{5}" required/>

         <label for="yearSL">Year</label>
         <select id="yearSL" name="year" required>
            <option value="">Select Year</option>
            <option value="1">Freshman</option>
            <option value="2">Sophomore</option>
            <option value="3">Junior</option>
            <option value="4">Senior</option>   
            <option value="5">Graduate School</option> 
            <option value="6">Part-time</option> 
            <option value="99">--Other--</option>            
         </select>
         <label for="rhBox">Residence Hall</label>
         <input type="text" id="rhBox" name="residencehall" list="hallName" required/>
         <list id="hallName">
            <option value="Auger"> </option>
            <option value="Bernard"></option>         
            <option value="Chadbourne"></option>  
            <option value="Claratine"></option>  
            <option value="Cuffs"></option>                
            <option value="Eagleton"></option>  
            <option value="Eastside 1"></option>            
            <option value="Eastside 2"></option>  
            <option value="Frenches"></option>  
            <option value="Morning Side"></option>  
            <option value="Newton"></option>              
            <option value="Sandberg"></option>  
            <option value="Summex"></option>  
            <option value="Westside 1"></option>  
            <option value="Westside 2"></option>  
            <option value="Westside 3"></option>              
         </list>
      </fieldset>
      <input type="submit" value="Submit" />
   </form>
</body>
</html>





@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 7
   Coding Challenge 4
   
   Filename: code7-4_forms.css

*/

h1 {
   font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
   font-size: 1.7em;
   letter-spacing: 0.1em;
   margin-left: 20px;
}
form {
   padding: 0px 0px 10px 20px;   
}

fieldset {
   width: 300px;
   padding: 15px;
}

label {
   display: block;
   margin: 0px 0px 10px 0px;
   font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
   
}

select {
   display: block;
   margin: 15px 0px;
   font-size: 1em;
}

select option {
   font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
   font-size: 0.9em;
}

input {
   display: block;
   margin: 0px 0px 10px 0px;
}


input[type="submit"] {
   font-size: 1.2em;
   display: inline-block;
   margin: 10px auto
}
Editor is loading...
Leave a Comment