Session17 concepts HTML Lập Trình Web Tĩnh

Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở đi Và kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này

Trang 1

Chương 17 Xử lý Form và các sự kiện cho các phần tử trong Form

Mục tiêu:

Vào cuối chương này, bạn có thể:

 Làm việc với đối tượng form và các phần tử trên form

 Các thuộc tính

 Các phương thức

 Sử dụng các sự kiện cho các đối tượng trên form

Giới thiệu

Form được sử dụng để tương tác với người dùng Chúng ta muốn lấy những ý kiến của người dùng Để làm được điều này, chúng ta cần cung cấp cho người dùng cách thức để nhập thông tin,

có thể dưới dạng HTML Trong chương này, chúng ta sẽ thảo luận về form, các phần tử của form

và các sự kiện sự kiện tương ứng với các phần tử này

Đối tượng form bao gồm 3 thuộc tính:

form được hoàn thành và gửi (submit)

pháp là METHOD = (GET | POST)

Ví dụ 1:

Simple.html

<HTML>

<HEAD>

<TITLE> SIMPLE </TITLE>

</HEAD>

<H3> This is Simple.html file </H3>

</BODY>

</HTML>

Demo.html

<HTML>

<HEAD>

<TITLE> Using Form Tag </TITLE>

</HEAD>

Trang 2

</FORM>

</BODY>

</HTML>

Hình 19.1 a: Kết quả của ví dụ 1

Hình 19.1 b: Kết quả ví dụ 1 (sau khi nhấp vào nút Submit)

Bây giờ chúng ta sẽ thảo luận về các phần tử và các sự kiện của form

Các Textfield nhận biết các sự kiện onBlur, onFocus, và onChange Sự kiện onFocus xảy ra khi

người dùng nhấp chuột vào trường text Sự kiện onBlur xảy ra 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 nó hoặc nhấn phím "tab" Sự kiện onChange xảy ra 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

Ví dụ dưới đây bao gồm các sự kiện nói trên

Ví dụ 2:

Trang 3

<HTML>

<HEAD>

<TITLE> TextField Events </TITLE>

<!

function writeIt(value)

{

alert(value);

}

// >

</SCRIPT>

</HEAD>

onFocus="writeIt('focus');" onBlur="writeIt('blur');"

onChange="writeIt('change');">

</FORM>

</BODY>

</HTML>

Dưới đây là kết quả của ví dụ 2:

Trang 4

Hình 19.2 b: Kết quả của ví dụ 2 (khi nhấp vào hộp văn bản (textbox))

Hình 19.2 c: Kết quả của ví dụ 2 (Sau khi nhập văn bản vào textbox và nhấn phím tab)

Trang 5

Hình 19.2 d: Kết quả của ví dụ 2 (Sau khi nhấp chuột bên ngoài textbox)

Trong ví dụ trên, khi người dùng nhấp chuột bên trong trường text, sự kiện onFocus sẽ xảy ra Khi người dùng nhấp chuột bên ngoài trường văn bản, sự kiện onBlur sẽ xảy ra Khi người dùng

có sự thay đổi ở văn bản, sự kiện onChange sẽ xảy ra

Một button nhận biết sự kiện onClick Sự kiện onClick xảy ra khi người dùng nhấp vào một button Ví dụ dưới đây sẽ minh họa cách sử dụng sự kiện onClick

Ví dụ 3:

<HTML>

<HEAD>

<TITLE> Button Events </TITLE>

<!

function writeIt(value)

{

myfm.second_text.value=value;

}

// >

</SCRIPT>

</HEAD>

Trang 6

<INPUT TYPE="button" value="Copy"

onClick="writeIt(myfm.first_text.value);">

</FORM>

</BODY>

</HTML>

Hình 19.3 b: Kết quả của ví dụ 3 (sau khi nhập văn bản vào trường text đầu tiên)

Hình 19.3 c: Kết quả của ví dụ 3 (sau khi nhấp vào nút copy)

Trang 7

Trong ví dụ trên, khi người dùng nhấp vào nút Copy, sự kiện onClick xảy ra và phần văn bản ở

trường text thứ nhất sẽ được sao chép sang trường text thứ hai

Checkbox là một đối tượng của form hoạt động theo cơ chế bật-tắt Điều này có nghĩa là

Checkbox có thể được check hoặc không Cũng như button, checkbox cũng nhận biết sự kiện onClick Ví dụ dưới đây sẽ minh hoạ về cách sử dụng đối tượng checkbox

Ví dụ 4:

<HTML>

<HEAD>

<TITLE> Checkbox Events </TITLE>

<!

function switchLight()

{

var the_box = window.document.form_2.check_1;

var the_switch = "";

if (the_box.checked == false)

{

alert("Hey! Turn that back on!");

document.bgColor='black';

}

else

{

alert("Thanks!");

document.bgColor='white';

}

// >

</SCRIPT>

</HEAD>

<input type="checkbox" name ="check_1"

onClick="switchLight();">The Light Switch

</form>

</BODY>

</HTML>

Trang 8

Hình 19.4: kết quả của ví dụ 4 Lưu ý: Khi chạy ví dụ này, bạn có thể nhấp vào checkbox để xem kết quả xảy ra

Các nút radio gần giống như checkbox trong JavaScript, chúng được dùng trong form Checkbox hoạt động theo cơ chế bật/tắt Chúng ta có thể bật, tắt hoặc chuyển đổi hai chế độ check hoặc không check Các nút radio thì khác Một khi nút radio đã được bật, nó sẽ giữ nguyên chế độ đó cho đến khi bạn bật một nút khác Lúc này nút đầu tiên sẽ được tắt Nút radio cũng nhận biết sự kiện onClick

Ví dụ 5:

<HTML>

<HEAD>

<TITLE> Option Button Events </TITLE>

<!

function offButton()

{

var the_box = window.document.form_1.radio_1;

if (the_box.checked == true)

{

window.document.form_1.radio_2.checked = false;

document.bgColor='black';

alert("Hey! Turn that back on!");

}

function onButton()

{

var the_box = window.document.form_1.radio_2;

if (the_box.checked == true) {

window.document.form_1.radio_1.checked = false;

document.bgColor='white';

alert("Thanks!");

}

// >

Trang 9

</SCRIPT>

</HEAD>

<input type="radio" name ="radio_1"

onClick="offButton();">Light off

<input type="radio" name ="radio_2" onClick="onButton();" checked>Light on

</form>

</BODY>

</HTML>

Hình 19.5: kết quả của ví dụ 5 Lưu ý: Khi thử ví dụ này, bạn có thể nhấp vào nút radio để xem kết quả xảy ra

Đối tượng ComboBox trong form HTML xuất hiện giống như một danh sách sổ xuống hoặc danh sách cuộn của các tuỳ chọn

Danh sách chọn lựa được mô tả giữa 2 thẻ <SELECT> và </SELECT> bằng cách sử dụng thẻ

ComboBox hỗ trợ các sự kiện onBlur, onFocus, và onChange

Ví dụ 6:

<HTML>

<HEAD>

<TITLE> Option Button Events </TITLE>

<!

function show(txt)

{

alert(txt+" Selected");

}

// >

Trang 10

</SCRIPT>

</HEAD>

<select name="choose_category"

onChange="show(the_form.choose_category.options

[selectedIndex].text);">

<option selected>Dogs

<option>Fish

<option>Birds

</select>

</form>

</BODY>

</HTML>

Hình 19.6: Kết quả của ví dụ 6

Lưu ý: Khi chạy ví dụ này, bạn có thể chọn các tuỳ chọn sẵn có và các message tương ứng sẽ

được hiển thị

Chương trình dưới đây là một ví dụ về việc kiểm tra tính hợp lệ của form trước khi chuyển nó cho server để tiếp tục xử lý Trong quá trình kiểm tra tính hợp lệ của form, người lập trình phải kiểm tra từng trường để bảo đảm rằng không có trường nào bị bỏ trống hoặc chứa các thông tin không hợp lệ

Ví dụ 7:

<HTML>

<HEAD>

<TITLE> Form Events </TITLE>

<!

function validateFirstName()

{

var str= form1.fname.value;

Trang 11

if(str.length==0)

{

alert(" The first name cannot be empty");

return false;

}

return true

}

function validateLastName()

{

var str= form1.lname.value;

if(str.length==0)

{

alert(" The last name cannot be empty");

return false;

}

return true;

}

function validateEmail()

{

var str= form1.email.value;

if(str.length==0)

{

alert(" The Email field cannot be empty");

return false;

}

function processForm()

{

disp=open("", "result")

disp.document.write("<TITLE> Result Page </TITLE>"+"<PRE>")

signing in"+"</H2>"+"<HR>"+"<BR><BR>")

disp.document.write("First name \t\t:

"+form1.fname.value+"<BR>")

disp.document.write("Last name \t\t:

"+form1.lname.value+"<BR>")

disp.document.write("Email \t\t\t:

"+form1.email.value+"<BR>")

"+form1.comment.value+"<BR>")

disp.document.write("<PRE>")

if(disp.confirm("Is this information correct"))

disp.close()

}

// >

</SCRIPT>

</HEAD>

Trang 12

<H2 ALIGN="CENTER"> Handling Form Events</H2><HR>

<P> First Name : <INPUT TYPE="text" NAME="fname" size=10 onBlur="validateFirstName()">

Last Name : <INPUT TYPE="text" NAME="lname" size=15 onBlur="validateLastName()"></p>

<P> Email : <INPUT TYPE="text" NAME="email" size=10 onBlur="validateEmail()">

Comments : <TEXTAREA NAME="comment" rows=4 cols=30 > Enter your comments </TEXTAREA></p>

</FORM>

</BODY>

</HTML>

Hình 19.7 a: kết quả của ví dụ 7

Trang 13

Hình 19.7 b: Kết quả của ví dụ 7 (sau khi gửi form)

Trang 14

Tóm tắt

 Form được sử dụng để tương tác với người dùng

 Các trường text nhận biết các sự kiện onBlur, onFocus, và onChange

 Button, checkbox, combobox, radio button nhận biết sự kiện onClick

Trang 15

Kiểm tra kiến thức

1 Đối tượng form bao gồm 3 thuộc tính: _, _, _

2 _ chỉ định phương thức truyền dữ liệu đến server

3 Sự kiện onFocus xảy ra khi người dùng nhấp chuột bên trong trường văn bản – Đúng/Sai

4 là một đối tượng form HTML hoạt động theo cơ chế bật-tắt

5 Một textfield là một đối tượng trên form HTML xuất hiện giống như một danh sách sổ xuống

hoặc một danh sách cuộn bao gồm các mục chọn– Đúng/Sai

Trang 16

Bài tập củng cố

1 Tạo một Form theo mẫu dưới đây:

2 Viết mã JavaScript để kiểm tra tính hợp lệ của form

3 Hiển thị thông báo nếu có trường bị bỏ trống hoặc không chọn

4 Hiển thị thông báo “Form is OK” nếu tất cả các trường đều được chọn hoặc điền đầy đủ các thông tin hợp lệ

Định dạng
Số trang	16
Dung lượng	716,93 KB