Tài liệu
Thực hành phần xử lý Form và các sự kiện cho các phần tử trong Form trong HTML
Science and TechnologyMục tiêu bài học
Kết thúc chương này, bạn có thể:
- Làm việc với các form và các phần tử trên form
- Kiểm tra tính hợp lệ của nội dung các trường trên form
Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận.
Thực hiện trong 1h30’ đầu
Kiểm tra tính đúng đắn của địa chỉ Email được nhập vào qua TextBox
- Mở notepad hay trình soạn thảo nào đó
-
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 } // --> </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>
Hiển thị dữ liệu của form trong cửa sổ mới
- Mở notepad hay trình soạn thảo nào đó
- 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;
message+="<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>
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>
Name :-<INPUT TYPE="TEXT" NAME="text1" SIZE = "15"><BR><BR>
Password :-<INPUT TYPE="PASSWORD" NAME="pass1" SIZE = "8"><BR><BR>
</FORM>
<HR>
<FORM>
Hobbies :-<INPUT TYPE="CHECKBOX" NAME="check1" VALUE="Reading" CHECKED>Reading
<INPUT TYPE="CHECKBOX" NAME="check1" VALUE = "Music">Music
<INPUT TYPE="CHECKBOX" NAME="check1" VALUE = "Trekking">Trekking
</FORM>
<HR>
<FORM>
<INPUT TYPE="RADIO" NAME="radio1" VALUE ="Male" CHECKED>Male
<INPUT TYPE="RADIO" NAME="radio1" VALUE = "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.write("There are "+len+" forms in this 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>
Thực hiện trong 1h30’ tiếp theo
- 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 ý:
- Cài đặt sự kiện onClick cho nút Click Here
- Sử dụng thuộc tính value của textfield lấy giá trị được nhập trong textfield.
- Sử dụng hàm alert hiển thị giá trị của trường Name và Password
- Thiết kế Form như hình bên dưới:
Khi 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 ý:
- Cài đặt sự kiện onClick cho Checkbox
- Sử dụng thuộc tính checked của đối tượng Checkbox
- Sử dụng thộc tính value của Textfield để hiển thị kết quả
Tự thực hành
- Tạo một Form như hình bên dưới:
Chương trình này sẽ kiểm tra tính hợp lệ của dữ liệu nhập vào
- Trường “First Name” và “Last Name” không được để trống.
- 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á.
Thư viện Học liệu Mở Việt Nam (VOER) được tài trợ bởi Vietnam Foundation và vận hành trên nền tảng Hanoi Spring. Các tài liệu đều tuân thủ giấy phép Creative Commons Attribution 3.0 trừ khi ghi chú rõ ngoại lệ.
Bài đăng
