Solved

make small changes to password form

Posted on 2012-12-22
4
252 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 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