លំហាត់ CSS-Forms និង User

លំហាត់ CSS-Forms និង User
លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
aលំហាត់ទី១ បង្កើត form ប្រើកូដ CSS
aសរសេរកូដ
<form method=”post” action=”example1.html”>
<p>What is your name?
<br /><input type=”text” name=”name” id=”name” /></p>
<p>Select your favorite color:
<br /><select name=”color” id=”color”>
<option value=”blue”>blue</option>
<option value=”red”>red</option>
<option value=”green”>green</option>
<option value=”yellow”>yellow</option>
</select></p>
<p>Are you male or female?<br />
<input type=”radio” name=”sex” id=”male” value=”male” /> Male
<br />
<input type=”radio” name=”sex” id=”female” value=”female” />
Female
</p>
<p>Comments:<br />
<textarea name=”comments” id=”comments” cols=”30″ rows=”4″>
</textarea></p>
<p><input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Submit” /></p>
</form>
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
aសរសេរកូដ
<input type=”text” name=”name” id=”name” />
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?
aសរសេរកូដ
<form method=”post” action=”fields.html”>
<p>What is your name?<br />
<input type=”text” name=”name” id=”name” /></p>
<p><input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Submit” /></p>
</form>
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;
}
ainput {
color: #00008B;
background-color: #ADD8E6;
border: 1px inset #00008B;
width: 200px;
}

លំហាត់ទី៣​​ ធ្វើយ៉ាងណាដើម្បីបញ្ឈប់ ការបង្កើតបន្ថែម form ពេលដែលមាន Space និង  line breaks?
aសរសេរកូដ
Your email address:
<form method=”post” action=”inline.html”>
<input type=”text” name=”name” id=”name” />
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Submit” />
</form>
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?

aសរសរកូដ
.btn {
background-color: transparent;
border: 0;
padding: 0;
}
លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បីធ្វើអោយច្បាស់ ថាអ្នកប្រើប្រាស់ជា មួយ Text តែប៉ុណ្ណោះ
a
សរសេរកូដ
<form method=”post” action=”textonly.html”>
<table>
<tr>
<td><label for=”fullname”>Name:</label></td>
<td><input type=”text” name=”fullname” id=”fullname”
class=”txt” /></td>
</tr>
<tr>
<td><label for=”email”>Email Address:</label></td>
<td><input type=”text” name=”email” id=”email”
/></td>
</tr>
<tr>
<td><label for=”password1″>Password:</label></td>
<td><input type=”password” name=”password1″ id=”password1″
class=”txt” /></td>
</tr>
<tr>
<td><label for=”password2″>Confirm Password:</label></td>
<td><input type=”password” name=”password2″ id=”password2″
class=”txt” /></td>
</tr>
<tr>
<td><label for=”level”>Membership Level:</label></td>
<td><select name=”level”>
<option value=”silver”>silver</option>
<option value=”gold”>gold</option>
</select></td>
</tr>
</table>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Sign Up!” />
</p>
</form>
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 ជំនួស តារាង?  
aសរសេរកូដ
<!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>
<title>Table-free form layout</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”tablefree.css” />
</head>
<body>
<h1>User Registration Form</h1>
<form method=”post” action=”tablefree.html”>
<p>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname”
/>
</p>
<p>
<label for=”email”>Email Address:</label>
<input type=”text” name=”email” id=”email” />
</p>
<p>
<label for=”password1″>Password:</label>
<input type=”password” name=”password1″ id=”password1″
class=”txt” />
</p>
<p>
<label for=”password2″>Confirm Password:</label>
<input type=”password” name=”password2″ id=”password2″
class=”txt” />
</p>
<p>
<label for=”level”>Membership Level:</label>
<select name=”level”>
<option value=”silver”>silver</option>
<option value=”gold”>gold</option>
</select>
</p>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Sign Up!” />
</p>
</form>
</body>
</html>
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;
}
a<form method=”post” action=”textonly.html”>
<table>
<tr>
<td><label for=”fullname”>Name:</label></td>
<td><input type=”text” name=”fullname” id=”fullname”
class=”txt” /></td>
</tr>
<tr>
<td><label for=”email”>Email Address:</label></td>
<td><input type=”text” name=”email” id=”email”
/></td>
</tr>
<tr>
<td><label for=”password1″>Password:</label></td>
<td><input type=”password” name=”password1″ id=”password1″
class=”txt” /></td>
</tr>
<tr>
<td><label for=”password2″>Confirm Password:</label></td>
<td><input type=”password” name=”password2″ id=”password2″
class=”txt” /></td>
</tr>
<tr>
<td><label for=”level”>Membership Level:</label></td>
<td><select name=”level”>
<option value=”silver”>silver</option>
<option value=”gold”>gold</option>
</select></td>
</tr>
</table>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Sign Up!” />
</p>
</form>
លំហាត់ទី៧ ធ្វើយ៉ាងណាដើម្បីគូស group ដែលមាន field ទំនាក់ទំនងគ្នា?
aសរសេរកូដ
<form method=”post” action=”fieldset.html”>
<fieldset>
<legend>Personal Information</legend>
<p>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname”
/>
</p>
<p>
<label for=”email”>Email Address:</label>
<input type=”text” name=”email” id=”email” />
</p>
<p>
<label for=”password1″>Password:</label>
<input type=”password” name=”password1″ id=”password1″
class=”txt” />
</p>
<p>
<label for=”password2″>Confirm Password:</label>
<input type=”password” name=”password2″ id=”password2″
class=”txt” />
</p>
</fieldset>
<fieldset>
<legend>Address Details</legend>
<p>
<label for=”address1″>Address line one:</label>
<input type=”text” name=”address1″ id=”address1″
/>
</p>
<p>
<label for=”address2″>Address line two:</label>
<input type=”text” name=”address2″ id=”address2″
/>
</p>
<p>
<label for=”city”>Town / City:</label>
<input type=”text” name=”city” id=”city” />
</p>
<p>
<label for=”zip”>Zip / Post code:</label>
<input type=”text” name=”zip” id=”zip” />
</p>
</fieldset>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Sign Up!” />
</p>
</form>
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;
}
a<fieldset>
<legend>Personal Information</legend>
<p>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname”
/>
</p>
<p>
<label for=”email”>Email Address:</label>
<input type=”text” name=”email” id=”email” />
</p>
<p>
<label for=”password1″>Password:</label>
<input type=”password” name=”password1″ id=”password1″
class=”txt” />
</p>
<p>
<label for=”password2″>Confirm Password:</label>
<input type=”password” name=”password2″ id=”password2″
class=”txt” />
</p>
</fieldset>

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

aសរសេរកូដ

<fieldset>
<legend><span>P</span>ersonal
Information</legend>
<p>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname”
accesskey=”p” />
</p>
.akey {
text-decoration: underline;
}
លំហាត់ទី៩ ធ្វើយ៉ាងណាដើម្បីប្រើព៌ណ  colored highlight ខុសគ្នា ក្នុងការជ្រើសរើស menu មួយ?
aសរសេរកូដ
<form method=”post” action=”example8.html”>
<p>
<label for=”color”>Select your favorite color:</label>
<select name=”color” id=”color”>
<option value=”">Select One</option>
<option value=”blue”>blue</option>
<option value=”red”>red</option>
<option value=”green”>green</option>
<option value=”yellow”>yellow</option>
</select>
</p>
<p>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Send!” />
</p>
</form>

.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
aសរសេរកូដ
<form method=”post” action=”spreadsheet.html”>
<table summary=”This table contains a form to
input the yearly income for years 1999 through 2002″>
<caption>Complete the Yearly Income 1999 – 2002</caption>
<tr>
<th></th>
<th scope=”col”>1999</th>
<th scope=”col”>2000</th>
<th scope=”col”>2001</th>
<th scope=”col”>2002</th>
</tr>
<tr>
<th scope=”row”>Grants</th>
<td><input type=”text” name=”grants1999″ id=”grants1999″ />
</td>
<td><input type=”text” name=”grants2000″ id=”grants2000″ />
</td>
<td><input type=”text” name=”grants2001″ id=”grants2001″ />
</td>
<td><input type=”text” name=”grants2002″ id=”grants2002″ />
</td>
</tr>
<tr>
<th scope=”row”>Donations</th>
<td><input type=”text” name=”donations1999″ id=”donations1999″
/></td>
<td><input type=”text” name=”donations2000″ id=”donations2000″
/></td>
<td><input type=”text” name=”donations2001″ id=”donations2001″
/></td>
<td><input type=”text” name=”donations2002″ id=”donations2002″
/></td>
</tr>
<tr>
<th scope=”row”>Investments</th>
<td><input type=”text” name=”investments1999″
id=”investments1999″ /></td>
<td><input type=”text” name=”investments2000″
id=”investments2000″ /></td>
<td><input type=”text” name=”investments2001″
id=”investments2001″ /></td>
<td><input type=”text” name=”investments2002″
id=”investments2002″ /></td>
</tr>
<tr>
<th scope=”row”>Fundraising</th>
<td><input type=”text” name=”fundraising1999″
id=”fundraising1999″ /></td>
<td><input type=”text” name=”fundraising2000″
id=”fundraising2000″ /></td>
<td><input type=”text” name=”fundraising2001″
id=”fundraising2001″ /></td>
<td><input type=”text” name=”fundraising2002″
id=”fundraising2002″ /></td>
</tr>
<tr>
<th scope=”row”>Sales</th>
<td><input type=”text” name=”sales1999″ id=”sales1999″ /></td>
<td><input type=”text” name=”sales2000″ id=”sales2000″ /></td>
<td><input type=”text” name=”sales2001″ id=”sales2001″ /></td>
<td><input type=”text” name=”sales2002″ id=”sales2002″ /></td>
</tr>
<tr>
<th scope=”row”>Miscellaneous</th>
<td><input type=”text” name=”misc1999″ id=”misc1999″ /></td>
<td><input type=”text” name=”misc2000″ id=”misc2000″ /></td>
<td><input type=”text” name=”misc2001″ id=”misc2001″ /></td>
<td><input type=”text” name=”misc2002″ id=”misc2002″ /></td>
</tr>
<tr>
<th scope=”row”>Total</th>
<td><input type=”text” name=”total1999″ id=”total1999″ /></td>
<td><input type=”text” name=”total2000″ id=”total2000″ /></td>
<td><input type=”text” name=”total2001″ id=”total2001″ /></td>
<td><input type=”text” name=”total2002″ id=”total2002″ /></td>
</tr>
</table>
<p><input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Add Data” /></p>
</form>
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 ដែលអ្នក ប្រើប្រាស់ ចុចក្នុងបាន?

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

Related product you might see:

Share this product :
Labels:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. ទឹកអំពៅ - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger