Ví dụ đơn giản CSS, Java script, HTML tạo một trang đơn giản


Ví dụ đơn giản CSS, Java script, HTML tạo một trang đơn giản
1. Trang đơn gian chưa có css


<!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>
<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>
<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 >&nbsp;</td>
    <td align="left" class="result" id="results" >&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

2. Bổ sung thêm css như sau


/* 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;
}

Hình nút nhấn

Chúc vui vẻ

Advertisements

Phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s