Thứ Năm, 31 tháng 12, 2015

form 1

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 - VOER
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 Technology

Mụ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
  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
                 }
        
        
                  // -->
        
               </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>
        
Minh hoạ ví dụ 1
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;
            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>
    

Minh hoạ ví dụ 2

Kết quả ví dụ 2 (sau khi click chuột vào nút Display)
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>
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.
Kết quả ví dụ 3 (phần thứ nhất)

Kết quả ví dụ 3 (phần hai)

Thực hiện trong 1h30’ tiếp theo

  1. 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
  1. 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

  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 hợp lệ của dữ liệu nhập vào

  1. Trường “First Name” và “Last Name” không được để trống.
  2. 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á.

Đánh giá:
0 dựa trên 0 đánh giá
Nội dung cùng tác giả
 
Nội dung tương tự
 

0 nhận xét: