Question

In: Computer Science

Responsive web form: Create a well laid out responsive contact me web form saved as index.html...

Responsive web form:

Create a well laid out responsive contact me web form saved as index.html with the following labeled fields:

First name, last name, company name, email address, phone number, and comments, submit button

Validate the form so that the required fields are First name, Last name, and email address. Once validated, write the data to a results page saved as results.html.

The web pages must automatically switch between device types or browser sizes or screen resolutions. Text size, page layout, image dimensions, etc. must change across those device types and browser sizes.

Solutions

Expert Solution

index.html:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {font-family: Arial, Helvetica, sans-serif;}

* {box-sizing: border-box;}

input[type=text], select, textarea {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

margin-top: 6px;

margin-bottom: 16px;

resize: vertical;

}

input[type=submit] {

background-color: #4CAF50;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

}

input[type=submit]:hover {

background-color: #45a049;

}

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

}

</style>

</head>

<body>

<h3 style="text-align:center;font-size:36px">Contact Form</h3>

<div class="container">

<form action="./results.html">

<label for="fname">First Name</label>

<input type="text" id="fname" name="firstname" required="true" placeholder="Your name..">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lastname" required="true" placeholder="Your last name..">

<label for="cname">Company Name</label>

<input type="text" id="cname" name="companyname" placeholder="Your Company name..">

<label for="email">Email Address</label>

<input type="text" id="email" name="email" required="true" placeholder="Your email address..">

<label for="phone">Phone Number</label>

<input type="text" id="phone" name="phone" placeholder="Your phone number..">

<label for="comments">Comments</label>

<textarea id="comments" name="comments" placeholder="Write your comments.." style="height:100px"></textarea>

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

</form>

</div>

</body>

</html>

results.html:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<script>
function myFunction() {
const urlParams = new URLSearchParams(window.location.search);
document.getElementById('firstName').innerHTML = urlParams.get('firstname');
document.getElementById('lastName').innerHTML = urlParams.get('lastname');
document.getElementById('emailId').innerHTML = urlParams.get('email');
}
</script>
</head>
<body onload="myFunction()">

<h3 style="text-align:center;font-size:36px">Contact Form</h3>

<div class="container">
<h2>Results</h2>
<h4>First Name: <span id="firstName"></span></h4>
<h4>Last Name: <span id="lastName"></span></h4>
<h4>Email ID: <span id="emailId"></span></h4>
</div>

</body>
</html>

venereology answered 1 year ago
Next > < Previous

Related Solutions

After learning the web course, write out the main steps about create a dynamic web with...
After learning the web course, write out the main steps about create a dynamic web with various different elements. kindly write main steps with various different element.
Using PHP and MySQL Create a simple web form with at least 5 fields Include validation...
Using PHP and MySQL Create a simple web form with at least 5 fields Include validation and error messages Create a MySQL Database Create a table to store submissions from the form Only insert new data into the database when all validation is passed Use PHP to create an HTML table showing all the content of the database   New submissions should appear in table
Python create a function tryhard and print out the dictionary as a string form. For example...
Python create a function tryhard and print out the dictionary as a string form. For example def tryhard(d:dict): #Code here input: d = {'first': {}, 'second': {'1': {'move'}, '0': {'move', 'slow'}}, 'third': {'1': {'stop'}}} output = " first movie: [ ]\n third movie: [('1', ['stop'])]\n second movie: [('0', ['slow', 'move']), ('1', ['move'])]\n"
Long, straight conductors with square cross section each carrying current I, are laid side-by-side to form arn infinite current sheet with current directed out of the plane of the page (see the figure (Figure 1))
Long, straight conductors with square cross section each carrying current I, are laid side-by-side to form arn infinite current sheet with current directed out of the plane of the page (see the figure (Figure 1)). A second infinite current sheet is a distance d below the first and is parallel to it. The second sheet carries current into the plane of the page. Each sheet has n conductors per unit length. Part B Find the direction of the net magnetic field at...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT