Solved

make small changes to password form

Posted on 2012-12-22
4
244 Views
Last Modified: 2012-12-22
current
desired
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>

Open in new window

0
Comment
Question by:rgb192
  • 2
  • 2
4 Comments
 
LVL 3

Expert Comment

by:wadehults
ID: 38716480
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
0
 

Author Comment

by:rgb192
ID: 38716483
new password should be above textbox1
and
confirm password should be above textbox2
0
 
LVL 3

Accepted Solution

by:
wadehults earned 500 total points
ID: 38716520
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.
<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"  />  

Open in new window


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

Author Closing Comment

by:rgb192
ID: 38716538
thanks
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now