មេរៀនទី១៩: លំហាត់ CSS-Forms និង User

លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
លំហាត់ទី១ បង្កើត form ប្រើកូដ CSS
 
សរសេរកូដ

What is your name?



Select your favorite color:


blue
red
green
yellow


Are you male or female?

Male



Female


Comments:

<br>

value=”Submit” />

form {
border: 1px dotted #aaaaaa;
padding: 3px 6px 3px 6px;
}
input {
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
select {
width: 100px;
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
textarea {
width: 200px;
height: 40px;
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
ដាក់ព៌ណក្នុង Form
 
សរសេរកូដ

input {
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
font: 0.9em Arial, Helvetica, sans-serif;
padding: 2px 4px 2px 4px;
width: 200px;
}

លំហាត់ទី២  ធ្វើយ៉ាងណាដើម្បីអនុវត្ត ស្ទាយខុសគ្នា ក្នុង form តែមួយប្រើកូដ CSS?
 
សរសេរកូដ

What is your name?



value=”Submit” />

form {
border: 1px dotted #aaaaaa;
padding: 3px 6px 3px 6px;
}
input.txt{
color: #00008B;
background-color: #ADD8E6;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
padding: 2px 4px 2px 4px;
}
 
input {
color: #00008B;
background-color: #ADD8E6;
border: 1px inset #00008B;
width: 200px;
}

លំហាត់ទី៣​​ ធ្វើយ៉ាងណាដើម្បីបញ្ឈប់ ការបង្កើតបន្ថែម form ពេលដែលមាន Space និង  line breaks?
 
សរសេរកូដ
Your email address:

value=”Submit” />

form {
display: inline;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
លំហាត់ទី៤ ធ្វើយ៉ាងណាដើម្បីប submit button ដូចជា Text?

 
សរសរកូដ
.btn {
background-color: transparent;
border: 0;
padding: 0;
}
លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បីធ្វើអោយច្បាស់ ថាអ្នកប្រើប្រាស់ជា មួយ Text តែប៉ុណ្ណោះ

សរសេរកូដ

Name:	class=”txt” />
Email Address:	/>
Password:	class=”txt” />
Confirm Password:	class=”txt” />
Membership Level:	silver gold

value=”Sign Up!” />

h1 {
font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
label {
font : bold 0.9em Arial, Helvetica, sans-serif;
}

លំហាត់ទី៦ ធ្វើយ៉ាងណាដើម្បីគូសពីរ form ជួរប្រើកូដ CSS ជំនួស តារាង?  
 
សរសេរកូដ

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>




content=”text/html; charset=iso-8859-1″ />

User Registration Form

Name:

/>


Email Address:



Password:

class=”txt” />


Confirm Password:

class=”txt” />


Membership Level:

silver
gold




value=”Sign Up!” />



h1 {
font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
form p {
clear: left;
margin: 0;
padding: 0;
padding-top: 5px;
}
form p label {
float: left;
width: 30%;
font: bold 0.9em Arial, Helvetica, sans-serif;
}
 

Name:

class=”txt” />



Email Address:

/>


Password:

class=”txt” />


Confirm Password:

class=”txt” />


Membership Level:

silver
gold





value=”Sign Up!” />

លំហាត់ទី៧ ធ្វើយ៉ាងណាដើម្បីគូស group ដែលមាន field ទំនាក់ទំនងគ្នា?
 
សរសេរកូដ

Personal Information

Name:
/>



Email Address:

Password:
class=”txt” />



Confirm Password:
class=”txt” />

Address Details

Address line one:
/>



Address line two:
/>



Town / City:




Zip / Post code:

value=”Sign Up!” />


h1 {
font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
form p {
clear: left;
margin: 0;
padding: 0;
padding-top: 5px;
}
form p label {
float: left;
width: 30%;
font: bold 0.9em Arial, Helvetica, sans-serif;
}
fieldset {
border: 1px dotted #61B5CF;
margin-top: 16px;
padding: 10px;
}
legend {
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #00008B;
background-color: #FFFFFF;
}
 

Personal Information

Name:
/>



Email Address:




Password:
class=”txt” />



Confirm Password:
class=”txt” />

លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បីធ្វើស្ទាយ Style  access key?

 
សរសេរកូដ

Personal
Information

Name:
accesskey=”p” />

.akey {
text-decoration: underline;
}
លំហាត់ទី៩ ធ្វើយ៉ាងណាដើម្បីប្រើព៌ណ  colored highlight ខុសគ្នា ក្នុងការជ្រើសរើស menu មួយ?
 
សរសេរកូដ

Select your favorite color:

Select One
blue
red
green
yellow





value=”Send!” />


.blue {
background-color: #ADD8E6;
color: #000000;
}
.red {
background-color: #E20A0A;
color: #ffffff;
}
.green {
background-color: #3CB371;
color: #ffffff;
}
.yellow {
background-color: #FAFAD2;
color: #000000;
}
លំហាត់ទី១០ មាន form មួយដែលអនុញ្ញាតអោយ Users បញ្ចូល ទិន្នន័យក្នុង spreadsheet
 
សរសេរកូដ

input the yearly income for years 1999 through 2002″>

Complete the Yearly Income 1999 – 2002

	1999	2000	2001	2002
Grants
Donations	/>	/>	/>	/>
Investments	id=”investments1999″ />	id=”investments2000″ />	id=”investments2001″ />	id=”investments2002″ />
Fundraising	id=”fundraising1999″ />	id=”fundraising2000″ />	id=”fundraising2001″ />	id=”fundraising2002″ />
Sales
Miscellaneous
Total

value=”Add Data” />

table.formdata {
border: 1px solid #5F6F7E;
border-collapse: collapse;
}
table.formdata th {
border: 1px solid #5F6F7E;
background-color: #E2E2E2;
color: #000000;
text-align: left;
font-weight: normal;
padding: 2px 4px 2px 4px;
margin: 0;
}
table.formdata td {
margin: 0;
padding: 0;
border: 1px solid #E2E2E2;
}
table.formdata input {
width: 80px;
padding: 2px 4px 2px 4px;
margin: 0;
border: none;
}
លំហាត់ទី១១  ធ្វើយ៉ាងណាដើម្បីប្រើ highlight form ដែលអ្នក ប្រើប្រាស់ ចុចក្នុងបាន?

 
បន្ថែមកូដខាងលើ នូវកូដខាងក្រោម
table.formdata input {
width: 80px;
padding: 2px 4px 2px 4px;
margin: 0;
border: 2px solid #ffffff;
}
.formdata input:focus {
border: 2px solid #000000;
}