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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
To start with, you will need to define your page background color like so:
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
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
Ah, well that is handled within your HTML code and there are several methods you can use. The one I prefer is to use within the context of a form is the <label> tag.
If working with labeling items outside of a form, you would use either a <caption> within a <table> element or some other text-based HTML such as <p> or heading tag.
I would recommend reviewing HTML tags and their attributes. I prefer W3Schools for covering the most common uses of most languages.
<label>New Password</label>
<input name="pass1" type="password" id="pass1" title="Use this form to create new password for user: XXXX YYYYYYY" />
<label>Confirm Password</label>
<input name="pass2" type="password" id="pass2" title="Confirm password" />
If working with labeling items outside of a form, you would use either a <caption> within a <table> element or some other text-based HTML such as <p> or heading tag.
I would recommend reviewing HTML tags and their attributes. I prefer W3Schools for covering the most common uses of most languages.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial