Solved

make small changes to password form

Posted on 2012-12-22
4
254 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
[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
 
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

632 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