មេរៀនទី១១: Form Account – CSS

 

មេរៀនទី១១: បង្កើត Form Account – CSS 

1Web IT2 copy1- HTML

<!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=UTF-8″ />

<title>Designing Modern Web Forms</title>

</head>

<body>

<div id=”registration”>

<h2>Create an Account</h2>

<form id=”RegisterUserForm” action=”” method=”post”>

<fieldset>

<p>

<label for=”name”>Name</label>

<input id=”name” name=”name” type=”text” value=”” />

</p>

<p>

<label for=”tel”>Phone Number</label>

<input id=”tel” name=”tel” type=”tel” value=”” />

</p>

<p>

<label for=”email”>Email</label>

<input id=”email” name=”email” type=”email” value=”” />

</p>

<p>

<label for=”password”>Password</label>

<input id=”password” name=”password” type=”password” />

</p>

<p><input id=”acceptTerms” name=”acceptTerms” type=”checkbox” />

<label for=”acceptTerms”>

I agree to the <a href=””>Terms and Conditions</a> and <a href=””>Privacy Policy</a>

</label>

</p>

<p>

<button id=”registerNew” type=”submit”>Register</button>

</p>

</fieldset>

</form>

</div>

</body>

</html>

2.  CSS3

<style type=”text/css”>

/* css1 */

html, body, h1, form, fieldset, input {

margin: 0;

padding: 0;

border: none;

}

body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; }

#registration {

color: #fff;

background: #2d2d2d;

background: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0, rgb(60,60,60)),

color-stop(0.74, rgb(43,43,43)),

color-stop(1, rgb(60,60,60))

);

background: -moz-linear-gradient(

center bottom,

rgb(60,60,60) 0%,

rgb(43,43,43) 74%,

rgb(60,60,60) 100%

);

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

margin: 10px;

width: 430px;

}

#registration a {

color: #8c910b;

text-shadow: 0px -1px 0px #000;

}
#registration fieldset {
padding: 20px;

}

/* CSS2 */

input.text {

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

border:solid 1px #444;

font-size: 14px;

width: 90%;

padding: 7px 8px 7px 30px;

-moz-box-shadow: 0px 1px 0px #777;

-webkit-box-shadow: 0px 1px 0px #777;

background: #ddd url(‘inputSprite.png’) no-repeat 4px 5px;

background: url(‘inputSprite.png’) no-repeat 4px 5px, -moz-linear-gradient(

center bottom,

rgb(225,225,225) 0%,

rgb(215,215,215) 54%,

rgb(173,173,173) 100%

);

background:  url(‘inputSprite.png’) no-repeat 4px 5px, -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0, rgb(225,225,225)),

color-stop(0.54, rgb(215,215,215)),

color-stop(1, rgb(173,173,173))

);

color:#333;

text-shadow:0px 1px 0px #FFF;

}

/*CSS3*/

input#email {

background-position: 4px 5px;

background-position: 4px 5px, 0px 0px;

}
input#password {
background-position: 4px -20px;
background-position: 4px -20px, 0px 0px;

}

input#name {

background-position: 4px -46px;

background-position: 4px -46px, 0px 0px;

}

input#tel {

background-position: 4px -76px;

background-position: 4px -76px, 0px 0px;

}

#registration h2 {

color: #fff;

text-shadow: 0px -1px 0px #000;

border-bottom: solid #181818 1px;

-moz-box-shadow: 0px 1px 0px #3a3a3a;

text-align: center;

padding: 18px;

margin: 0px;

font-weight: normal;

font-size: 24px;

font-family: Lucida Grande, Helvetica, Arial, sans-serif;

}

#registerNew {

width: 203px;

height: 40px;

border: none;

text-indent: -9999px;

background: url(‘createAccountButton.png’) no-repeat;

cursor: pointer;

float: right;

}

#registerNew:hover { background-position: 0px -41px; }

#registerNew:active { background-position: 0px -82px; }

#registration p {

position: relative;

}

fieldset label.infield /* .infield label added by JS */ {

color: #333;

text-shadow: 0px 1px 0px #fff;

position: absolute;

text-align: left;

top: 3px !important;

left: 35px !important;

line-height: 29px;

}

</style>
1