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