Create a new HTML page named Contact (5 points) Create a contact form that inclu
ID: 3823489 • Letter: C
Question
Create a new HTML page named Contact (5 points) Create a contact form that includes the following elements: o First Name textbox (attributes: type, id, name) (5 points) o Last Name textbox (attributes: type, id, name) (5 points) o E-mail textbox (attributes: type, id, name) Use HTML5 form control (5 points) o Phone textbox (attributes: type, id, name Use HTML5 form control (5 points) o Preferred Contact Method button group for email, phone, or none. (attributes: type, id, name, and a value attribute for each item) (10 points) o Site Rating spinner control Use HTML5 form control (5 points) o Comments textarea (attributes: type, id, name, cols, rows (5 points o Reset button (attributes: type, id, name) (5 points o Submit button (attributes: type, id, name) (5 points) Contact Form Phone OE-mal Please rate website (1 and 10) Add the accesskey and tabindex attributes for each form element. (5 points) Use the label element to associate a text description with a form control. (5 points) Use legend and fieldset to group your form elements. Group the first name, last name, email, phone, and preferred contact method elements into a Contact Information group. Group the Site Rating and Comments elements into a Feedback group. (5 points) Add the required attribute to the first name, last name, and site rating elements. (5 points)Explanation / Answer
I added the contact.html form as per your needed. I kept external CSS file. Please look the project in the below attached git hub link. https://github.com/BagavathPadmanabhan/Contact.git
or find the below code html and CSS
Contact.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link href="http://fonts.googleapis.com/css?family=Nunito:400,300" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<form method="POST" action="mailto:test@example.com" enctype="text/plain">
<h1>Contact</h1>
<fieldset>
<legend>Contact info</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="first_name" tabindex="1" accesskey="f">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="last_name" tabindex="2" accesskey="l">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" tabindex="3" accesskey="m">
<label for="phone">Phone:</label>
<input type="number" id="phone" name="user_phone" tabindex="4" accesskey="p">
<label>Preferred Contact:</label>
<input type="radio" id="phone" value="phone" name="precon" tabindex="5" accesskey="c"><label for="phone" class="light">Phone</label>
<input type="radio" id="email" value="email" name="precon" tabindex="6" accesskey="e"><label for="email" class="light">E-Mail</label>
<input type="radio" id="none" value="none" name="precon" tabindex="7" accesskey="n"><label for="none" class="light">None</label>
</fieldset>
<fieldset>
<legend>Feedback</legend>
<label for="rating">Please rate this website(1 and 10):</label>
<input type="number" min="1" max="10" tabindex="8" accesskey="r">
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" tabindex="9" accesskey="c"></textarea>
</fieldset>
<button id="submit" type="submit" tabindex="10" accesskey="E">Submit</button>
<button id="reset" type="reset" tabindex="11" accesskey="D">Reset</button>
</form>
</body>
<script>
var form = document.getElementsByTagName('form')[0];
form.addEventListener('submit',contact,false);
function contact(e) {
// Prevent Default Form Submission
e.preventDefault();
var target = e.target || e.srcElement;
var i = 0;
var message = '';
// Loop Through All Input Fields
for(i = 0; i < target.length; ++i) {
// Check to make sure it's a value. Don't need to include Buttons
if(target[i].type != 'text' && target[i].type != 'textarea') {
// Skip to next input since this one doesn't match our rules
continue;
}
// Add Input Name and value followed by a line break
message += target[i].name + ': ' + target[i].value + " ";
}
// Modify the hidden body input field that is required for the mailto: scheme
target.elements["body"].value = message;
// Submit the form since we previously stopped it. May cause recursive loop in some browsers? Should research this.
this.submit();
}
</script>
</html>
Styles.css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
color: #384047;
}
form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
background: #f4f7f8;
border-radius: 8px;
}
h1 {
margin: 0 0 30px 0;
text-align: center;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="number"],
input[type="spinner"],
textarea,
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}
input[type="radio"],
input[type="checkbox"] {
margin: 0 4px 8px 0;
}
select {
padding: 6px;
height: 32px;
border-radius: 2px;
}
#submit {
padding: 19px 39px 18px 39px;
color: #FFF;
background-color: #4bc970;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 45%;
border: 1px solid #3ac162;
border-width: 1px 1px 3px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
}
#reset {
align: right;
padding: 19px 39px 18px 39px;
color: #FFF;
background-color: #ff0000;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 45%;
border: 1px solid #ff0000;
border-width: 1px 1px 3px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
}
fieldset {
margin-bottom: 30px;
border: none;
}
legend {
font-size: 1.4em;
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 8px;
}
label.light {
font-weight: 300;
display: inline;
}
.number {
background-color: #5fcf80;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 100%;
}
@media screen and (min-width: 480px) {
form {
max-width: 480px;
}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.