Các Form cung cấp cách thức nhóm các phần tử tương tác HTML với nhau với cùng một mục đích. Ví dụ, một form chứa các phần tử cho phép người sử dụng nhập dữ liệu ví dụ như đăng kí hòm thư miễn phí.
Cú pháp:
<form các thuộc tính >
Các thẻ (các điều khiển như input, button) </form>
Thuộc tính Giá trị Miêu tả DTD
action URL Một URL định nghĩa nơi gửi dữ liệu khi mà phím submit được bấm
STF
Các thuộc tính lựa chọn
Thuộc tính Giá trị Miêu tả DTD
accept Hiển thị kiểu nội dung STF
accept-charset charset_list Danh sách tách biệt dấu “,” của tập kí tự từ dữ liệu form. Giá trị mặc định là "unknown"
STF
enctype mimetype Kiểu mime sử dụng mã hóa nội dung của form
STF
method get
post
Phương thức HTTP gửi dữ liệu đển URL hoạt động. Mặc định là get
method="get": Phương thức này gửi nội dung form trong URL:
URL?name=value&name=value. Chú ý: nếu giá trị form không phải là kí tự ASSCII hoặc vượt quá 100 kí tự, cần phải dùng
method="post".
method="post": PHương thức này gửi nội dụng trong phần body của yêu cầu. Chú ý: hầu hết các trình duyệt không để đánh dấu các yêu cầu post
STF
name form_name Xác định tên duy nhất của form TF
target _blank
_self _parent _top
Đích mở URL.
_blank – mở URL trong cửa sổ mới _self – mở URL ngay trong cùng frame _parent – mở trong frameset cha _top – mở trong body của cửa sổ
TF
Các thuộc tính chuẩn
id, class, title, style, dir, lang, xml:lang
Ví dụ: <form name="myForm"> </form> Mảng các form <html> <head>
<script language="JavaScript" type="text/javascript"> function window_onload()
var numberForms = document.forms.length; var formIndex;
for (formIndex = 0; formIndex < numberForms; formIndex++) { alert(document.forms[formIndex].name); } } </script> </head>
<body language=JavaScript type="text/javascript" onload="window_onload()"> <form name="form1">
<p>This is inside form1</p> </form>
<form name="form2"> <p>This is inside form2</p> </form>
<form name="form3"> <p>This is inside form3</p> </form>
</body> </html>
Các thuộc tính và phương thức khác của form
Có thể truy cập vào các điều khiển trong form bằng thuộc tính elements[] của đối tượng form. Mảng này giống như thuộc tính mảng forms[] của đối tượng document. Mảng elements[] chúa tất cả các đối tượng tương ứng với các phần tử tương tác HTML bên trong form, ngoại trừ sự kiện <input type=image>.
Các thuộc tính rất có ích cho việc lặp các phần tử trong mẫu. Ví dụ, có thể lập mỗi phần tử để kiểm tra tính hiệu lức của dữ liệu nhấp vào trước khi gửi đi.
Thuộc tính elements[] của đối tượng có thuộc tính length cho phép biết được có bao nhiều phần tử trong form. Đối tượng form cũng có thuộc tính length cho phép biết được số các phần tử trong form. document.myForm.length tương đương document.myForm.elements.length. Khi submit dữ liêu tới server, chúng ta thường sử dụng button submit, tuy nhiên đối tượng Form có một method submit(), thực hiện gần giống như phím submit. Sự khác nhau đó là xử lý sự kiện onsubmit không được gọi khi sử dụng phương thức submit() của đối tượng method()
Các phân tử HTML trong Form
Hầu hết các phần tử được tạo ra đều sử dụng tag <input>. Một trong thuộc tính quan trọng của input đó là thuộc tính type. Thuộc tính này xác định phần từ sẽ là gì.
Các phương thức và thuộc tính chung
Thuộc tính name: sử dụng giá trị thuộc tính này để tham chiếu tới phân tử trong script. Thuộc tính value: trả về giá trị của phần tử.
Thuộc tính type: trả về thuộc tính của phần tử
Phương thức focus() và blur(): Nếu có một phẩn tử được focus, bất kì gõ phím bất kỳ sẽ được gửi tới phần tử này. Trong trường hợp focus vào phím nếu gõ phím enter tương đương với xử lý sự kiện onclick.
Người sử dụng có thể thiết lập focus bằng cách sử dụng click vào hoặc sử dụng phím tab để lựa chọn. Tuy nhiên, người lập trình có thể quyết định phần tử nào được focus bằng cách sử dụng phương thức focus() của đối tượng element. Ví dụ, nếu chúng ta có một text box cho người sử dụng đưa vào tuổi. Trong trường hợp người sử dụng đưa vào giá trị là kí tự, chúng ta có thể yêu cầu nhập lại. Phương thức blur() đối ngược với phương thức focus().
Đối với các phương thức focus() và blur(), tất cả các đối tượng của phần tử có xử lý sự kiện onfocus và onblur.
Các phần tử Button
Cú pháp <input type=””, ….>
<input type="button" name="myButton" value="Click Me"> <html> <head> <script language=JavaScript> var numberOfClicks = 0; function myButton_onclick() { numberOfClicks++;
window.document.form1.myButton.value = 'Button clicked ' + numberOfClicks + ' times'; } </script> </head> <body> <form name=form1>
<input type='button' name='myButton' value='Button clicked 0 times' onclick="myButton_onclick()"> </form> </body> </html> onmouseup và onmousedown <html> <head> <script language=JavaScript> function myButton_onmouseup() {
document.form1.myButton.value = "Mouse Goes Up" }
function myButton_onmousedown() {
document.form1.myButton.value = "Mouse Goes Down" }
</head> <body>
<form name=form1>
<input type='button' name='myButton' value=' Mouse Goes Up ' onmouseup="myButton_onmouseup()" onmousedown="myButton_onmousedown()"> </form> </body> </html> Các phím Submit và Reset
<input type="submit" value="Submit" name="submit1"> <input type="reset" value="Reset" name="reset1">
Khi click vào phím submit, dữ liệu từ form mà phím nằm cùng sẽ tự động gửi tới sever, mà không cần bắt kỳ một script nào cả. Tương tự cũng như vậy khi click vào phím reset, tất cả các phần tử trong form sẽ bị xóa bỏ và hiển thị giá trị mặc định. Phím submit và reset tương đương với đối tượng Submit và Reset, có thuộc tính, phương thức, và sự kiện giống như đối tượng Button
Phần tử Text
Cú pháp <input type=”text” ….>
<input type="text" name="myTextBox" size=10 maxlength=15 value="Hello World">
Phương thức select(), parseINt() hoặc parseFloat() hoặc Number()
Sự kiện của object Text: onchange, onselect, onkeydown, onkeypress, và onkeyup <input type="text" name=txtReadonly value="Look but don't change"
onfocus="window.document.form1.txtReadonly.blur()" READONLY=true>
Ví dụ form đơn giản kiểm tra dữ liệu đầu vào
<html> <head>
<script language=JavaScript> function butCheckForm_onclick() {
var myForm = document.form1;
if (myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert("Please complete all the form"); if (myForm.txtName.value == "") { myForm.txtName.focus(); } else { myForm.txtAge.focus(); } } else {
alert("Thanks for completing the form " + myForm.txtName.value); }
}
function txtAge_onblur() {
var txtAge = document.form1.txtAge; if (isNaN(txtAge.value) == true) {
alert("Please enter a valid age"); txtAge.focus(); txtAge.select(); } } function txtName_onchange() {
window.status = "Hi " + document.form1.txtName.value; }
</script> </head> <body>
<form name=form1>
Please enter the following details: <p>
Name: <br>
<input type="text" name=txtName onchange="txtName_onchange()"> <br>
Age: <br>
<input type="text" name=txtAge onblur="txtAge_onblur()" size=3 maxlength=3> <br>
<input type="button" value="Check Details" name=butCheckForm onclick="butCheckForm_onclick()">
</form> </body> </html>
Hộp text mậtkhẩu
<input name=password1 type=password>
Hộp text ẩn
<input type="hidden" name=myHiddenElement>
Phần tử textarea
<textarea name=myTextArea cols=40 rows=20>Hello World Line 2
</textarea>
Theo dõi dự kiện
Để trơ giúp minh họa các sự kiện như phím lên, xuống, bấm phím bất kì.. làm việc như thế nào, ví dụ dưới đây minh họa điều đó
<html> <head>
<script language=JavaScript> function DisplayEvent(eventName) {
var myMessage = window.document.form1.textarea2.value; myMessage = myMessage + eventName;
window.document.form1.textarea2.value = myMessage; } </script> </head> <body> <form name=form1>
<textarea rows=15 cols=40 name=textarea1 onchange="DisplayEvent('onchange\n');" onkeydown="DisplayEvent('onkeydown\n');" onkeypress="DisplayEvent('onkeypress\n');"
onkeyup="DisplayEvent('onkeyup\n\n');"></textarea> <textarea rows=15 cols=40 name=textarea2></textarea> <br><br>
<input type="button" value="Clear Event TextArea"
name=button1 onclick="window.document.form1.textarea2.value=''"> </form>
</body> </html>
Checkboxes và Phím Radio
<input type="checkbox" name=chkDVD checked value="DVD"> <input type="radio" name=radCPUSpeed checked value="1 GHz"> For example, to create a group of three radio buttons, our HTML would be <input type="radio" name=radCPUSpeed checked value="800 MHz"> <input type="radio" name=radCPUSpeed value="1 GHz">
<input type="radio" name=radCPUSpeed value="1.5 GHz">
Ví dụ: <html> <head> <script language=JavaScript> var radCpuSpeedIndex = 0; function radCPUSpeed_onclick(radIndex) {
var returnValue = true; if (radIndex == 1) {
returnValue = false;
alert("Sorry that processor speed is currently unavailable"); // Next line works around a bug in IE that doesn't cancel the // Default action properly
document.form1.radCPUSpeed[radCpuSpeedIndex].checked = true; }
else {
radCpuSpeedIndex = radIndex; } return returnValue; } function butCheck_onclick() { var controlIndex; var element;
var numberOfControls = document.form1.length; var compSpec = "Your chosen processor speed is ";
compSpec = compSpec + document.form1.radCPUSpeed[radCpuSpeedIndex].value; compSpec = compSpec + "\nWith the following additional components\n";
for (controlIndex = 0; controlIndex < numberOfControls; controlIndex++) { element = document.form1[controlIndex]; if (element.type == "checkbox") { if (element.checked == true) {
compSpec = compSpec + element.value + "\n"; } } } alert(compSpec); } </script> </head> <body> <form name=form1>
<p> Tick all of the components you want included on your computer <br><br> <table> <tr>
<td>DVD-ROM</td>
<td><input type="checkbox" name="chkDVD" value="DVD-ROM"></td> </tr> <tr>
<td>CD-ROM</td>
<td><input type="checkbox" name="chkCD" value="CD-ROM"></td> </tr> <tr>
<td>Zip Drive</td>
<td><input type="checkbox" name="chkZip" value="ZIP Drive"></td> </tr>
</table> <p>
Select the processor speed you require <table> <tr>
<td><input type="radio" name="radCPUSpeed" checked
onclick="return radCPUSpeed_onclick(0)" value="3.8 GHz"></td> <td>3.8 GHz</td> <td><input type="radio" name="radCPUSpeed" onclick="return radCPUSpeed_onclick(1)" value="4.8 GHz"></td> <td>4.8 GHz</td>
<td><input type="radio" name="radCPUSpeed"
<td>6 GHz</td> </tr> </table>
</p> <input type="button" value="Check Form" name="butCheck" onclick="return butCheck_onclick()">
</form> </body> </html>
Phần tử select
<select> and </select> tags. <select name=theDay size=5> <option value=0 selected>Monday <option value=1>Tuesday <option value=2>Wednesday <option value=3>Thursday <option value=4>Friday <option value=5>Saturday <option value=6>Sunday </select>
Thẻ <option> Monday chứa từ được lựa chọn, tạo ra lựa chọn mặc định khi trang được nạp. Giá trị của các option được định nghĩa bởi số.
Nếu muốn tạo thành hộp danh sách rơi xuống, chúng ta cần thay đổi thuộc tính size trong thẻ <select> thành 1: <select name=theDay size=5>
Nếu muốn người dùng lựa chọn nhiều hơn một giá trị trong danh sách tại một thời điểm, cần bổ sung thêm thuộc tính multiple.
Thẻ <select> tạo ra đối tượng Select. Đối tượng này có thuộc tính mảng options[], và mảng này tao ra các đối tượng Option, mỗi một phần tử <option> trong phần tử <select> kết hợp với đối tượng Select. Ví dụ: ở ví dụ trước, nếu phần tử <select> chứ trong form (tên form là theform) thì:
Document.theform.theday.options[0] tham chiếu tới giá trị đầu tiên (Monday)
Đối tượng Option có index, text và thuộc tính giá trị. Thuộc tính index trả về vị trị của option trong mảng options[]. Thuộc tinh text được hiển thị trong danh sách, còn thuộc tính value xác định giá trị cho option.
Ví dụ
var theDayElement = window.document.form1.theDay;
document.write("There are " + theDayElement.length + "options<br>"); var optionCounter;
for (optionCounter = 0; optionCounter < theDayElement.length; optionCounter++) {
document.write("Option text is " + theDayElement.options[optionCounter].text) document.write(" and its value is ");
document.write(theDayElement.options[optionCounter].value); document.write("<br>")
}
- Tạo ra đối tượng mới Option
- Bổ sung vào mảng options[] phần tủ option
var myNewOption = new Option("TheText","TheValue"); document.theForm.theSelectObject.options[0] = myNewOption;
Loại bỏ option: gán bằng giá trị null
document.theForm.theSelectObject.options[0] = null; Ví dụ <html> <head> <script language=JavaScript> function butRemoveWed_onclick() { if (document.form1.theDay.options[2].text == "Wednesday") { document.form1.theDay.options[2] = null; } else {
alert('There is no Wednesday here!'); } } function butAddWed_onclick() { if (document.form1.theDay.options[2].text != "Wednesday") { var indexCounter;
var days = document.form1.theDay; var lastoption = new Option(); days.options[6] = lastoption;
for (indexCounter = 6;indexCounter > 2; indexCounter--) {
days.options[indexCounter].text = days.options[indexCounter - 1].text; days.options[indexCounter].value = days.options[indexCounter - 1].value; }
var option = new Option("Wednesday",2); days.options[2] = option;
} else {
alert('Do you want to have TWO Wednesdays?????'); } } </script> </head> <body> <form name=form1>
<select name=theDay size=5> <option value=0 selected>Monday <option value=1>Tuesday
<option value=2>Wednesday <option value=3>Thursday
<option value=4>Friday <option value=5>Saturday <option value=6>Sunday </select>
<br>
<input type="button" value="Remove Wednesday" name=butRemoveWed onclick="butRemoveWed_onclick()">
<input type="button" value="Add Wednesday" name=butAddWed onclick="butAddWed_onclick()">
<br> </form> </body> </html>
Bổ sung Option mới trong IE
Trong IE< có rất nhiều thuộc tính bổ sung, phương thức và sự kiện được kết hợp với đối tượng. Mảng options[] có phương thức add() và remove() cho phép bổ sung và loại bỏ option. Trước khi bổ sung, cần phải tạo trước bằng cách sử dụng toán tử new
PHương thức add() có 2 tham số: giá trị và thứ tự Ví dụ
function butAddWed_onclick() {
if (document.form1.theDay.options[2].text != "Wednesday") {
var option = new Option("Wednesday",2); document.form1.theDay.options.add(option,2); }
else {
alert('Do you want to have TWO Wednesdays?????'); } } Ví dụ sử dụng phương thức remove() function butRemoveWed_onclick() { if (document.form1.theDay.options[2].text == "Wednesday") { document.form1.theDay.options.remove(2); } else {
alert('There is no Wednesday here!'); }
}
Các sự kiện phần tử lựa chọn
Các phần tử lựa Select có 3 sự kiện: onblur, onfocus và onchange. Ví dụ
<html> <head>
<script language=JavaScript>
function writeOptions(startNumber, endNumber) {
var optionCounter;
for (optionCounter = startNumber; optionCounter <= endNumber; optionCounter++) {
document.write('<option value=' + optionCounter + '>' + optionCounter); } } function writeMonthOptions() { var theMonth; var monthCounter;
var theDate = new Date(1);
for (monthCounter = 0; monthCounter < 12; monthCounter++) {
theDate.setMonth(monthCounter); theMonth = theDate.toString(); theMonth = theMonth.substr(4,3);
document.write('<option value=' + theMonth + '>' + theMonth); }
}
function recalcDateDiff() {
var myForm = document.form1;
var firstDay = myForm.firstDay.options[myForm.firstDay.selectedIndex].value; var secondDay = myForm.secondDay.options[myForm.secondDay.selectedIndex].value; var firstMonth = myForm.firstMonth.options[myForm.firstMonth.selectedIndex].value; var secondMonth = myForm.secondMonth.options[myForm.secondMonth.selectedIndex].value; var firstYear = myForm.firstYear.options[myForm.firstYear.selectedIndex].value; var secondYear = myForm.secondYear.options[myForm.secondYear.selectedIndex].value; var firstDate = new Date(firstDay + " " + firstMonth + " " + firstYear);
var secondDate = new Date(secondDay + " " + secondMonth + " " + secondYear); var daysDiff = (secondDate.valueOf() - firstDate.valueOf());
daysDiff = Math.floor(Math.abs((((daysDiff / 1000) / 60) / 60) / 24)); myForm.txtDays.value = daysDiff; return true; } function window_onload() {
var theForm = document.form1; var nowDate = new Date();
theForm.firstDay.options[nowDate.getDate() - 1].selected = true; theForm.secondDay.options[nowDate.getDate() - 1].selected = true; theForm.firstMonth.options[nowDate.getMonth()].selected = true; theForm.secondMonth.options[nowDate.getMonth()].selected = true; theForm.firstYear.options[nowDate.getFullYear()- 1970].selected = true;
theForm.secondYear.options[nowDate.getFullYear() - 1970].selected = true; }
</script> </head>
<body language=JavaScript onload="return window_onload()"> <form name=form1>
<p>
First Date<br>
<select name=firstDay size=1 onchange="return recalcDateDiff()"> <script language=JavaScript>
writeOptions(1,31); </script>
</select>
<select name=firstMonth size=1 onchange="return recalcDateDiff()"> <script language=JavaScript>
writeMonthOptions(); </script>
</select>
<select name=firstYear size=1 onchange="return recalcDateDiff()"> <script language=JavaScript> writeOptions(1970,2010); </script> </select> </p> <p> Second Date<br>
<select name=secondDay size=1 onchange="return recalcDateDiff()"> <script language=JavaScript>
writeOptions(1,31); </script>
</select>
<select name=secondMonth size=1 onchange="return recalcDateDiff()"> <script language=JavaScript>
writeMonthOptions(); </script>
</select>
<select name=secondYear size=1 onchange="return recalcDateDiff()"> <script language=JavaScript>
writeOptions(1970,2010); </script>
</select> </p>
Total difference in days
<input type="text" name=txtDays value=0 readonly> <br>
</form> </body>
Chương V Active Server Pages 5.1.Giới thiệu công nghệ ASP
ASP là công nghệ cho phép tạo ra những trang web động có khả năng giao tiếp với người dùng bằng cách lập trình script ở trên máy chủ. Mã nguồn của những chương trình này thường được viết bằng ngôn ngữ VBScript và được nhúng vào các thẻ đặc biệt trong HTML. Những trang web này sẽ được dịch ở máy chủ và gửi kết quả là những trang HTML thông thường về phía người dùng.
Công nghệ ASP được gói trọn trong thư viện liên kết động nhỏ (khoảng 300KB) có tên là ASP.DLL, thư viện này được nằm trong bộ nhớ của server và khi bất kì người sử dụng nào có yêu cầu đến một file .ASP thì lưới lọc ISAPI này sẽ quản lý phần biên dịch. ASP sẽ nạp tất cả các DLLs cần thiết vào bộ nhớ, thực thi các mã phía máy chủ có liên quan đến Active Server Pages và kết quả tạo ra là một trang web dưới hạng HTML. Kết quả này được mãy chủ gửi về phía trình duyệt của máy khách.