Bài giảng Nhập môn HTML và thiết kế Web: Bài 14 - Xử lý form và các sự kiện cho các phần tử trong form

Bài giảng Nhập môn HTML và thiết kế Web: Bài 14 - Xử lý form và các sự kiện cho các phần tử trong form bao gồm những nội dung về form Action, Method, Text fields, Command Button, Check Box, Radio, Combo box.

Trang 1

X Ử LÝ FORM VÀ CÁC S Ự KI Ệ N

Trang 2

Form: Action, Method

Trang 3

Form đượ c dùng để t ươ ng tác v ớ i ng ườ i dùng Đố i

t ượ ng Form g ồ m 3 thu ộ c tính:

Accept: Xác đị nh danh sách các ki ể u MIME

Action: Thu ộ c tính trình bày v ị trí c ủ a script s ẽ đượ c dùng để x ử lý form sau khi form đượ c hoàn thành và g ử i (submit)

Method: Thu ộ c tính này ch ỉ đị nh ph ươ ng th ứ c

mà d ữ li ệ u đượ c g ử i đế n server Cú pháp METHOD=(POST|GET)

FORM

Trang 4

< html >

< head >

< title > DOM Example </ title >

</ head >

< body >

< form action ="Default.aspx">

< input type ="reset" value ="Reset"/>< br />

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

</ form >

</ body >

</ html >

FORM

Trang 5

Các s ự ki ệ n có th ể s ử d ụ ng đố i v ớ i tr ườ ng

v ă n b ả n:

onFocus(): Xu ấ t hi ệ n khi ng ườ i dùng nháy chu ộ t vào tr ườ ng Text.

OnBlur(): Xu ấ t hi ệ n khi ng ườ i dùng di chuy ể n ra

kh ỏ i tr ườ ng text b ằ ng cách nh ấ p chu ộ t bên ngoài ho ặ c nh ấ n phím tab

OnChange(): Xu ấ t hi ệ n khi ng ườ i dùng có s ự

thay đổ i bên trong tr ườ ng Text và sau đ ó di chuy ể n ra kh ỏ i tr ườ ng v ă n b ả n.

TEXTFIELD

Trang 6

<html >

<head>

<title>DOM Example</title>

function writeText(value) { alert(value);}

</script>

</head>

<body>

< input type="text" name="firstName"

onfocus="writeText('Sự kiện Focus')" ;

onblur="writeText('Blur');" onchange="writeText('Change');">

< textarea name="txtGhiChu" onfocus="writeText('Focus

of TextArea')" rows="5" cols="10">

</ textarea >

</form>

</body>

</html>

TEXTFIELD

Trang 7

Dùng s ự ki ệ n onClick():

<html >

<head>

function Copy(value) { myform.txtPaste.value = value; }

</script>

</head>

<body>

< input type ="button" name ="cmdCopy"

value ="Copy" onclick ="Copy(myform.txtCopy.value)"/>

</form>

</body>

</html>

COMMAND BUTTON

Trang 8

Check box ho ạ t độ ng theo c ơ ch ế b ậ t – t ắ t.

<head>

function Switch(){ var theCheckBox= window.document.myform.chkSwitch;

if(theCheckBox.checked==false) { document.bgColor='white';}

else{document.bgColor='blue';} }

</script>

</head>

<body>

< input type ="checkbox" checked ="checked"

name ="chkSwitch" onclick ="Switch();" />

</form>

</body>

CHECKBOX

Trang 9

T ươ ng t ự nh ư checkbox, nh ư ng khác nhau v ề cách dùng trên form Check box có th ể b ậ t/t ắ t l ạ i nh ư ng

đố i v ớ i radio thì khác, m ộ t khi đ ã b ậ t thì t ấ t c ả các radio khác đề u ở ch ế độ t ắ t, không th ể thay đổ i

tr ạ ng thái c ủ a radio này b ằ ng cách nh ấ p vào nó

nh ư đố i v ớ i checkbox

RADIO

Trang 10

< head >

< script type ="text/javascript" language ="javascript">

function onButton(){

var theCheckBox= window.document.myform.on;

if (theCheckBox.checked== true ) { document.bgColor = 'blue' ; myform.on.checked = false ; myform.off.checked = true ;} }

function offButton() {

var theCheckBox = window.document.myform.off;

if (theCheckBox.checked == true ) { document.bgColor = 'yellow' ; myform.off.checked = false ; myform.on.checked = true ; } }

</ script >

</ head >

< body >

< form name ="myform">

< input type ="radio" checked ="checked" name ="on" onclick ="onButton();" /> Blue

< input type ="radio" name ="off" onclick ="offButton();" /> Yellow

</ form >

RADIO

Trang 11

S ử d ụ ng các s ự ki ệ n onBlue, onFocus, onChange

< head >

function Show(str) {alert(str + " được chọn" );}

</ script >

</ head >

< body >

< form id ="myform" >

< select name="list" multiple="multiple"

onchange="Show(myform.list.options[selectedIndex].text);">

< option > Xanh </ option >

< option > Đỏ </ option >

< option > Tím </ option >

</ select >

< select name ="combo"

onchange ="Show(myform.combo.options[selectedIndex].text);">

< option > Xanh </ option >

< option > Đỏ </ option >

< option > Tím </ option >

COMBOBOX VÀ LISTBOX

Trang 12

Ví d ụ 1: Ki ể m tra tính h ợ p l ệ c ủ a các tr ườ ng trên form

function validateUser() {

var str = myform.txtUser.value;

if (str.length == 0) {

alert("Username không nhận giá trị rỗng");

return false; }

return true; }

function validatePass() {

var str = myform.txtPass.value;

if (str.length == 0) {

alert("Password không nhận giá trị rỗng");

return false; }

return true; }

Trang 13

Ví d ụ 1: Ki ể m tra tính h ợ p l ệ c ủ a các tr ườ ng trên form

function print() {

disp = open("KetQua", "In kết quả") disp.document.write("User name" + myform.txtUser.value);

disp.document.write(" <br/> Pass" + myform.txtPass.value);

if (disp.confirm("Đúng người dùng")) {disp.close();}

}

</script>

</head>

<body>

Username: <input id="txtUser" type="text" onblur="validateUser();"/>

<br /> <input id="btnSubmit" type="button" value="Submit"

onclick="print();"/>

</form>

</body>

Trang 14

Ví d ụ 2: Ki ể m tra tính h ợ p l ệ c ủ a email

< head >

function validateEmail(Formname, EmailName) {

var EmalOK = true ;

var Temp = EmailName;

var AtSym = Temp.value.indexOf( '@' );

var Period = Temp.value.lastIndexOf( '.' );

var space = Temp.value.indexOf( ' ' );

var length = Temp.value.length - 1;

if ((AtSym<1)||(Period <=AtSym + 1)||(Period == length)||(space != -1)) { EmalOK = false ;

alert( "Email không hợp lệ" );

Temp.focus(); }

return EmalOK;

}

</ script >

</ head >

Trang 15

Ví d ụ 2: Ki ể m tra tính h ợ p l ệ c ủ a email

< body >

< form id ="myform" >

Email: < input id ="txtEmail" type ="text" />

< br /> < input id ="btnSubmit" type ="button" value ="Submit"

onclick ="validateEmail(myform, myform.txtEmail);"/>

</ form >

</ body >

Trang 16

TH Ả O LU Ậ N – CÂU H Ỏ I

Trang 17

Th ự c hành các ví d ụ

Thi ế t k ế các ch ứ c n ă ng cho bài t ậ p l ớ n

Định dạng
Số trang	17
Dung lượng	0,98 MB