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 1Chương 18 Xử lý Form và các sự kiện cho các phần tử trong Form
Mục tiêu:
Kết thúc chương này, bạn có thểc:
Làm việc với các form và các phần tử trên form
Kiểm tra tính hiệu lực của form
Các hướng dẫn đưa ra trong chương này rất chi tiết và đầy đủ Nhờ đó, học viên có thể nắm được các mục tiêu bài học Hãy làm theo các bước hướng dẫn một cách cẩn thận
Phần I – Thực hiện trong 1.5 kế tiếp:
Ví dụ 1: Kiểm tra tính hiệu lực của Email
1 Mở notepad hay trình soạn thảo nào đó
2 Nhập vào đoạn mã dưới đây
<HTML>
<HEAD>
<TITLE> Email Validation </TITLE>
<script language="JavaScript">
<!
function IsEmailValid(FormName,ElemName)
{
var EmailOk = true var Temp = ElemName var AtSym = Temp.value.indexOf('@') var Period = Temp.value.lastIndexOf('.') var Space = Temp.value.indexOf(' ')
var Length = Temp.value.length - 1 // Array is from 0 to length-1
if ((AtSym < 1) || // '@' cannot
be in first position (Period <= AtSym+1) || // Must be atleast one valid char btwn '@' and '.'
(Period == Length ) || // Must be atleast one valid char after '.'
(Space != -1)) // No empty spaces permitted
{
EmailOk = false
alert('Please enter a valid e-mail address!') Temp.focus()
}
return EmailOk
}
Trang 2// >
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<form name="frm">
<b>Please enter valid Email Address : <INPUT TYPE="text" NAME="text1">
<INPUT TYPE="button" value="Validate Email Address"
onClick="IsEmailValid('frm',frm.text1);">
</form>
</BODY>
</HTML>
Hình 20.1: Minh hoạ ví dụ 1
Ví dụ 2: Hiển thị dữ liệu của form trong cửa sổ mới
1 Mở notepad hay trình soạn thảo nào đó
2 Nhập vào đoạn mã dưới đây
<HTML>
<HEAD>
<TITLE> Form Example </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!
function disply()
{
dispwin=window.open('Your Information');
message="<ul><li><b> Name :
</B>"+document.form1.yourname.value;
message+="<li><b> Address :
</B>"+document.form1.address.value;
Trang 3message+="<li><b> Phone :
</B>"+document.form1.phone.value + "</UL>";
dispwin.document.write(message);
}
// >
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1> Form Example</H1>
Enter the following information When you press the Display button, the data you entered will be displayed
in a popup window
<FORM name="form1">
<B> Name :</B><INPUT TYPE="text" NAME="yourname" size=20> <P>
<B> Address :</B><INPUT TYPE="text" NAME="address"
size=30>
<P>
<B> Phone :</B><INPUT TYPE="text" NAME="phone" size=15> <P>
<INPUT TYPE="button" value="Display" onClick="disply();">
</FORM>
</BODY>
</HTML>
Hình 20.2 a: Minh hoạ ví dụ 2
Trang 4Hình 20.2 b: Kết quả ví dụ Example 2 (sau khi click chuột vào nút Display)
Ví dụ 3: Hiển thị số form được sử dụng trong tài liệu
Ví dụ bên dưới sẽ hiển thị số form được tạo trong tài liệu và các phần tử tương ứng với mỗi form
<HTML>
<HEAD>
<TITLE> form Object </TITLE>
</HEAD>
<BODY>
<H2 ALIGN = "CENTER"> Using the form Object </H2><HR>
<FORM>
"15"><BR><BR>
Password :-<INPUT TYPE="PASSWORD" NAME="pass1" SIZE =
"8"><BR><BR>
</FORM>
<HR>
<FORM>
VALUE="Reading" CHECKED>Reading
"Music">Music
"Trekking">Trekking
</FORM>
<HR>
<FORM>
Trang 5<INPUT TYPE="RADIO" NAME="radio1" VALUE ="Male" CHECKED>Male
"Female">Female<BR>
<INPUT TYPE="BUTTON" NAME="but1" VALUE = "Click Here"><BR>
</FORM>
<HR>
<SCRIPT LANGUAGE = "JavaScript">
len=document.forms.length
document.write("<PRE>")
document"+"\n\n")
document.write("<HR>\n")
for(i=0;i<len;i++)
{
num=document.forms[i].elements.length document.write("Form "+i+" has "+num+" elements\n\n") for(j=0;j<num;j++)
{
document.write("forms["+i+"].elements[" + j + "]
= " + document.forms[i].elements[j].type+"\n") }
document.write("<HR>\n") }
document.write("</PRE>")
</SCRIPT>
</BODY>
</HTML>
Ghi chú: Vì kết quả ví dụ 3 không thể trình bày trong một hình nên nó sẽ được tách thành 2 hình
riêng biệt
Trang 6Hình 20.3 a: Kết quả ví dụ 3 (phần thứ nhất)
Trang 7Hình 20.3 b: Kết quả ví dụ 3 (phần hai)
Trang 81 Thiết kế một Form như hình bên dưới:
Khi người dùng nhấn vào nút Click Here, nó sẽ hiển thị một hộp thông báo chứa tên và password
mà người dùng đã nhập vào như hình bên dưới:
Gợi ý:
1 Cài đặt sự kiện onClick cho nút Click Here
2 Sử dụng thuộc tính value của textfield lấy giá trị được nhập trong textfield
3 Sử dụng hàm alert hiển thị giá trị của trường Name và Password
2 Thiết kế Form như hình bên dưới:
Trang 9Khi người dùng click vào hộp kiểm Football, một thông báo “I like Football” sẽ hiển thị trong text box Tương tụ, khi người dùng click vào hộp kiểm Table Tennis, thông báo “I like Table Tennis” sẽ hiển thị như hình bên dưới:
Gợi ý:
1 Cài đặt sự kiện onClick cho Checkbox
Trang 11Bài tập
1 Tạo một Form như hình bên dưới:
Chương trình này sẽ kiểm tra tính hiệu lực của dữ liệu nhập vào
a Trường “First Name” và “Last Name” không được để trống
b Người dùng phải nhập vào địa chỉ email hợp lệ trong trường “Email Address”
Khi người dùng click vào nút “Submit This Form”, Nội dung hợp lệ sẽ được hiển thị trong cửa sổ mới như hình bên dưới Tương tụ, khi click vào nút “Reset This Form”, nội dung trong form sẽ bị xoá
{ EMBED PBrush }
