TUẦN 12: THỰC HÀNH THIẾT KẾ BIỂU MẪU HTML VỚI
<body>
<center>
<form name=lcm_gcd>
<table border=1>
<tr><td colspan="=2" align="center">Tính ước chung bội chung</td><tr>
<tr>
<td width=200> Số thứ 1 <br> <input type="text" name="a"> </td>
<td width=200> Số thứ 2 <br> <input type="text" name="b"> </td>
</tr>
<tr>
<td colspan=2 align=center><input type="button" value= "Tính"
onClick="getLCM()"></td>
</tr>
<tr>
<td> Bội chung nhỏ nhất <br> <input type="text" name="lcmA">
</td>
<td> Ước chung lớn nhất <br> <input type="text" name="gcdA"> </td>
</tr>
</table>
</form>
</center>
</body>
</html>
Thực hành 2: Lựa chọn hình và tính diện tích hình được chọn
Hình 12-2: Chọn hình tính hiển thị diện tích hình được chọn Hướng dẫn:
Sử dụng form, select tag, input type text để thiết kế giao diện theo hình.
Chọn vào nút select tag sổ ra các lựa chọn .
Kết quả đạt được của phần thực hành: vận dụng các thẻ html, css thiết form kế giao diện, hiểu javascript để thao tác xử lý trên form.
CODE THAM KHẢO
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Area Calculator</title>
<script language="""JavaScript">
<!-- Begin function doArea(num)
{
switch(num) {
case 0 : return (""); break;
case 1 : var length = prompt("Nhập cạnh của hình vuông:", "");
length = length * length;
return (length); break;
case 2 : var width = prompt("Nhập cạnh của tam giác:", "");
var height = prompt("Nhập chiều cao của tam giác:", "");
return (width * height / 2); break;
case 3 : var width = prompt("Nhập chiều dài của hình chữ nhật:", "");
var height = prompt("Nhập chiều cao của hình chữ nhật:", "");
return (width * height); break;
case 4 : var radius = prompt("Nhập bán kính của hình tròn: ", "");
return (Math.PI * Math.pow(radius, 2)); break;
case 5 : var radius = prompt("Nhập bán kính của hình elip:", 0);
return (4 * Math.PI * (Math.pow(radius, 2))); break;
} }
// End -->
</script>
</head>
<body>
<center>
<form name="calcarea">Tính diện tích của <table border="1">
<tr> <td> <select name "shape" size = "1" onChange="calcarea.area.value = doArea(selectedIndex);">
<option> Chọn lựa </option>
<option value="square">Hình vuông</option>
<option value="triangle">Hình tam giác </option>
<option value="rectangle">Hình chữ nhật </option>
<option value="circle">Hình tròn </option>
<option value="sphere">Hình ovan </option>
</select>
</td>
<td> <input type="text" name="area" size="20"> </td>
</tr>
</table>
</form>
</body>
</html>
Thực hành 3: Sinh viên hoàn thành bài tập theo hình sau:
Hình 12-3: Form chọn sở thích.
Hướng dẫn:
- Chọn sở thích sổ ra lựa chọn: Bơi lội, Võ Thuật và chọn sở thích.
- Khi chọn Bơi Lội bên dưới có div chứa các check bõ Bơi Bướm, Bơi Sải, Bơi Chó.
- Khi chọn Võ Thuật xuất hiện Karate, Judo.
- Khi nhấn vào radio Chọn câu hỏi combbox chọn câu hỏi sẽ được chọn sổ ra danh sách các câu hỏi.
- Khi nhấn vào nhập câu hỏi thì combobox chọn câu hỏi bị mờ (không chọn được) và focus vào nhập câu hỏi.
- Sử dụng các thành phần html form, radio, select, checkbox, input type text, thẻ HR.
Kết quả đạt được: Sinh vận dụng được các thẻ html cơ bản hoàn thành giao diện và cách sử dụng javascript để xử lý theo yêu cầu.
CODE THAM KHẢO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Combo-box & Radio button</title>
<script>
function changeCheckBox(cboSoThich) {
var sSoThich = cboSoThich.value;
//alert(sSoThich);
var s;// chuỗi trung gian để phát sinh mã HTML hiển thị các check-box switch (sSoThich)
{
case 'boi_loi':
s = phatSinhCheckBoxBoiLoi();
break;
case 'vo_thuat':
s = phatSinhCheckBoxVoThuat();
break;
default:
s = ''; // không chọn sở thích, không có check-box nào break;
}
// phát sinh mã HTML để hiển thị các check box tương ứng với từng lựa chọn sở thích var objCheckBoxHTML = document.getElementById('checkBoxHTML');
//alert(objCheckBoxHTML + ': ' + objCheckBoxHTML.innerHTML);
objCheckBoxHTML.innerHTML = s;
}
function phatSinhCheckBoxBoiLoi() {
var kq = '<input name="chk1" type="checkbox" value="buom" />Bơi bướm' + '<input name="chk2" type="checkbox" value="sai" />Bơi sải' +
'<input name="chk3" type="checkbox" value="cho" />Bơi chó';
return kq;
}
function phatSinhCheckBoxVoThuat() {
var kq = '<input name="chk1" type="checkbox" value="karate" />Karate' + '<input name="chk2" type="checkbox" value="judo" />Judo';
return kq;
}
// Lưu ý: chọn combo-box item bằng chuột và bằng phím (phải nhấn Enter để phát sinh sự kiện Change)
function chageForRadio(objRadio) {
//alert(objRadio.value)
var cboCauHoi = document.form1.cboCauHoi;
var txtCauHoi = document.form1.txtCauHoi;
switch (objRadio.value) {
case 'chon':
cboCauHoi.disabled = false;
txtCauHoi.readOnly = true;
cboCauHoi.focus(); // lưu ý break;
case 'nhap':
cboCauHoi.disabled = true;
txtCauHoi.readOnly = false;
txtCauHoi.focus(); // lưu ý txtCauHoi.select();
break;
default:
break;
} }
</script>
</head>
<body>
<form action="xuly.php" method="get" name="form1">
Sở thích:
<select name="cboSoThich" onchange="changeCheckBox(this);">
<option value='boi_loi'>Bơi lội</option>
<option value='vo_thuat'>Võ thuật</option>
<option value=''>Chọn sở thích</option>
</select>
<div id="checkBoxHTML">
<input name="chk1" type="checkbox" value="buom" />Bơi bướm <input name="chk1" type="checkbox" value="buom" />Bơi bướm <input name="chk2" type="checkbox" value="sai" />Bơi sải </div>
<br /><hr /><br />
<input name="rdTraLoi" type="radio" value="chon" checked="checked" onclick="chageForRadio(this);"
/>Chọn câu hỏi
<input name="rdTraLoi" type="radio" value="nhap" onclick="chageForRadio(this);"/>Nhập câu hỏi <br />
Câu hỏi:
<select name="cboCauHoi">
<option value='-1'>Chọn câu hỏi</option>
<option value='1'>Câu hỏi 1...</option>
<option value='2'>Câu hỏi 2...</option>
</select>
<input name="txtCauHoi" type="text" value="Nhập câu hỏi" readonly="readonly"/>
</form>
</body>
</html>