Question

In: Computer Science

HTML WEBSITE WITH CSS LAYOUT 1. Create a studentregistration form with the following fields: > Email...

HTML WEBSITE WITH CSS LAYOUT

1. Create a studentregistration form with the following fields:
> Email Address (Email)
> Desired Username (Text box)
> Password (Password)
> Family name (Text box)
> Middle Name/Initial (Text box)
> First name (Text box)
> Gender (Radio Button - Male or Female only!)
> ID Number (Text box)
> Mobile Number (Text box)
> Landline Number (Text box)
> Permanent Home Address (Text box)
> Degree/Course (Text box)
> Year Level (Drop down - year 1 to 5)
> Campus (Radio Button - Main Campus, Banilad Campus, LM Campus, Mambaling Campus)
> Name of Father (Text box)
> Name of Mother (Text box)
> Name of Guardian (Text box)
> Hobbies (Checkbox, a user can select multiple hobbies, at least 10 hoobies listed)
> Interests (Checkbox, a user can select multiple interest, at least 10 interest listed)
> Civil Status (Dropdown - Single, Married, Separated, Widow)
> Favorite Color (Color Picker)
> Date of Birth (Month, Day, Year - three textboxes)
> Describe yourself (Text area)
> Rate your satisfaction inside UC (Range input - ranging from 1 - 10)
> Submit button (Display "Registered" in a separate page when the user click this button - this is only for display, no backend scripts required to save the data)
> Clear button (Clear all the fields when user clicks)

2. Create a login form.
> Username
> Password
> Login Button
> Reset Button

* Arrange all your fields in a table format. You can also use the fieldset element to arrange your fields.
* Make your design clean as possible.
* Make all your fonts readable.
* If you want to use/apply colors, use only 3 colors.
* Include the Registration and Login Links in the menu area.
* Maintain the layout of your page.

Solutions

Expert Solution

<html>

<head>

<script type="text/javascript" src="validate.js"></script>

</head>

<body>

<form action="#" name="StudentRegistration" onSubmit="return(validate());">


<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"

cellspacing="2">

<tr>

<td colspan=2>

<center><font size=4><b>Student Registration Form</b></font></center>

</td>

</tr>

<tr>


<td>Email</td>
<td><input type="email" id="email"
       pattern=".+@globex.com" size="30" required></td>

</tr>
<tr>
<td>Desired Username</td>

<td><input type=text name=textnames id="textname" size="30"></td>

</tr>

<tr>

<td>Password</td>

<td><input type="password" name="password" id="pwd"

size="30"></td>

</tr>

<tr>

<td>Family Name</td>

<td><input type=text name=textnames id="textname" size="30"></td>

</tr>


<tr>

<td>Middle Name/Initial</td>

<td><input type=text name=textnames id="textname" size="30"></td>

</tr>

<tr>

<td>First Name/Initial</td>

<td><input type=text name=textnames id="textname" size="30"></td>

</tr>

<tr>

<td>Postal Address</td>

<td><input type="text" name="paddress" id="paddress" size="30"></td>

</tr>

<tr>

<td>Personal Address</td>

<td><input type="text" name="personaladdress"

id="personaladdress" size="30"></td>

</tr>


<tr>

<td>Sex</td>

<td><input type="radio" name="sex" value="male" size="10">Male

<input type="radio" name="sex" value="Female" size="10">Female</td>

</tr>

<tr>

<td>City</td>

<td><select name="City">

<option value="-1" selected>select..</option>

<option value="New Delhi">NEW DELHI</option>

<option value="Mumbai">MUMBAI</option>

<option value="Goa">GOA</option>

<option value="Patna">PATNA</option>

</select></td>

</tr>

<tr>

<td>Course</td>

<td><select name="Course">

<option value="-1" selected>select..</option>

<option value="B.Tech">B.TECH</option>

<option value="MCA">MCA</option>

<option value="MBA">MBA</option>

<option value="BCA">BCA</option>

</select></td>

</tr>

<tr>

<td>District</td>

<td><select name="District">

<option value="-1" selected>select..</option>

<option value="Nalanda">NALANDA</option>

<option value="UP">UP</option>

<option value="Goa">GOA</option>

<option value="Patna">PATNA</option>

</select></td>

</tr>

<tr>

<td>State</td>

<td><select Name="State">

<option value="-1" selected>select..</option>

<option value="New Delhi">NEW DELHI</option>

<option value="Mumbai">MUMBAI</option>

<option value="Goa">GOA</option>

<option value="Bihar">BIHAR</option>

</select></td>

</tr>

<tr>

<td>PinCode</td>

<td><input type="text" name="pincode" id="pincode" size="30"></td>

</tr>

<tr>

<td>EmailId</td>

<td><input type="text" name="emailid" id="emailid" size="30"></td>

</tr>

<tr>

<td>DOB</td>

<td><input type="text" name="dob" id="dob" size="30"></td>

</tr>

<tr>

<td>MobileNo</td>

<td><input type="text" name="mobileno" id="mobileno" size="30"></td>

</tr>

<tr>

<td><input type="reset"></td>

<td colspan="2"><input type="submit" value="Submit Form" /></td>

</tr>

</table>

</form>

</body>

</html>


Related Solutions

Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to separate content from presentation. The...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript or Bootstrap. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to...
HTML 5 (Website Registration Form with Optional Survey) Create a website registration form to obtain a...
HTML 5 (Website Registration Form with Optional Survey) Create a website registration form to obtain a user’s first name, last name and e-mail address. In addition, include an optional survey question that asks the user’s year in college (e.g., Freshman). Place the optional survey question in a details element that the user can expand to see the question.
Create an HTML form with the following: 2 text input fields 1 text area 2 radio...
Create an HTML form with the following: 2 text input fields 1 text area 2 radio buttons or 3 checkboxes 1 button Include labels for fields
Create 1 HTML page and 1 CSS file for all the styles. Your html page will...
Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocks
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocksElliott university welcome block :2-3 pictures with bordersThree paragraphs describing a student experience the collegeAppropriate for the contentGallery page block:Consisting of 8 to 10 imagesFormatted for best loading on the web across all devicesText paragraph under each imageRemaining Two blocks can reflect content that you choose:Consisting of 3 paragraphs of text per blockConsisting of at least one image per blockLook...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write a website for the fictitious company Game Gurus. The website will have a home page that you will design, as well as pages created by each "guru." (At least 2 gurus are required). The home page will include: o A description of the site o A quote from each guru o Links to manufacturers websites o Links to the TopTen.html and GameOfTheWeek.html pages for...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...
Given the html below, create css to produce the following illustrated color page output: Red for...
Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>     I'm a paragraph, what color am I ?      </p>    <ul>      <li id = "fix"> I'm a list item;what color am I? </li>        </ul> <div class = "central1"> <p class ="above">   I'm...
Create in html5 a Website Registration Form with Optional Survey) Create a website registration form to...
Create in html5 a Website Registration Form with Optional Survey) Create a website registration form to obtain a user’s first name, last name and e-mail address. In addition, include an optional survey question that asks the user’s year in college (e.g, freshman,junior). Place the optional survey question in a details element that the user can expand to see the question.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT