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 đối tượng form và các thành phần trên form

Các thuộc tính
Các phương thức

Sử dụng các sự kiện của 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 có thông tin từ phí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

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

ACCEPT Thuộc tính này xác định danh sách các kiểu MIME

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

METHODThuộc tính này chỉ định phương thức mà dữ liệu sẽ được gửi đến server. Cú pháp là METHOD = (GET | POST).

Simple.html

<HTML>
    <HEAD>
          <TITLE> SIMPLE </TITLE>
    </HEAD>
    <BODY BGCOLOR="#00FF00">
          <H3> This is Simple.html file </H3>
    </BODY>
</HTML>

Demo.html

<HTML>
    <HEAD>
           <TITLE> Using Form Tag </TITLE>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF">
           <Form ACTION="Simple.html">
                 <input type="submit">
                 <input type="reset">
           </FORM>
    </BODY>
</HTML>

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ử trên form và các sự kiện của chúng.

Đối tượng Textfield (trường văn bản)

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 minh hoạ các sự kiện nói trên.

<HTML>
    <HEAD>
             <TITLE> TextField Events </TITLE>
             <SCRIPT LANGUAGE="JavaScript">
                   <!--
                function writeIt(value)
                {
                   alert(value);
                }
                 //-->
            </SCRIPT>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF">
            <Form name="myfm">
                  <input type="text" name="first_text" onFocus="writeIt('focus');" onBlur="writeIt('blur');" 
                  onChange="writeIt('change');">
                  <TEXTAREA NAME="txt_area " ROWS="10" COLS="10"></TEXTAREA>
            </FORM>
    </BODY>
</HTML>

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

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

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)

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 sau đó di chuyển ra khỏi vùng văn bản hiện thời, sự kiện onChange sẽ xảy ra.

Đối tượng Command Button

Sự kiện onClick của một command Button xảy ra khi người dùng nhấp chuột vào command Button đó. Ví dụ dưới đây sẽ minh họa cách sử dụng sự kiện onClick:

<HTML>
    <HEAD>
              <TITLE> Button Events </TITLE>
              <SCRIPT LANGUAGE="JavaScript">
                    <!--
                     function writeIt(value)
                    {
                          myfm.second_text.value=value;
                      }
                      //-->
              </SCRIPT>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF">
              <Form name="myfm">
                       <input type="text" name="first_text">
                       <INPUT TYPE="button" value="Copy"  onClick="writeIt(myfm.first_text.value);">
                       <input type="text" name="second_text">
               </FORM>
    </BODY>
</HTML>

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

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

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.

Đối tượng Checkbox

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.

<HTML>
    <HEAD>
             <TITLE> Checkbox Events </TITLE>
             <SCRIPT LANGUAGE="JavaScript">
                <!--
                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>
    <BODY BGCOLOR="#FFFFFF">
                <form name="form_2">
                        <input type="checkbox" name ="check_1"  onClick="switchLight();">The Light Switch
                </form>
    </BODY>
</HTML>

Khi chạy ví dụ này, bạn có thể nhấp vào checkbox để xem kết quả xảy ra.

Đối tượng radio

Mã Javascript của sự kiện onClick trên nút radio tương tự như đối với checkbox, chúng chỉ khác nhau trong cách dùng trên form. Khi chúng ta để một check box ở chế độ tắt (bật) ta có thể bật lại (tắt đi). Tuy nhiên đối với các nút radio thì khác, một khi đã được bật, thì tất cả các radio khác đều ở chế độ tắt, ta 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. Trạng thái này của các nút giữ nguyên cho đến khi một radio khác được bật. Lúc này, chỉ có radio mới được bật là ở trạng thái bật còn các radio khác đều ở chế độ tắt.


<HTML>
     <HEAD>
               <TITLE> Option Button Events </TITLE>
               <SCRIPT LANGUAGE="JavaScript">
                     <!--
                     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!");
                            }
                        }
                      //-->
              </SCRIPT>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF" TEXT="red">
                <form name="form_1">
                      <input type="radio" name ="radio_1" onClick="offButton();">Light off
                      <input type="radio" name ="radio_2" onClick="onButton();" checked>Light on
                 </form> 
    </BODY>
</HTML>

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 / lựa chọn

Đối tượng ComboBox xuất hiện trong form HTML 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 tuỳ chọn được mô tả giữa 2 thẻ <SELECT> và </SELECT> bằng cách sử dụng thẻ <OPTION>

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


<HTML>
    <HEAD>
              <TITLE> Option Button Events </TITLE>
              <SCRIPT LANGUAGE="JavaScript">
                     <!--
                      function show(txt)
                       {
                          alert(txt+" Selected");
                        }
                    //-->
              </SCRIPT>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF" TEXT="pink">
             <form name="the_form">
                       <select name="choose_category" 
                        onChange="show(the_form.choose_category.options
                       [selectedIndex].text);">
                                   <option selected>Dogs
                                   <option>Fish
                                   <option>Birds
                        </select>
              </form>
    </BODY>
</HTML>

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

Kiểm tra tính hợp lệ của nội dung các trường trên form

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 nội dung các trường trên formtrướ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 nội dung các trường trên 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ệ.

<HTML>
    <HEAD>
                 <TITLE> Form Events </TITLE>
                  <SCRIPT LANGUAGE="JavaScript">
                    <!--
    
                     function validateFirstName()
                      {
                          var str= form1.fname.value;
                          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>")
                               disp.document.write("<H2 ALIGN='CENTER'>"+"Thanks for 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>") 
                               disp.document.write("Your Comments \t\t: "+form1.comment.value+"<BR>") 
                               disp.document.write("<PRE>")

                                if(disp.confirm("Is this information correct"))
               disp.close()
                      }
                     //-->
                        </SCRIPT>
    </HEAD>
    
    <BODY BGCOLOR="#FFFFFF">
                    <H2 ALIGN="CENTER"> Handling Form  Events</H2><HR>
                    <FORM name="form1">
                               <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>
                          <P ALIGN="CENTER"><INPUT TYPE="button" value="Submit this form" onClick="processForm()">
                                <INPUT TYPE="reset"></P>
                     </FORM>
     </BODY>
</HTML>

Tóm tắt bài học

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.

Ôn tập

Đối tượng form bao gồm 3 thuộc tính: ___________, _________________, _____________ .
___________ chỉ định phương thức truyền dữ liệu đến server.
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
__________ là một đối tượng trên form HTML hoạt động theo cơ chế bật-tắt.
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

Tự thực hành

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

Viết mã JavaScript để kiểm tra tính hợp lệ của nội dung các trường trên form
Hiển thị thông báo nếu có trường bị bỏ trống hoặc không chọn
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ệ

Xử lý Form và các sự kiện cho các phần tử trong Form trong HTML