Javascript - Form JS

Đối tượng forms trongJS

Các form được tạo ra nhờ cặp thẻ <FORM> . . . </FORM>. Có một vài phần tử (elements) của đối tượng forms như: Button, checkbox, password, radio, reset, select, submit, text, textarea

Thuộc tính Giải thích
Action thuộc tính ACTION của thẻ FORM.
Elements Mảng chứa các thành phần trong form (như checkbox, textBOX . .
Encoding Xâu chứa kiểu MIME được sử dụng để mã hoá nội dung của form gửi cho server.
length Số lượng các thành phần trong một form.
Method Thuộc tính METHOD.
target Xâu chứa tên của cửa sổ đích khi submit form

Các phương thức

formName.submit () - Xuất dữ liệu của một form tên formName tới trang xử lý. Phương thức này mô phỏng một click vào nút submit trên form.

Các phần tử của đối tượng Form

Form được tạo bởi các phần tử cho phép người sử dụng đưa thông tin vào. Khi đó, nội dung (hoặc giá trị) của các phần tử sẽ được chuyển đến một chương trình trên server qua một giao diện được gọi là Common Gateway Interface(Giao tiếp qua một cổng chung) gọi tắt là CGI

Phần tử Cú pháp Mô tả
Button <Input Type="button"> Một nút
Checkbox <Input Type="checkbox"> Một checkbox
FileUpload <Input Type="File"> Một phần tử tải File cho phép sử dụng gửi File 
Hidden <Input Type="hidden"> Một trường ẩn
Password <Input Type="password"> Một trường text để nhập mật khẩu (*)
Radio <Input Type="radio"> Một nút chọn
Reset <Input Type="reset"> Một nút reset
Select <Select>
<Option>option1</Option>
<Option>option2</Option>
</Select>
Một danh sách lựa chọn
Submit <Input Type="submit"> Một nút submit
Text <Input Type="text"> Một trường text
textArea <Textarea> default text
</Textarea>
Một trường text cho phép nhập nhiều dòng

Thuộc tính Name : Mỗi phần tử được đặt tên để JavaScript truy cập đến chúng qua 
Thuộc tính Type : Đó là một xâu chỉ định rõ kiểu của phần tử được đưa vào như nút bấm, một trường text hay một checkbox... là một trong các giá trị sau: 

  • Text field: "text" 
  • Radio button: "radio" 
  • Checkbox: "checkbox" 
  • Hidden field: "hidden" 
  • Submit button: "submit" 
  • Reset button: "reset" 
  • Password field: "password" 
  • Button: "button" 
  • Select list: "select-one" 
  • Multiple select lists: "select-multiple" 
  • Textarea field: "textarea"

1. Phần tử button
Trong một form HTML chuẩn, chỉ có hai nút bấm có sẵn là submit và reset bởi vì dữ liệu trong form phải được gửi tới một địa chỉ URL để xử lý và lưu trữ. Một phần tử button được chỉ định rõ khi sử dụng thẻ INPUT:
<INPUT TYPE="button" NAME="name" VALUE= "buttonName">
“name” là tên của button, “buttonname” là nhãn của button sẽ được hiển thị.
Chỉ có một sự kiện duy nhất là onClick. 
Ví dụ:Trang Button.htm Định giá trị trong form sử dụng phần tử button. ​​​​​​ 

<HTML>
<Head><Title>button Example</Title>
<Script Language="JavaScript">
function calculate() {
	document.frm.results.value = eval(document.frm.entry.value);
}
</Script>
</Head>
<Body>
<form Method="POST" name="frm">
Nhập biểu thức:
<INPUT TYPE="text" NAME="entry" VALUE="3+5+6"> <BR>
Kết quả:
<INPUT TYPE=text NAME="results" onFocus="this.blur();"> <BR>
<INPUT TYPE="button" VALUE="Calculate" onClick="calculate();">
</form>
</Body></HTML>

Xem ví dụ

2. Phần tử File Upload
Phần tử này cung cấp cho form một cách để người sử dụng có thể chỉ rõ một File đưa vào form xử lý. 

3. Phần tử hidden
Phần tử hidden là phần tử không được hiển thị trên Web browser. Trường hidden có thể sử dụng để lưu các giá trị cần thiết để gửi tới server song song với sự xuất ra  từ form  nhưng nó không được hiển thị trên trang. 

4. Phần tử Password
Đối tượng Password là đối tượng mà khi gõ bất kỳ ký tự nào vào cũng đều hiển thị dấu sao(*). Dùng để nhập những thông tin bí mật như mật khẩu...

5. Phần tử radio
Đối tượng radio gần giống sự bật tắt checkbox. Khi nhiều radio được kết hợp thành một nhóm, chỉ có một nút được chọn trong bất kỳ một thời điểm nào. 
Nhóm các nút radio lại bằng cách đặt cho chúng có cùng một tên trong các thẻ INPUT. Bảng sau hiển thị các thuộc tính và cách thức của đối tượng radio

Thuộc tính và cách thức Mô tả
checked Mô tả trạng thái hiện thời của phần tử radio
defaultChecked Mô tả trạng thái mặc định của phần tử
index Mô tả thứ tự của nút radio được chọn hiện thời trong một nhóm
length Mô tả tổng số nút radio trong một nhóm
name Mô tả tên của phần tử được chỉ định trong thẻ INPUT
value Mô tả giá trị hiện thời của phần tử được định ra trong thẻ INPUT
click() Mô phỏng một click trên nút radio (cách thức)

Ví dụ:

<HTML><Head><Title>Radio button Example</Title>
<Script>
function calculate(callingField) {
       if (callingField == "result") {
         if (document.frm.action[1].checked) {
           document.frm.entry.value = Math.sqrt(document.frm.result.value); 
         } else {
           document.frm.entry.value = document.frm.result.value / 2;
         }
       } else {
         if (document.frm.action[1].checked) {
           document.frm.result.value=document.frm.entry.value*document.frm.entry.value;
         } else {
           document.frm.result.value = document.frm.entry.value * 2;
         }
       }
     }
</Script>
</Head>
<BODY><form METHOD=POST name="frm">
Value: <INPUT TYPE="text" NAME="entry" VALUE=0 
onChange="calculate(this.name);"> <BR>
Action:<BR>
<INPUT TYPE="radio" NAME="action" VALUE="twice"
onClick="calculate(this.name);"> Double<BR>
<INPUT TYPE="radio" NAME="action" VALUE="square" 
onClick="calculate(this.name);"> 
Square <BR> Result: <INPUT TYPE=text NAME="result" VALUE=0  
 onChange="calculate(this.name);"> 
</document.frm>
</Body></HTML>

Xem ví dụ

6. Phần tử reset
Sử dụng đối tượng reset, cũng giống đối tượng button, đối tượng reset có hai thuộc tính là name và value và một sự kiện onClick. Đối tượng reset dùng để xoá form.
Ví dụ: Trang ResetButton.htm minh hoạ cách sử dụng nút reset để xoá các giá trị của form. 

<HTML>
<Head>
<Title>reset Example</Title>
<Script Language="JavaScript">
function clearForm(form) {
	form.value1.value = "Form";
	form.value2.value = "Cleared";
}
</Script>
</Head>
<Body>
<Form Method=Post>
<Input Type="text" NAME="value1"><BR> 
<Input Type="text" NAME="value2"><BR> 
<Input Type="reset" VALUE="Clear Form" onClick="clearForm(this.form);">
</Form>
</Body></HTML>

Xem ví dụ

7. Phần tử select
Danh sách lựa chọn trong các form xuất hiện menu drop-down hoặc danh sách cuộn được của các đối tượng có thể được lựa chọn. Các danh dách được xây dựng bằng cách sử dụng hai thẻ SELECT và OPTION. 

<SELECT NAME="test"> 
     <option SELECTED value=1>1 </option>
     <option value=2>2</option>
     <optin value=3>3</option>
</SELECT>

Tạo ra ba thành phần của menu thả drop-down với ba lựa chọn 1,2 và 3. Sử dụng thuộc tính SIZE bạn có thể tạo ta một danh sách cuộn với số phần tử hiển thị ở lần thứ nhất. Để bật menu drop-down trong một menu cuộn với hai thành phần hiển thị, bạn có thể sử dụng như sau:

<SELECT NAME="test" SIZE=2> 
      <option SELECTED value=1>1 </option>
     <option value=2>2</option>
     <optin value=3>3</option>
</SELECT>

Trong cả hai VÍ DỤ: trên, người sử dụng chỉ có 1 lựa chọn. Nếu sử dụng thuộc tính MULTIPLE, bạn có thể cho phép người sử dụng lựa chọn nhiều hơn 1 giá trị trong danh sách lựa chọn:

<SELECT NAME="test" SIZE=2 MULTIPLE>
 <option SELECTED value=1>1 </option>
     <option value=2>2</option>
     <optin value=3>3</option>
</SELECT>

Danh sách lựa chọn trong JavaScript là đối tượng select. Đối tượng này tạo ra một vài thành phần tương tự các button và radio.
Với các thành phần lựa chọn, danh sách các lựa chọn được chứa trong một mảng được đánh số từ 0. Trong trường hợp này, mảng là một thuộc tính của đối tượng select gọi là options.
Cả việc lựa chọn các option và từng phần tử option riêng biệt đều có những thuộc tính. Bổ sung thêm vào mảng option, phần tử select có thuộc tính selectedIndex, có chứa số thứ tự của option được lựa chọn hiện thời.
Mỗi option trong danh sách lựa chọn đều có một vài thuộc tính:

Thuộc tính Giải thích
DEFAULTSELECTED Cho biết option có mặc định là chọn trong thẻ OPTION hay không.
INDEX Chứa giá trị số thứ tự của option hịên thời trong mảng option.
SELECTED Cho biết trạng thái hiện thời của option
TEXT Có chứa giá trị của dòng text hiển thị trên menu cho mỗi option, và thuộc tính value mọi giá trị chỉ ra trong thẻ OPTION.

Ví dụ:

<html>
<body>
<script>
function testCbo(){
	
	id= document.frm.cbotest.options[document.frm.cbotest.selectedIndex].value
	name= document.frm.cbotest.options[document.frm.cbotest.selectedIndex].text
	alert("ID: "+id+"Tên: "+name)
}
</script>
<Form method=post name="frm" >
  <select  name="cbotest" onchange="testCbo()">
  <option value="1">Tý</option>
  <option value="2">Tèo</option>
  <option value="3">Tủn</option>
  <option value="4">Tửng</option>
  </select>
</Form>
</body>
</html>

Xem ví dụ

8. Phần tử submit
Nút Submit là một trường hợp đặc biệt của button, cũng như nút Reset. Nút này đưa thông tin hiện tại từ các trường của form tới địa chỉ URL được chỉ ra trong thuộc tính ACTION của thẻ form sử dụng cách thức METHOD chỉ ra trong thẻ FORM.

9. Phần tử Text
Phần tử này nằm trong những phần tử hay được sử dụng nhất trong các form HTML. Trường text cho phép nhập vào một dòng đơn.
Bảng sau mô tả các thuộc tính và phương thức.

Cách thức và thuộc tính Mô tả
defaultValue Chỉ ra giá trị mặc định của phần tử được chỉ ra trong thẻ INPUT (thuộc tính)
name Tên của đối tượng được chỉ ra trong thẻ INPUT (thuộc tính)
value Giá trị hiện thời của phần tử (thuộc tính)
focus() Mô tả việc con trỏ tới trường text (cách thức)
blur() Mô tả việc con trỏ rời trường text (cách thức)
select() Mô tả việc lựa chọn dòng text trong trường text (cách thức)

Ví dụ:

<TITLE>TextField Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
	function echo(currentField){
       if (currentField == "first")
         document.frm.second.value = document.frm.first.value; 
       else
         document.frm.first.value = document.frm.second.value; 
     }
</SCRIPT>
</HEAD>
<BODY>
<FORM name="frm">
	<INPUT TYPE=text NAME="first" onChange="echo(this.name);"> 
	<INPUT TYPE=text NAME="second"  onChange="echo(this.name);"> 
</FORM>
</BODY>
</HTML>

Xem ví dụ

10. Phần tử Textarea
Thẻ TEXTAREA cung cấp một hộp cho phép nhập số  dòng text do người thiết kế định trước.

Ví dụ:

<TEXTAREA NAME="fieldName" ROWS=10 COLS=25>
     Default Text Here
</TEXTAREA>