ĐỐI TƯỢNG FORM
- Đối tượng form được thể hiện thông qua cặp thẻ <form> và </form>. Phần lớn các đối tượng của form thì phản ánh các thuộc tính của form. Một vài phần tử (element) của form gồm:
|
Button
|
Là một nút bấm hơn là một nút submit hay reset.
<input type= “button” value= “…” name = “….” Onclick= “…” />
Thuộc tính: type (xác định kiểu là button), name (xác định kiểu cho đối tượng), value (giá trị của đối tượng button – giá trị này sẽ hiển thị trên button được tạo này… còn name là tên của đối tượng để gọi khi cần sử dụng đến các sự kiện)
Sự kiện: onclick (sự kiện này sẽ được kích hoạt khi ta click vào đối tượng)
|
|
Checkbox
|
Là đối tượng tạo ra các lựa chọn trong form của html.
<input type= “checkbox” name = “…” checked= “checked” value= “” “các hàm xử lí xự kiện nếu cần”/>
Thuộc tính: type (xác định kiểu đối tượng là checkbox) name, value (dùng để xác định tên, và giá trị cho đối tượng.
Sự kiện: onclick= “…”.
|
|
Hidden
|
Là một trường ẩn. <input type= “hidden” />
|
|
Text/textarea
|
Là một trường text dùng để nhập dữ liệu dạng text vào.
Tuy nhiên, textarea cho phép nhập liệu theo nhiều dòng.
<input type= “text” defaultvalue = “” value= “” name = “” sự kiện cần thiết />
Thuộc tính: type, name, value, defaultvalue (xác định giá trị mặc định cho đối tượng)
Sự kiện thường dùng: Onblur, onfocus, onchange, onselect (cách sử dụng các sự kiện này đã được nêu ở phần trên.
|
|
Password
|
Là một trường text trong đó mỗi kí tự được nhập vào sẽ được mã hóa thành kí tự đặc biệt (*,…)
Thuộc tính và sự kiện tương tự như text.
|
|
Radiobutton
|
Là một nút bấm
<input type= “radio” name= “” value = “” length=”” checked=”” sự kiện />
Thuộc tính: type, name, value, length(cho biết số lượng đối tượng trong form), checked (xác định giá trị mặc định cho radiobutton – đã chọn).
Sự kiện: onclick.
|
|
Select
|
Một danh sách lựa chọn.
<select name= “” />
<option> option1 </option>
<option> option2 </option>
</select>
Thuộc tính: name, index (thuộc tính này lấy vị trí thứ n của đối tượng), length (trả về số mục số mục trong đối tượng), selected (thuộc tính cho biết mục nào được chọn) selectedindex (cho biết vị trí của thuộc tính đang được lựa chọn), text (lấy chuỗi đang hiển thị trong đối tượng).
Sự kiện: onblur, onfocus, onchange().
|
|
Submit
|
Là một nút submit, sử dụng trong form của file html.
<input type = “submit” value = “” />
Thuộc tính: name, value.
Sự kiện: onclick…
Chú ý: Khi sử dụng đối tượng submit này, ta nên sử dụng kèm với onsubmit được sử dụng trong phần form.
Ví dụ:
<form name =”myform” onsubmit = “alert(‘hello’)” >
|
|
Reset
|
Một nút reset trong form. Khi nháy chọn đối tượng reset mọi trường dữ liệu trong form sẽ được làm mới.
<input type = “reset” />
|
Ví dụ: Tạo form đăng kí tài khoản cho người dùng. Yêu cầu kiểm tra tất cả các trường phải được nhập đầy đủ trước khi submit. Nếu Trường nào chưa nhập thì đưa ra thông báo alert.
Hướng dẫn: Để miêu tả cho kiến thức của phần form này cũng như tổng hợp về các cách sử lí xự kiện, chúng ta sẽ cùng nhau tạo một form đăng kí với mức yêu cầu đơn giản là chỉ kiểm tra trường dữ liệu đã được điền vào hay chưa. Trong những phần sau sẽ đề cập đến việc kiểm tra tính đúng đắn của dữ liệu.
Ta có đoạn code HTML sau để tạo một form đăng kí cho người dùng.
<html>
<head>
<title> demo về form </title>
<style type = "text/css">
*{margin:0px; padding:0px;}
body{font-size: 24px; font-family: time new roman; background-color: #cccccc; }
#container{width:450px; border:#393 solid 5px; margin:auto; background-color:#FFF; }
#header {height: 50px; background-color: #393; }
#center{background-color:}
</style>
</head>
<script language="JavaScript">
function check(form)
{
if (form.id.value=='')
alert('Bạn chưa điền tên đăng nhập');
else
if (form.pass.value=='')
alert('bạn chưa điền mật khẩu');
else
if (form.ten.value=='')
alert('bạn chưa điền vào họ tên');
else
if(form.ns.value=='')
alert('bạn chưa điền vào ngày sinh');
else
if (form.mail.value=='')
alert('bạn chưa điền vào email');
else
alert('CHÚC MỪNG BẠN ĐÃ ĐĂNG KÍ THÀNH CÔNG');
}
</script>
<body>
<div id="container">
<div id = header>
FORM ĐĂNG KÍ THÔNG TIN </div>
<form name="myform" onSubmit="return check(myform)">
<p>Tên đăng nhập:* <br />
<input type="text" size="40" maxlength="50" name="id" /> <br /> (từ 6 đến 20 kí tự, không gồm kí tự đặc biệt)</p>
<p>Mật Khẩu: * <br />
<input type="password" size="40" maxlength="50" name="pass"/> </p>
<p>Họ và Tên: * <BR />
<input type="text" size="40" maxlength="50" name="ten" /> </p>
<p>Ngày sinh: * <br />
<input type="text" size="40" maxlength="50" name="ns" /> </p>
<p>Giới Tính:* <br />
Nam <input type="radio" name="gt" value="Nam" checked="checked" /> Nữ <input type="radio" name="gt" value="Nữ" /> </p>
<p>Email:* <br />
<input type="text" name="mail" size="40" maxlength="50" /> </p>
<p><input type="button" onClick="return check(myform)" value="Gửi đi" name="send" />
<input type="reset" value="Hủy Bỏ" name="hủy" " /> </p>
</form>
</div>
</div>
</body>
</html>
KẾT QUẢ:
GIẢI THÍCH:
TRONG PHẦN NÀY CÓ SỬ DỤNG HÀM CON (FUNCTION) - SỬ DỤNG CẤU TRÚC RẼ NHÁNH
SỬ DỤNG HÀM ALERT() ĐỂ ĐƯA RA THÔNG BÁO.
DÙNG SỰ KIỆN ONSUBMIT ĐỂ XEM XÉT, KIỂM TRA VÀ ĐƯA RA THÔNG BÁO TƯƠNG ỨNG (CÓ LỖI HAY CHÀO MỪNG).
DÙNG ĐỐI TƯỢNG SUBMIT CHO NGƯỜI DÙNG CLICK GỬI THÔNG TIN.
DÙNG ĐỐI TƯỢNG RESET ĐỂ XÓA TRẮNG TOÀN BỘ CÁC TRƯỜNG.
DÙNG CHECKED= “CHECKED” TRONG RAIDO GIỚI TÍNH ĐỂ XÁC ĐỊNH GIỚI TÍNH NAM LÀ MẶC ĐỊNH.