1. Trang đơn gian chưa có css
[sourcecode language="html" wraplines="false"]
<!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>First test</title>
</head>
[/sourcecode]
[sourcecode language="javascript" wraplines="false"]
<script type="text/javascript">
function getBrowser()
{
document.getElementById('caption').innerHTML = navigator.appName;
}
function pressKey(datename)
{
if(!(event.keyCode >=47 && event.keyCode <= 57))
{
event.returnValue = false;
document.getElementById('msgBirthDate').innerHTML = 'Number only';
}
else
{
event.returnValue = true;
document.getElementById('msgBirthDate').innerHTML = '';
}
}
function nameChange()
{
if(frm.txtFullName.value == '')
{
document.getElementById('msgName').innerHTML = 'Name not null';
}
else
{
document.getElementById('msgName').innerHTML = '';
}
}
function addressChange()
{
if(frm.txtAddress.value == '')
{
document.getElementById('msgAddress').innerHTML = 'Address not null';
}
else
document.getElementById('msgAddress').innerHTML = '';
}
function educationChange()
{
if(frm.education.value == 0)
{
document.getElementById('msgEducation').innerHTML = 'Select education';
}
else
document.getElementById('msgEducation').innerHTML = '';
}
function dateChange()
{
if(frm.txtDay.value == '' || frm.txtMonth.value == '' || frm.txtYear.value == '')
{
document.getElementById('msgBirthDate').innerHTML = 'BirthDate not valid';
}
else
document.getElementById('msgBirthDate').innerHTML = '';
}
function apply()
{
if(frm.txtFullName.value == '')
document.getElementById('msgName').innerHTML = 'Name not null';
if(frm.txtAddress.value == '')
document.getElementById('msgAddress').innerHTML = 'Address not null';
if(frm.education.value == 0)
document.getElementById('msgEducation').innerHTML = 'Select education';
if(frm.txtDay.value == '' || frm.txtMonth.value == '' || frm.txtYear.value == '')
document.getElementById('msgBirthDate').innerHTML = 'BirthDate not valid';
if(frm.txtFullName.value != '' && frm.txtAddress.value != '' && frm.education.value != 0 && frm.txtDay.value != '' && frm.txtMonth.value != '' && frm.txtYear.value != '')
{
document.getElementById('results').innerHTML = 'FullName: '+ frm.txtFullName.value + ' <br/>' + 'Address: ' + frm.txtAddress.value + ' <br/>' + 'Education: ' + frm.education.value+ ' <br/>';
getBrowser();
}
}
</script>
[/sourcecode]
[sourcecode language="html" wraplines="false"]
<body>
<form name="frm" action="">
<table width="500" id='tbl'>
<caption id='caption' align="bottom">
Figure 01
</caption>
<tr>
<th colspan="2" scope="col">APPLICATION FORM </th>
</tr>
<tr>
<td class="captionText">Full name: </td>
<td >
<input name="txtFullName" type="text" class="txt" size="30" onkeyup="nameChange();"/>
<label id="msgName" class="msg"></label></td>
</tr>
<tr>
<td class="captionText">Address: </td>
<td ><input name="txtAddress" type="text" class="txt" id="txtAddress" size="30" onkeyup="addressChange();"/>
<label id="msgAddress" class="msg"></label></td>
</tr>
<tr>
<td class="captionText">BirthDate: </td>
<td ><input name="txtDay" type="text" class="txt" onkeypress="pressKey();" size="4" onkeyup="dateChange();"/>
-
<input name="txtMonth" type="text" class="txt" size="4" onkeypress="pressKey();" onkeyup="dateChange();"/>
-
<input name="txtYear" type="text" class="txt" size="10" onkeypress="pressKey();" onkeyup="dateChange();"/>
<label id="msgBirthDate" class="msg"></label></td>
</tr>
<tr>
<td class="captionText">Gender: </td>
<td><input name="gender" type="radio" class="txt" value="m" checked="checked" />
Male
<input name="gender" type="radio" class="txt" value="f" />
Female <label class="msg" id="msgGender"></label></td>
</tr>
<tr>
<td class="captionText">Education: </td>
<td >
<select class="txt" id="education" onchange="educationChange();">
<option value="0">----- Select one ------</option>
<option value="1">HighSchool</option>
<option value="2">University</option>
</select> <label id="msgEducation" class="msg"></label></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="btnApp" type="button" class="btnApply" onclick="apply();" /> </td>
</tr>
<tr>
<td > </td>
<td align="left" class="result" id="results" > </td>
</tr>
</table>
</form>
</body>
</html>
[/sourcecode]
2. Bổ sung thêm css như sau
[sourcecode language="css" wraplines="false"]
/* CSS Document */
body
{
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
color:black;
}
table
{
border: #E7E7E7 solid 1px;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}
table th
{
background-color:#FFFFCC;
color:#FF9F00;
font-size:large;
padding: 10px 10px 10px 10px;
}
table td
{
padding: 3px 3px 3px 3px;
}
table caption
{
color:#2A3F00;
font-size:12px;
font-style:italic;
}
.captionText
{
text-align:right;
width:40%;
}
.btnApply
{
background:url(../themes/images/btnApp.jpg);
background-repeat:no-repeat;
background-position:center;
height: 25px;
width: 70px;
border:none;
}
.result
{
background-color:#336600;
color:#FFFFFF;
font-style:italic;
}
.msg
{
color:#FF0000;
font-size:10px;
}
.txt
{
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
color:black;
padding: 3px 3px 3px 3px;
}
[/sourcecode]
Hình nút nhấn
Chúc vui vẻ
