asked on make small changes to password form
Working on the grey form
I want the black form
what changes need to be made
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#form1 {
padding:10px;
width: 450px;
margin:auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
color: #FFFFFF;
background-color: #666666;
/*text-align: center;*/
}
#text-label {
width: 240px;
margin: auto;
text-align: center;
}
#pass1, #pass2 {
margin: auto;
width: 440px;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFF00;
background-color: #000000;
padding-top:4px;
padding-bottom:4px;
margin-top:4px;
margin-bottom:4px;
border:none;
}
#submit1 {
padding:5px;
display: block;
margin-top: 6px;
margin-right: auto;
margin-left: auto;
font-size: 10px;
}
.ctrText {
text-align: center;
}
</style>
</head>
<body>
<form action="process.php" method="post" id="form1">
<div class="ctrText"><label for=pass1>Use this form to create new password for user: XXXX YYYYYYY:</label><br>
Account corresponds to email d________.com
</div>
<input name="pass1" type="password" id="pass1" title="Use this form to create new password for user: XXXX YYYYYYY" />
<input name="pass2" type="password" id="pass2" title="Confirm password" />
Use only letters, numbers and underscore...
<label for=pass2>Confirm password:</label>
<input id="submit1" type="submit" value="Generate new password" />
</form>
</body>
</html>
CSS
Last Comment
rgb192
ASKER
new password should be above textbox1
and
confirm password should be above textbox2
and
confirm password should be above textbox2
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
thanks
body {
/* This creates a dark grey background*/
background-color: #333;
}
or use:
body {
/*This creates a black background*/
background-color:#000000;
}
Once this is done, you can then change your Form1 attributes by altering your existing background-color to the same #333 or #000000 like so:
#form1 {
padding:10px;
width: 450px;
margin:auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
color: #FFFFFF;
/* Change this to determine your form background color */
background-color: #333;
border: thin solid #FFF;
}
The altered file has been attached as a plain HTML file which you can view in your browser. You may also notice that I have added a border element to the form, but this is entirely optional and can be removed if you desire.
I would also recommend a different change beyond this minor change since it appears that you are beginning to build a multi-page website. Industry best practices require most, if not all, style marks to be moved to an external CSS file which is called whenever a page loads. This practice allows you to alter all style elements with one modification across an entire site. Once you have your <stylename>.css file built, you can then call it from your HTML file using <link href="../<stylename>.css" rel="stylesheet" type="text/css" /> in your <head> element.
For more information about using CSS, please refer to w3schools.com or w3.org
Untitled-1.html