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.

Expert Solution

index.html:

<!DOCTYPE html>

<html>

<head>

<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>

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

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

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

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

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

</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 2 years ago

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

Create a Weather API.(ANY LANUGUAGE). " that pulls out information from web and stores the data...

Create a Weather API.(ANY LANUGUAGE). " that pulls out information from web and stores the data in back end. in which users can enter location: city or zip code to get the weather of that city or state. weather info should be in degree farenhit and centigrade. it should show the images as you see in you phone for weather and speed, etc. and it should change picture according to weather. for example, rain, cloudy, sunny, night, thunder. SHOW THE...

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...