We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Solved
make small changes to password form
Posted on 2012-12-22
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>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
2-
2
4 Comments
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
Active 1 day ago
new password should be above textbox1
and
confirm password should be above textbox2
and
confirm password should be above textbox2
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.
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
CSS3 Custom checkboxes
This article shows how to style the checkbox form element using only CSS.
Works in: Chrome, FF, Safari, Opera, IE9+
Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.
In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property
Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month9 days, 17 hours left to enroll
722 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.