HTML Forms

Các Form cung cấp cách thức nhóm các phần tử tương tác HTML với nhau với cùng một mục đích. Ví dụ, một form chứa các phần tử cho phép người sử dụng nhập dữ liệu ví dụ như đăng kí hòm thư miễn phí.

Cú pháp:

<form các thuộc tính >

Các thẻ (cá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ổ

id, class, title, style, dir, lang, xml:lang

Ví dụ:

<form name="myForm"> </form>

Mảng các form

<html> <head> (adsbygoogle = window.adsbygoogle || []).push({});

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

Các thuộc tính và phương thức khác của form

Có thể truy cập vào các điều khiển trong form bằng thuộc tính elements[] của đối tượng form. Mảng này giống như thuộc tính mảng forms[] của đối tượng document. Mảng elements[] chúa tất cả các đối tượng tương ứng với các phần tử tương tác HTML bên trong form, ngoại trừ sự kiện <input type=image>.

Các thuộc tính rất có ích cho việc lặp các phần tử trong mẫu. Ví dụ, có thể lập mỗi phần tử để kiểm tra tính hiệu lức của dữ liệu nhấp vào trước khi gửi đi.

Thuộc tính elements[] của đối tượng có thuộc tính length cho phép biết được có bao nhiều phần tử trong form. Đối tượng form cũng có thuộc tính length cho phép biết được số các phần tử trong form. document.myForm.length tương đương document.myForm.elements.length. Khi submit dữ liêu tới server, chúng ta thường sử dụng button submit, tuy nhiên đối tượng Form có một method submit(), thực hiện gần giống như phím submit. Sự khác nhau đó là xử

lý sự kiện onsubmit không được gọi khi sử dụng phương thức submit() của đối tượng method()

Các phân tử HTML trong Form

Hầu hết các phần tử được tạo ra đều sử dụng tag <input>. Một trong thuộc tính quan trọng của input đó là thuộc tính type. Thuộc tính này xác định phần từ sẽ là gì.

Các phương thức và thuộc tính chung

Thuộc tính name: sử dụng giá trị thuộc tính này để tham chiếu tới phân tử trong script. Thuộc tính value: trả về giá trị của phần tử.

Thuộc tính form: trả về giá trị của form mà phần tử nằm bên trong. Thuộc tính type: trả về thuộc tính của phần tử

Phương thức focus() và blur(): Nếu có một phẩn tử được focus, bất kì gõ phím bất kỳ sẽ được gửi tới phần tử này. Trong trường hợp focus vào phím nếu gõ phím enter tương đương với xử lý sự kiện onclick.

Người sử dụng có thể thiết lập focus bằng cách sử dụng click vào hoặc sử dụng phím tab để lựa chọn. Tuy nhiên, người lập trình có thể quyết định phần tử nào được focus bằng cách sử dụng phương thức focus() của đối tượng element. Ví dụ, nếu chúng ta có một text box cho người sử dụng đưa vào tuổi. Trong trường hợp người sử dụng đưa vào giá trị là kí tự, chúng ta có thể yêu cầu nhập lại. Phương thức blur() đối ngược với phương thức focus().

Đối với các phương thức focus() và blur(), tất cả các đối tượng của phần tử có xử lý sự kiện onfocus và onblur.

Các phần tử Button

Cú phá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>

<html> <head>

<script language=JavaScript> function myButton_onmouseup() { (adsbygoogle = window.adsbygoogle || []).push({});

document.form1.myButton.value = "Mouse Goes Up" }

function myButton_onmousedown() {

document.form1.myButton.value = "Mouse Goes Down" }

</script> </head> <body>

<form name=form1>

<input type='button' name='myButton' value=' Mouse Goes Up ' onmouseup="myButton_onmouseup()"

onmousedown="myButton_onmousedown()"> </form>

</body> </html>

Các phím Submit và Reset

Khi click vào phím submit, dữ liệu từ form mà phím nằm cùng sẽ tự động gửi tới sever, mà không cần bắt kỳ một script nào cả. Tương tự cũng như vậy khi click vào phím reset, tất cả các phần tử trong form sẽ bị xóa bỏ và hiển thị giá trị mặc định. Phím submit và reset tương đương với đối tượng Submit và Reset, có thuộc tính, phương thức, và sự kiện giống như đối tượng Button

Phần tử Text

Cú phá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 của object Text: onchange, onselect, onkeydown, onkeypress, và 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 == "") {

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; } (adsbygoogle = window.adsbygoogle || []).push({});

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

<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; (adsbygoogle = window.adsbygoogle || []).push({});

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"

onclick="return radCPUSpeed_onclick(2)" value="6 Ghz"></td> <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. (adsbygoogle = window.adsbygoogle || []).push({});

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.

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

}

Bố sung mới option

- 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ụ (adsbygoogle = window.adsbygoogle || []).push({});

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> (adsbygoogle = window.adsbygoogle || []).push({});

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

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

Lập trình Web với ngôn ngữ HTML

Các tag cơ bản trong HTML