Bài 21 form trong javascript

 

LAB 8: JAVASCRIPT

LÀM VIỆC VỚI ĐỐI TƯỢNG FORM

 

A – LÝ THUYẾT

I – LẤY GIÁ TRỊ CỦA CÁC PHẦN TỬ TEXT BOX, PASSWORD, TEXT AREA

1 – Cú pháp

v  Document.ten_form.ten_phan_tu.value

 

2 – Ví dụ minh họa

v  Code HTML:

<form name="frm">

            <input type="text" name="txt" />

            <input type="password" name="pass" />

            <textarea name="area"></textarea>

            <input type="submit" name="submit_name" value="Submit" />

</form>

v  Code Javascript:

<script language="javascript">

function getValue(){

            alert(document.frm.txt.value);

            alert(document.frm.pass.value);

            alert(document.frm.area.value);

}

</script>

 

II – LẤY GIÁ TRỊ CỦA PHẦN TỬ RADIO

1 – Cú pháp

v  Document.ten_form.ten_nut[vi_tri].value

v  Document.ten_form.ten_nut[vi_tri].checked

 

2 – Ví dụ minh họa

v  Code HTML:

<form name="frm" onsubmit="getValue();">

            <input type="radio" name="rd" value="HTML" /> HTML

            <input type="radio" name="rd" value="Javascript" /> Javascript

            <input type="submit" name="submit_name" value="Submit" />

</form>

 

v  Code Javascript:

<script language="javascript">

function getValue(){

            for(i=0; i<2; i++){

                        if(document.frm.rd[i].checked == true){

                                    alert(document.frm.rd[i].value);

                        }

            }

}

</script>

 

III – LẤY GIÁ TRỊ CỦA PHẦN TỬ CHECK BOX

1 – Cú pháp

v  Document.ten_form.ten_nut[vi_tri].value

v  Document.ten_form.ten_nut[vi_tri].checked

 

2 – Ví dụ minh họa

v  Code HTML:

<form name="frm" onsubmit="getValue();">

            <input type="checkbox" name="check" value="Item 01" /> Item 01

            <input type="checkbox" name="check" value="Item 02" /> Item 02

            <input type="checkbox" name="check" value="Item 03" /> Item 03

            <input type="submit" name="submit_name" value="Submit" />

</form>

v  Code Javascript:

<script language="javascript">

function getValue(){

            for(i=0; i<3; i++){

                        if(document.frm.check[i].checked == true){

                                    alert(document.frm.check[i].value);

                        }

            }

}

</script>

 

IV – LẤY GIÁ TRỊ CỦA PHẦN TỬ SELECT BOX

1 – Cú pháp

v  Document.ten_form.ten_phan_tu.selectedIndex

v  Document.ten_form.ten_phan_tu[Document.ten_form.ten_phan_tu.selectedIndex].value

 

2 – Ví dụ minh họa

v  Code HTML:

<form name="frm" onsubmit="getValue();">

            <select name="slt">

            <option value="Item 01">Item 01</option>

            <option value="Item 02">Item 02</option>

            <option value="Item 03">Item 03</option>

    </select>

    <input type="submit" name="submit_name" value="Submit" />

</form>

v  Code Javascript:

 

B – THỰC HÀNH

<html>

<head><title>html18</title>

<script language="javascript">

function getValue(){

alert(document.html18.rd[0].value);

}

</script>

</head>

<body >

<form name="html18" onsubmit="getValue();">

<input type="radio" checked="checked" name="rd" value="Yes"/> Yes <input type="radio" name="rd" value="No"/>No

<br>

<input type="submit" name="submit_name" value="submit" />

</form>

</body>

</html>

I – BÀI TẬP THỰC HÀNH

1 – Bài tập

Bài 1:

            Xây dựng Form đăng ký tài khoản cá nhân với các yêu cầu thiết kế và chức năng như file bai_tap_1.html

  • Hiển thị thông báo ngay trong mỗi trường nhập dữ liệu
  • Khi lựa chọn một trường nhập dữ liệu bất kỳ sẽ tự động xóa hết nội dung cũ để người dùng nhập dữ liệu mới

 

Bài 2:

            Xây dựng Form đăng ký tài khoản cá nhân nâng cao (phát triển từ bài tập 1) với các yêu cầu thiết kế và chức năng như file bai_tap_2.html

  • Bẫy lỗi các trường nhập dữ liệu (không được để trống)
  • Bẫy lỗi riêng với trường nhập username (từ 6 đến 12 ký tự)
  • Bẫy lỗi riêng với trường nhập mã xác nhận (ký tự nhập vào phải là số)

 

Bài 3:

            Xây dựng ứng dụng máy tính đơn giản với các yêu cầu thiết kế và chức năng như file bai_tap_3.html

 

 

2 – Hướng dẫn giải


 Bài 1:

<!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=utf-8" />

<title>Bài tập 01</title>

<style type="text/css">

#title{

height:30px;

line-height:30px;

font-family:arial;

font-size:14px;

font-weight:bold;

color:#FFFFFF;

text-align:center;

text-transform:uppercase;

background:#FF9900;

}


.title-item{

font-family:arial;

font-size:12px;

font-weight:bold;

color:#333333;

text-align:left;

text-transform:capitalize;

}

</style>

<script language="javascript">

function clearTextName(){

document.frm.name.value = "";

}


function clearTextUser(){

document.frm.user.value = "";

}


function clearTextPass(){

document.frm.pass.value = "";

}


function clearTextMail(){

document.frm.mail.value = "";

}


function clearTextSerial(){

document.frm.serial.value = "";

}

</script>

</head>

<body>

<form name="frm">

<table align="center" border="1" cellspacing="1" cellpadding="1">

  <tr>

    <td id="title" colspan="2">đăng ký thành viên</td>

  </tr>

  <tr>

    <td class="title-item" width="93">họ và tên</td>

    <td width="146"><input type="text" name="name" value="Không được để trống" onfocus="clearTextName();" /></td>

  </tr>

  <tr>

    <td class="title-item">tên tài khoản</td>

    <td><input type="text" name="user" value="Từ 6 - 12 ký tự" onfocus="clearTextUser();" /></td>

  </tr>

  <tr>

    <td class="title-item">mật khẩu</td>

    <td><input type="text" name="pass" value="Không được để trống" onfocus="clearTextPass();" /></td>

  </tr>

  <tr>

    <td class="title-item">địa chỉ email</td>

    <td><input type="text" name="mail" value="Không được để trống" onfocus="clearTextMail();" /></td>

  </tr>

  

  <tr>

    <td class="title-item">mã số xác nhận</td>

    <td><input type="text" name="serial" value="Nhập vào 4 số bất kỳ" onfocus="clearTextSerial();" /></td>

  </tr>

  <tr>

    <td colspan="2"><input type="submit" name="submit_name" value="Đăng ký" /> <input type="reset" name="reset_name" value="Làm mới" /></td>

  </tr>

</table>

</form>

</body>

</html>

Bài 2: 

<!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=utf-8" />

<title>Bài tập 02</title>

<style type="text/css">

#title{

height:30px;

line-height:30px;

font-family:arial;

font-size:14px;

font-weight:bold;

color:#FFFFFF;

text-align:center;

text-transform:uppercase;

background:#FF9900;

}


.title-item{

font-family:arial;

font-size:12px;

font-weight:bold;

color:#333333;

text-align:left;

text-transform:capitalize;

}

</style>

<script language="javascript">

function clearTextName(){

document.frm.name.value = "";

}

function checkTextName(name){

if((name == "")){

alert("Bạn chưa nhập Họ và Tên!");

}

}


function clearTextUser(user){

document.frm.user.value = "";

}

function checkTextUser(user){

if(user == ""){

alert("Bạn chưa nhập Tài Khoản!");

}

if((user.length<6)||(user.length>12)){

alert("Tên Tài Khoản phải lớn hơn 6 ký tự và không vượt quá 12 ký tự!");

}

}



function clearTextPass(){

document.frm.pass.value = "";

}

function checkPass(pass){

if((pass == "")){

alert("Bạn chưa nhập Mật Khẩu!");

}

}


function clearTextMail(){

document.frm.mail.value = "";

}

function checkMail(mail){

if((mail == "")){

alert("Bạn chưa nhập Email!");

}

}


function clearTextSerial(){

document.frm.serial.value = "";

}

function checkTextSerial(serial){

if(serial == ""){

alert("Bạn chưa nhập Mã Xác Nhận!");

}

if(isNaN(serial)){

alert("Mã Xác Nhận phải bằng số!");

}

}

</script>

</head>

<body>

<form name="frm">

<table align="center" border="1" cellspacing="1" cellpadding="1">

  <tr>

    <td id="title" colspan="2">đăng ký thành viên</td>

  </tr>

  <tr>

    <td class="title-item" width="93">họ và tên</td>

    <td width="146"><input type="text" name="name" value="Không được để trống" onfocus="clearTextName();" onblur="checkTextName(this.value);" /></td>

  </tr>

  <tr>

    <td class="title-item">tên tài khoản</td>

    <td><input type="text" name="user" value="Từ 6 - 12 ký tự" onfocus="clearTextUser();" onblur="checkTextUser(this.value);" /></td>

  </tr>

  <tr>

    <td class="title-item">mật khẩu</td>

    <td><input type="text" name="pass" value="Không được để trống" onfocus="clearTextPass();" onblur="checkPass(this.value);" /></td>

  </tr>

  <tr>

    <td class="title-item">địa chỉ email</td>

    <td><input type="text" name="mail" value="Không được để trống" onfocus="clearTextMail();" onblur="checkMail(this.value);" /></td>

  </tr>

  

  <tr>

    <td class="title-item">mã số xác nhận</td>

    <td><input type="text" name="serial" value="Nhập vào 4 số bất kỳ" onfocus="clearTextSerial();" onblur="checkTextSerial(this.value);" /></td>

  </tr>

  <tr>

    <td colspan="2"><input type="submit" name="submit_name" value="Đăng ký" /> <input type="reset" name="reset_name" value="Làm mới" /></td>

  </tr>

</table>

</form>

</body>

</html>


Bài 3:

<!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=utf-8" />

<title>Bài tập 03</title>

<style type="text/css">

#title{

height:25px;

line-height:25px;

font-family:arial;

font-size:14px;

font-weight:bold;

color:#FFFFFF;

text-transform:uppercase;

text-align:center;

background:#666666;

}


.title-item{

font-family:arial;

font-size:12px;

color:#FFFFFF;

text-transform:capitalize;

text-align:left;

background:#999999;

}

</style>

<script language="javascript">

function canculator(value){

var st1 = document.frm.st1.value;

st1 = parseFloat(st1);

var st2 = document.frm.st2.value;

st2 = parseFloat(st2);

if(value == "+"){

result = (st1 + st2);

}

if(value == "-"){

result = (st1 - st2);

}

if(value == "x"){

result = (st1 * st2);

}

if(value == "/"){

result = (st1 / st2);

}

document.frm.kq.value = result;

}


function canExtend(value){

if(value == "Sqrt"){

result = Math.sqrt(document.frm.kq.value);

}

if(value == "Abs"){

result = Math.abs(document.frm.kq.value);

}

if(value == "Ceil"){

result = Math.round(document.frm.kq.value);

}

document.frm.kq.value = result;

}

</script>

</head>

<body>

<form name="frm" onsubmit="canculator();">

<table align="center" border="1" cellspacing="1" cellpadding="1">

  <tr>

    <td id="title" colspan="2">ứng dụng máy tính đơn giản</td>

  </tr>

  <tr>

    <td class="title-item">nhập số thứ nhất</td>

    <td><input type="text" name="st1" size="21" /></td>

  </tr>

    <tr>

    <td class="title-item">nhập số thứ hai</td>

    <td><input type="text" name="st2" size="21" /></td>

  </tr>

  <tr>

    <td class="title-item">lựa chọn phép toán</td>

    <td align="center">

    <input type="button" name="cong" value="+" onclick="canculator(this.value);" />

        <input type="button" name="tru" value="-" onclick="canculator(this.value);" />

        <input type="button" name="nhan" value="x" onclick="canculator(this.value);" />

        <input type="button" name="chia" value="/" onclick="canculator(this.value);" />

    </td>

  </tr>

  <tr>

    <td class="title-item">các phép toán khác</td>

    <td align="center">

    <input type="button" name="can" value="Sqrt" onclick="canExtend(this.value);" />

        <input type="button" name="mu2" value="Abs" onclick="canExtend(this.value);" />

        <input type="button" name="log" value="Ceil" onclick="canExtend(this.value);" />

    </td>

  </tr>

  <tr>

    <td class="title-item">kết quả</td>

    <td><input type="text" name="kq" size="21" /></td>

  </tr>

</table>

</form>

</body>

</html>



on
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)