T7 Coding Challenge 1

<!doctype html>
<html lang="en">
<head>
   <!--
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 7
   Coding Challenge 1
   
   Author: John Robert Cabatbat 
   Date:  02/27/2025 
   Filename: code7-1.html
   -->
   <meta charset="utf-8">
   <title>Coding Challenge 7-1</title>
   <link rel="stylesheet" href="code7-1_forms.css">
   <script src="formsubmit.js" defer></script>
</head>
<body>
   <h1>Enter User Account</h1>

   <form action="login-script.php" method="post">
     <fieldset id="login"> 
         <legend>Enter Account Information</legend>
         <label for="acctype">Account Type:</label>
         <select id="acctype" name="accounttype" size="3">

            <option value="type1">administrator</option>
            <option value="type2">member</option>
            <option value="type3">guest</option>

         </select>

         <label for="username">Username</label>
         <input type="text" id="username" name="user">

         <label for="password">Password</label>
         <input type="password" id="password" name="pwd">

      </fieldset>

      <input type="submit" value="Login">

   </form>

</body>
</html>





@charset "utf-8";

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

*/

h1 {
   font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
   margin-left: 25px;
}
fieldset {
   width: 250px;
   border-radius: 15px;
   margin-left: 30px;
   background: ivory;
}

legend {
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
   font-size: 1.1em;
}

label {
   display: block;
   margin: 8px 0px 5px 10px;
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

select {
   display: block;
   width: 200px;
   margin: 0px 0px 5px 10px;
   font-size: 1em;
}

select option {
   padding: 2px 0px 2px 5px;
}

input {
   width: 200px;
   margin: 0px 0px 5px 5px;
}

input[type="submit"] {
   display: block;
   width: 75px;
   margin: 10px 0px 0px 130px;
   font-size: 1em;
}







"use strict";
/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 7
   Coding Challenge 1


   Filename: formsubmit.js

   Purpose: The purpose of this program is to simply report on a
            successful completition of a valid Web form.

            When the form is submitted, the onsubmit event handler
            verifies that the form data is complete and valid.
            An alert box is displayed notifying the user.

            The event function returns a value of false so that the
            student does not have to continually retype test values
            in the survey form.


*/

window.onload = function() {
   document.forms[0].onsubmit = function() {
      if (this.checkValidity()) {
         alert("Form Submitted");
         return false;
      }
   };
};
Editor is loading...