Question

I need help, I have my page set up, I just need help with some aesthetics,...

I need help, I have my page set up, I just need help with some aesthetics, and getting the clear button to work, and get a popup when they click submit that says success along as all fields are filled out correctly. Any help would be fantastic.

<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styleSheet.css" />
<title>2020-2021 Student-Athlete Registration Form - Weber State University</title>


</head>

<body>
<header>
<h1>WEBER STATE UNIVERSITY</h1>
</header>

<div class="link">
<ul>
<li><a href="page 1.html"><span class="text">Home</span></a></li>
</ul>
</div>

   <h1>2020-2021 Student-Athlete Registration Form</h1>

<h3> ALL FIELDS MARKED WITH AN * ARE REQUIRED </h3>
   <div class="input-group">

<div class="image">
<a href="images/weber-2.jpg"><img src="images/weber-2.jpg" alt="Weber Rock photo" /></a>
</div>

       <div class="label-box">
                           <label>Weber State Student ID Number: * </label>
               </div>

   <div class="input-box">

       <input type="text" class="textbox small"/>
<br>
       <em class="input-support-text">Please enter the W and ALL leading zeros</em>

   </div>
   </div>
   <div class="input-group">
<br>
       <div class="label-box">
                           <label for="email_address">Email address * </label>
           </div>

   <div class="input-box">

       <input type="text" id="email_address" name="email_address" class="textbox small"/>

       </div>
   </div>

   <div class="input-group">
<br>
       <div class="label-box">
                           <label for="first_name">First name * </label>
               </div>

   <div class="input-box">

       <input type="text" id="first_name" name="first_name" class="textbox small"/>

       </div>
   </div>

   <div class="input-group">
<br>
       <div class="label-box">
                           <label for="last_name">Last name * </label>
               </div>

   <div class="input-box">

       <input type="text" id="last_name" name="last_name" class="textbox small"/>

       </div>

   </div>
<br>
   <div class="input-group">

       <div>
                           <label>Student Type: * </label>
               </div>

   <div>

   <select>
   <option value="Incoming Freshman">Incoming Freshman</option>
   <option value="Incoming Transfer">Incoming Transfer</option>
   <option value="Returning Student">Returning Student</option>
   </select>

       </div>

   </div>

   <div class="input-group">

<br>       <div>
                           <label>Sport Choice: * </label>
           </div>

   <div class="input-box">

   <select>
   <option value="Baseball">Baseball</option>
   <option value="Basketball (M)">Basketball (M)</option>
   <option value="Basketball (W)">Basketball (W)</option>
   <option value="Football">Football</option>
   <option value="Golf">Golf</option>
   <option value="Soccer (M)">Soccer (M)</option>
<option value="Soccer (W)">Soccer (W)</option>
   <option value="Lacrosse (M)">Lacrosse (M)</option>
   <option value="Lacrosse (W)">Lacrosse (W)</option>
   </select>
   </div>
   </div>
   <div class="input-group">
<br>
       <div class="label-box">
                           <label>Date of Birth: * </label>
           </div>

   <div class="input-box">

       <input type="text" class="textbox small"/>
<br>
               <em>(Please use the following format: MM/DD/YYYY)</em>
<br>
   </div>
   </div>
   <div class="input-group">
<br>
       <div>
                           <label>City: * </label>
           </div>

   <div>

       <input type="text" class="textbox small"/>

   </div>
   </div>

   <div class="input-group">
<br>
       <div class="label-box">
                           <label>State: * </label>
           </div>

   <div class="input-box">

       <input type="text" class="textbox small"/>
<br>
               <em class="input-support-text">(please the TWO-LETTER abbreviation (i.e. UT for Utah)</em>
<br>
   </div>
   </div>
<br>

<input type="submit" value="SUBMIT" />
<input type="reset" value="clear"/>
</body>
</html>

0 0
Add a comment Improve this question Transcribed image text
Answer #1

Registration.html :

<html lang="en">

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="styleSheet.css" />

    <!-- title for web page -->

    <title>2020-2021 Student-Athlete Registration Form - Weber State University</title>

</head>

<body>

    <header>

        <h1>WEBER STATE UNIVERSITY</h1>

    </header>

    <div class="link">

        <ul>

            <li><a href="page 1.html"><span class="text">Home</span></a></li>

        </ul>

    </div>

    <h1>2020-2021 Student-Athlete Registration Form</h1>

    <h3> ALL FIELDS MARKED WITH AN * ARE REQUIRED </h3>

    <div class="input-group">

        <div class="image">

            <a href="images/weber-2.jpg"><img src="images/weber-2.jpg" alt="Weber Rock photo" /></a>

        </div>

<form onsubmit="success()">

        <div class="label-box">

            <label>Weber State Student ID Number: * </label>

        </div>

        <div class="input-box">

            <input type="text" class="textbox small" required />

            <br>

            <em class="input-support-text">Please enter the W and ALL leading zeros</em>

        </div>

    </div>

    <div class="input-group">

        <br>

        <div class="label-box">

            <label for="email_address">Email address * </label>

        </div>

        <div class="input-box">

            <input type="text" id="email_address" name="email_address" class="textbox small" required />

        </div>

    </div>

    <div class="input-group">

        <br>

        <div class="label-box">

            <label for="first_name">First name * </label>

        </div>

        <div class="input-box">

            <input type="text" id="first_name" name="first_name" class="textbox small" required/>

        </div>

    </div>

    <div class="input-group">

        <br>

        <div class="label-box">

            <label for="last_name">Last name * </label>

        </div>

        <div class="input-box">

            <input type="text" id="last_name" name="last_name" class="textbox small" required />

        </div>

    </div>

    <br>

    <div class="input-group">

        <div>

            <label>Student Type: * </label>

        </div>

        <div>

            <select>

                <option value="Incoming Freshman">Incoming Freshman</option>

                <option value="Incoming Transfer">Incoming Transfer</option>

                <option value="Returning Student">Returning Student</option>

            </select>

        </div>

    </div>

    <div class="input-group">

        <br>

        <div>

            <label>Sport Choice: * </label>

        </div>

        <div class="input-box">

            <select>

                <option value="Baseball">Baseball</option>

                <option value="Basketball (M)">Basketball (M)</option>

                <option value="Basketball (W)">Basketball (W)</option>

                <option value="Football">Football</option>

                <option value="Golf">Golf</option>

                <option value="Soccer (M)">Soccer (M)</option>

                <option value="Soccer (W)">Soccer (W)</option>

                <option value="Lacrosse (M)">Lacrosse (M)</option>

                <option value="Lacrosse (W)">Lacrosse (W)</option>

            </select>

        </div>

    </div>

    <div class="input-group">

        <br>

        <div class="label-box">

            <label>Date of Birth: * </label>

        </div>

        <div class="input-box">

            <input type="text" class="textbox small" required />

            <br>

            <em>(Please use the following format: MM/DD/YYYY)</em>

            <br>

        </div>

    </div>

    <div class="input-group">

        <br>

        <div>

            <label>City: * </label>

        </div>

        <div>

            <input type="text" class="textbox small" required />

        </div>

    </div>

    <div class="input-group">

        <br>

        <div class="label-box">

            <label>State: * </label>

        </div>

        <div class="input-box">

            <input type="text" class="textbox small" required/>

            <br>

            <em class="input-support-text">(please the TWO-LETTER abbreviation (i.e. UT for Utah)</em>

            <br>

        </div>

    </div>

    <br>

    <input type="submit" value="SUBMIT" />

    <input type="reset" value="clear" />

    <!-- script is used for javascript -->

    <script>

        function success()

        {

            //display alert

            alert("Success , all fields are field out");

        }

    </script>

</form>

</body>

</html>

===============================

Screen when any field is empty :

- D x 2020-2021 Sucent-Athlete Peçi x + € → C O Fila C/wamp54/www/Files/Registration.html?email address-vir... ☆ ALL FILLUS.N

Screen when all fields are field out :

2020-2021 Student-Athlete Regis x + - 0 X + + c 2020-202 File C:/wamp64/www/Files/Registration.html Q Ă N This page says ALL

Add a comment
Know the answer?
Add Answer to:
I need help, I have my page set up, I just need help with some aesthetics,...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...

    Hello, I was wondering if you could possibly think of ways to improve my home page then I would like you to do so. I know it could be better. Thank you. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <nav class="navbar...

  • I need help incorporating javascript into my page. The Lessons page has a message box (not...

    I need help incorporating javascript into my page. The Lessons page has a message box (not an alert box) that becomes visible/invisible when the mouse is moved over/off the small, red hyperlink on the last line that says, "note." The note is 10pt, red, and italic. The message box contains the text, "Students who pre-pay for the entire term will have the registration fee waved." It is 150px wide, with an "azure" background and a black border. It has 5px...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • I need HELP to get the code to do these function: If I keep clicking "Generate"...

    I need HELP to get the code to do these function: If I keep clicking "Generate" multiple times, the list keeps on getting bigger. The number of rows should always be equal to the number of columns. Also make the code to show both table at the same time? Here is the code I got some far : Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Testing</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <style> td...

  • I can't figure this one out at all. Any help would be appreciated. Here's the question:...

    I can't figure this one out at all. Any help would be appreciated. Here's the question: You will need to complete the functions to Toggle the Fries and Drinks sections by adding or removing the 'hide' CSS class I created. I have already created the function to Toggle Burgers and you can use that as an example to build out the full functionality. I have also made created the function to reset the form. Finally, to calculate the total, you...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">      &n

    <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">         <!--div class-->       <div class="formvalidation">       <label>Your first Name</label>        <span id="showname"></span>        <!--label for firstname-->       <input type="text" name="firstname" class="formsignup"  id ="firstn" placeholder="Enter your Name">      <br><br>           <!--lastname-->       <label>Your last Name</label> <span id="showlname"></span>       <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name">       <br><br>        <!--email-->         <label>Your Email</label>          <span id="showemail"></span>         <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email">        <br><br> <input type="submit" value="send">     </div>           </form> <script>      function checkvalidation(){     var name = document.forms["validationForm"]["firstname"].value;     var lname...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • Create an HTML5 page that contains a form to collect the following data. The text in...

    Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control: Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on Quantity (number) quantity Unit price (number) unit_price Discount (%)(number) discount_rate Date (date)   order_date First Name (text box)   first_name Last Name (text box)   last_name Payment type (drop down list)   payment_type – Visa, Master, Discover, Amex, and...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT