Solved

make small changes to password form

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

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

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

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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 …

831 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