CSS
CSS

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>

Open in new window

LVL 1

rgb192Asked: 2012-12-22

Who is Participating?

LVL 3

wadehultsCommented: 2012-12-22

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.

LVL 3

wadehultsCommented: 2012-12-22

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