How would I make the following HTML code viewable across multiple screens. I wan
ID: 3849948 • Letter: H
Question
How would I make the following HTML code viewable across multiple screens. I want it to look the same on all desktop's, tablets, and cell phones.
<!DOCTYPE html>
<html>
<head>
<body>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="ex.css">
<script src="java.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(document).ready(function(){
$('#datepicker').on('change', function(){
var dateThis = $(this).val();
$('#dpicker_name').text(dateThis);
});
});
</script>
</head>
<h1> Registration </h1>
<nav>
<ul>
<li><a href="#">Favorites</a></li><br/>
<li><a href="http://localhost/proj1/test.html">Home</a></li><br/>
<li><a href="#">Orders to approve</a></li><br/>
<li><a href="#">Invoice History</a></li><br/>
<li><a href="#">Quotes</a></li><br/>
<li><a href="#">Quick Order</a></li><br/>
</ul>
</nav>
<form name="myform" action="" method="GET">
<label for="Uname"> </label>
<input id="Uname" name="Uname" placeholder="Username" type="text" />
<label for="Password"> </label>
<input id="Password" name="Password" placeholder="Password" type="password" /><br/><br/>
<label for="RpPassword"> </label>
<input id="RpPassword" name="Repeat Password" placeholder="Repeat Password" type="password" />
<label for="Fname"> </label>
<input id="Fname" name="Fname" placeholder="Firstname" type="text" /><br/><br/>
<label for="lname"> </label>
<input id="Lname" name="Lname" placeholder="Last Name" type="text" />
<label for="Email"> </label>
<input id="Email" name="Email" placeholder="Email" type="text" /><br/><br/>
<label for="A1"> </label>
<input id="A1" name="A1" placeholder="Address 1" type="text" />
<label for="A2"> </label>
<input id="A2" name="A2" placeholder="Address 2 is optional" type="text" /><br/><br/>
<label for="State"> </label>
<input id="State" name="State" placeholder="State" type="text" />
<label for="City"> </label>
<input id="City" name="City" placeholder="City" type="text" /><br/><br/>
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="Zcode"> </label>
<input id="Zcode" name="Zcode" placeholder="Zip Code" type="text" /><br/><br/>
<label for="P#"> </label>
<input id="p#" name="P#" placeholder="(xxx)xxx-xxxx" type="text" />
<label for="Gender"> </label>
<input id="Gender" name="Gender" placeholder="Gender" type="text" /><br/><br/>
<label for="M.S"> </label>
<input id="M.S" name="M.S" placeholder="Marital Status" type="text" />
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br/>
<input type="radio" name="Marital Status" value="Single"> Single
<input type="radio" name="Marital Staus" value="Married"> Married<br/>
<input type="radio" name="Marital Status" value="widowed"> Widowed<br/><br/>
<label for="DOB"> </label>
<input type="text" placeholder="DOB" id="datepicker"><span id="dpicker"></span>
<input type="submit" value="submit" />
<input type="reset" value="reset">
</form>
</div>
</body>
</html>
Explanation / Answer
Html code...
<!DOCTYPE html>
<html>
<head>
<body>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="responsiveform.css">
<script src="java.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(document).ready(function(){
$('#datepicker').on('change', function(){
var dateThis = $(this).val();
$('#dpicker_name').text(dateThis);
});
});
</script>
</head>
<h1> Registration </h1>
<div>
<nav>
<ul>
<li><a href="#">Favorites</a></li><br/>
<li><a href="http://localhost/proj1/test.html">Home</a></li><br/>
<li><a href="#">Orders to approve</a></li><br/>
<li><a href="#">Invoice History</a></li><br/>
<li><a href="#">Quotes</a></li><br/>
<li><a href="#">Quick Order</a></li><br/>
</ul>
</nav>
</div>
<form name="myform" action="" method="GET">
<label for="Uname"> </label>
<input id="Uname" name="Uname" placeholder="Username" type="text" />
<label for="Password"> </label>
<input id="Password" name="Password" placeholder="Password" type="password" /><br/><br/>
<label for="RpPassword"> </label>
<input id="RpPassword" name="Repeat Password" placeholder="Repeat Password" type="password" />
<label for="Fname"> </label>
<input id="Fname" name="Fname" placeholder="Firstname" type="text" /><br/><br/>
<label for="lname"> </label>
<input id="Lname" name="Lname" placeholder="Last Name" type="text" />
<label for="Email"> </label>
<input id="Email" name="Email" placeholder="Email" type="text" /><br/><br/>
<label for="A1"> </label>
<input id="A1" name="A1" placeholder="Address 1" type="text" />
<label for="A2"> </label>
<input id="A2" name="A2" placeholder="Address 2 is optional" type="text" /><br/><br/>
<label for="State"> </label>
<input id="State" name="State" placeholder="State" type="text" />
<label for="City"> </label>
<input id="City" name="City" placeholder="City" type="text" /><br/><br/>
<select id="select" name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="Zcode"> </label>
<input id="Zcode" name="Zcode" placeholder="Zip Code" type="text" /><br/><br/>
<label for="P#"> </label>
<input id="p#" name="P#" placeholder="(xxx)xxx-xxxx" type="text" />
<label for="Gender"> </label>
<input id="Gender" name="Gender" placeholder="Gender" type="text" /><br/><br/>
<label for="M.S"> </label>
<input id="M.S" name="M.S" placeholder="Marital Status" type="text" />
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br/>
<input type="radio" name="Marital Status" value="Single"> Single
<input type="radio" name="Marital Staus" value="Married"> Married<br/>
<input type="radio" name="Marital Status" value="widowed"> Widowed<br/><br/>
<label for="DOB"> </label>
<input type="text" placeholder="DOB" id="datepicker"><span id="dpicker"></span>
<input type="submit" value="submit" />
<input type="reset" value="reset">
</form>
</div>
</body>
</html>
css file
body {
margin:0;
padding:0;
font-family: 'Roboto Slab', serif;
}
form{
width:70%;
margin:4% 15%;
}
/* Makes responsive fields. Sets size and field alignment.*/
input[type=text],[type=password]{
margin-bottom: 20px;
margin-top: 10px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #7ac9b7;
}
input[type=submit],[type=reset]
{
margin-bottom: 20px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #7ac9b7;
background-color: #4180C5;
color: aliceblue;
font-size:15px;
cursor:pointer;
}
#select {
margin-bottom: 20px;
margin-top: 10px;
width:100%;
padding: 15px;
border-radius:5px;
border:1px solid #7ac9b7;
text-align: center;
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.