Solved

Use only letters, numbers, and the underscore. Password must be between 4 and 20 characters long.

Posted on 2012-12-23
3
264 Views
Last Modified: 2013-01-06
final picture

the code makes this



change the text to match the color of the final picture

want line
Use only letters, numbers, and the underscore. Password must be between 4 and 20 characters long.

<!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>
body {
  background:#111;
}
#form1 {
  padding:10px;
  width: 450px;
  margin:auto;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size:13px;
  color: #FFFFFF;
  /* Change #1 */
  background-color: #111;    /*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>
<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"  />     
<input id="submit1" type="submit" value="Generate new password" />    
</form>



</body>
</html>

Open in new window

0
Comment
Question by:rgb192
3 Comments
 
LVL 4

Expert Comment

by:brendonfeeley
ID: 38717283
Try this:

<!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>
body {
  background:#111;
}
#form1 {
  padding:10px;
  width: 450px;
  margin:auto;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size:13px;
  color: #7d7d7d;
  /* Change #1 */
  background-color: #111;    /*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>
<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"  /><br/>
<div class="ctrText">Use only letters, numbers, and the underscore. Password must be between 4 and 20 characters long.</div>
<input id="submit1" type="submit" value="Generate new password" />    
</form>



</body>
</html>

Open in new window

0
 
LVL 15

Accepted Solution

by:
StealthyDev earned 500 total points
ID: 38719747
Hi,

I've altered some of your HTML code to match your final picture. Please find the code below.

Thanks,
Senthur

<!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>
body {
	background: #111;
	color: #979797;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
}

#form1 {
	padding: 10px;
	width: 450px;
	margin: auto;
}

#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;
}

.formContent {
	text-align: left;
}
</style>

</head>


<body>
	<div class="ctrText">
		<label for="pass1">Use this form to create new password for
			user: XXXX YYYYYYY:</label> <br /> <br> Account corresponds to email
			d________.com <br /> <br />
		<div class="formContent">
			<form action="process.php" method="post" id="form1">
				<label for="pass1">New Password</label> <input name="pass1"
					type="password" id="pass1"
					title="Use this form to create new password for user: XXXX YYYYYYY" />
				<label for="pass2">Confirm Password</label> <input name="pass2"
					type="password" id="pass2" title="Confirm password" />
				<div>Use only letters, numbers, and the underscore. Password
					must be between 4 and 20 characters long.</div>
				<br /> <input id="submit1" type="submit"
					value="Generate new password" />
			</form>
		</div>
	</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:rgb192
ID: 38749369
thanks for great css
0

Featured Post

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Suggested Solutions

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.
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 to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

773 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