05 web course form
-
Upload
truong-day-nghe -
Category
Documents
-
view
641 -
download
5
Transcript of 05 web course form
![Page 1: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/1.jpg)
Lập trình và Thiết kế Web
Bai 5
Form
![Page 2: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/2.jpg)
Lập trình và Thiết kế Web – Bài : Form
Nội dung
Giới thiệu về Form
Các thành phần của Form
Một số thuộc tính tiện ích của Form và Input
Phân biệt phương thức GET/POST
Thẻ MARQUEE
![Page 3: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/3.jpg)
Lập trình và Thiết kế Web – Bài : Form
Nội dung
Giới thiệu về Form
Các thành phần của Form
Một số thuộc tính tiện ích của Form và Input
Phân biệt phương thức GET/POST
Thẻ MARQUEE
![Page 4: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/4.jpg)
Lập trình và Thiết kế Web – Bài : Form
Giới thiệu Form
Được dùng để nhận dữ liệu từ phía người dùng
Giúp gởi yêu cầu của người dùng đến trang xử lý trong ứng dụng web
Tag <form> dùng để chứa các thành phần khác của form
Những thành phần nhập liệu được gọi là Form Field – text field
– password field
– multiple-line text field
– ……
![Page 5: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/5.jpg)
Lập trình và Thiết kế Web – Bài : Form
Ví dụ
![Page 6: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/6.jpg)
Lập trình và Thiết kế Web – Bài : Form
Tag <Form>
Là container chứa các thành phần nhập liệu khác.
<FORM NAME=“…” ACTION=“…” METHOD=“…”>
<!-- các thành phần của Form -->
</FORM>
Các thuộc tính của </FORM>– NAME : tên FORM
– ACTION : chỉ định trang web nhận xử lý dữ liệu từ FORM này khi có sự kiện click của button SUBMIT.
– METHOD : Xác định phương thức chuyển dữ liệu (POST,GET)
![Page 7: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/7.jpg)
Lập trình và Thiết kế Web – Bài : Form
Tag <Form> - Ví dụ
<html>
<body>
<form Name=“Dangnhap”Action=“/admin/xlDangnhap.php”Method=“Post”>
………………
</form>
</body>
</html>
Dangnhap.htm
![Page 8: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/8.jpg)
Lập trình và Thiết kế Web – Bài : Form
Nội dung
Giới thiệu về Form
Các thành phần của Form
Một số thuộc tính tiện ích của Form và Input
Phân biệt phương thức GET/POST
Thẻ MARQUEE
![Page 9: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/9.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form
Gồm các loại Form Field sau:– Text field
– Password field
– Hidden Text field
– Check box
– Radio button
– File Form Control
– Submit Button, Reset Button, Generalized Button
– Multiple-line text field
– Label
– Pull-down menu
– Scrolled list
– Field Set
![Page 10: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/10.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Text Field
Dùng để nhập một dòng văn bản
Cú pháp<INPUT
TYPE = “TEXT”NAME = stringREADONLYSIZE = variantMAXLENGTH = longTABINDEX = integerVALUE = string…………
>
Ví dụ <input type=“text” name=“txtName” value=“This is one line text with 301” size=“20” maxlength=“30”>
t with 301
20
30
![Page 11: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/11.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Password Field
Dùng để nhập mật khẩu
Cú pháp<INPUT
TYPE = “PASSWORD”NAME = stringREADONLYSIZE = variantMAXLENGTH = longTABINDEX = integerVALUE = string…………
>
Ví dụ<input type=“Password” name=“txtPassword” value=“123456abc1234” size=“20” maxlength=“30”>
![Page 12: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/12.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Check box
Cú pháp<input
TYPE = “checkbox”NAME = “text”VALUE = “text”[checked]
>
Ví dụ <html> <body>
Check box group : <br>Anh van: <input type="checkbox" name="Languages1" value="En"><br>Hoa: <input type="checkbox" name="Languages2" value="Chz" checked><br>Nhut: <input type="checkbox" name="Languages3" value="Jp"><br>
</body></html>
![Page 13: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/13.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Radio button
Cú pháp<input
TYPE = “radio”NAME = “text”VALUE = “text”[checked]
>
Ví dụ<html> <body>
Radio Button Group : <br>Nam: <input type="radio" name="sex" value="nam" checked><br>Nu: <input type="radio" name="sex" value="nu“checked ><br>
</body></html>
<html> <body>
Radio Button Group : <br>Nam: <input type="radio" name="sex1" value="nam" checked><br>Nu: <input type="radio" name="sex2" value="nu“checked ><br>
</body></html>
![Page 14: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/14.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – File Form Control
Dùng để upload 1 file lên server
Cú pháp<form action=“…” method=“post” enctype=“multipart/form-data” name=“...”>
<input TYPE=“FILE” NAME=“…”>
</form>
Ví dụ <html><body>
<form name=“frmMain” action=“POST” enctype=“multipart/form-data”><input type="file" name="fileUpload">
</form></body></html>
![Page 15: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/15.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Submit button
Nút phát lệnh và gởi dữ liệu của form đến trang xử lý.
Mỗi form chỉ có một nút submit và nút này được viền đậm
Cú pháp:
<input TYPE=“submit” name=“…” value=“…”>
Ví dụ:
<input type="submit" name="btnSend" value="Send">
![Page 16: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/16.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Reset Button
Dùng để trả lại giá trị mặc định cho các control khác trong form
Cú pháp<input TYPE=“reset” name=“…” value=“…”>
Ví dụ
<input type=“reset” name=“btnReset” value=“Rest”>
![Page 17: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/17.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form - Generalized Button
Cú pháp<input type=“button” name=“…” value=“…” onclick=“script”>
Ví dụ
<input type="button" name=“btnNormal” value=“Press Me!” onclick="alert('Hello from JavaScript');" >
![Page 18: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/18.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Multiline Text Field
Dùng để nhập văn bản nhiều dòng
Cú pháp<TEXTAREA
COLS = longROWS = longDISABLEDNAME = stringREADONLYTABINDEX = integerWRAP = OFF | PHYSICAL | VIRTUAL>
……………</TEXTAREA>
Ví dụ <textarea cols="20" rows="5" wrap="off">
This is a text on multiline.</textarea>
20
5
![Page 19: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/19.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form - Label
Dùng để gán nhãn cho một Form Field
Cú pháp <LABEL
FOR = IDStringCLASS=stringSTYLE=string
>
Ví dụ
<label for="Languages">Anh văn: </label><input type="checkbox" name="Languages" id="Languages" value="Eng">
![Page 20: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/20.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Pull-down Menu
Dùng để tạo ra một combo box
Cú pháp<Select name=“…”>
<optgroup label=“…”>
<option [selected] value=“…” >……</option>
………
</optgroup>
<option [selected] value=“…” >……</option>………
</select>
![Page 21: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/21.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Pull-down Menu<html>
<body>
combo box:
<select name="DSSoftware">
<optgroup label="Multimedia">
<option value="WM10">Window Media 10</option>
<option value="JA9">Jet Audio 9</option>
</optgroup>
<optgroup label="Operation System">
<option value="WXP">Windows XP</option>
<option value="WXPSP2">Windows XP SP2</option>
<option value="WVT">Windows Vista</option>
</optgroup>
<option selected value="Office07">Office 2007</option>
</select>
</body>
</html>
![Page 22: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/22.jpg)
Lập trình và Thiết kế Web – Bài : Form
Các thành phần của Form – Field Set
Dùng để tạo ra Group box, nhóm các thành phần nhập liệu trong form
Cú pháp<fieldset>
<legend>GroupBox’s Name</legend><input ……>…
</fieldset>
Ví dụ <html><body> <fieldset>
<legend>Subject</legend><input type="checkbox" name="Subjects" value="Eng"> English<br><input type="checkbox" name="Subjects" value="Math" checked> Mathematics<br><input type="checkbox" name="Subjects" value="GraphTheory"> Graph Theory<br>
</fieldset></body></html>
![Page 23: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/23.jpg)
Lập trình và Thiết kế Web – Bài : Form
Nội dung
Giới thiệu về Form
Các thành phần của Form
Một số thuộc tính tiện ích của Form và Input
Phân biệt phương thức GET/POST
Thẻ MARQUEE
![Page 24: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/24.jpg)
Lập trình và Thiết kế Web – Bài : Form
Một số thuộc tính tiện ích của Form và Input
![Page 25: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/25.jpg)
Lập trình và Thiết kế Web – Bài : Form
Một số thuộc tính tiện ích của Form và Input
Accesskey=char– Tạo phím nóng cho form fields.
– Áp dụng cho tất cả form fields.
– Cách nhấn Alt + char
– Tránh các phím tắt của browser.
Title = string– Tạo tooltip cho form fields.
– Áp dụng cho tất cả form fields.
Autocomplete = ON/OFF– Gợi ý tự động khi nhập liệu.
– Áp dụng cho tất cả tag form, input.
![Page 26: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/26.jpg)
Lập trình và Thiết kế Web – Bài : Form
Bật chế độ Auto-complete cho IE
![Page 27: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/27.jpg)
Lập trình và Thiết kế Web – Bài : Form
Nội dung
Giới thiệu về Form
Các thành phần của Form
Một số thuộc tính tiện ích của Form và Input
Phân biệt phương thức GET/POST
Thẻ MARQUEE
![Page 28: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/28.jpg)
Lập trình và Thiết kế Web – Bài : Form
Phân biệt phương thức GET/POST - GET
Các đối số của Form được ghi chèn vào đường dẫn URL của thuộc tính action trong tag <Form>
Khối lượng dữ liệu đối số được truyền đi của Form bị giới hạn bởi chiều dài tối đa của một URL trên Address bar. (tối đa của một URL là 2048 bytes)
![Page 29: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/29.jpg)
Lập trình và Thiết kế Web – Bài : Form
Phân biệt phương thức GET/POST - POST
Các đối số của Form được truyền “ngầm” bên dưới
Khối lượng dữ liệu đối số được truyền đi của Form không phụ thuộc vào URL Không bị giới hạn
![Page 30: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/30.jpg)
Lập trình và Thiết kế Web – Bài : Form
![Page 31: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/31.jpg)
Lập trình và Thiết kế Web – Bài : Form
![Page 32: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/32.jpg)
Lập trình và Thiết kế Web – Bài : Form
Nội dung
Giới thiệu về Form
Các thành phần của Form
Một số thuộc tính tiện ích của Form và Input
Phân biệt phương thức GET/POST
Thẻ MARQUEE
![Page 33: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/33.jpg)
Lập trình và Thiết kế Web – Bài : Form
Thẻ MARQUEE
Dùng để tạo hiệu ứng chữ chạy trên màn hình trình duyệt
Cú pháp<MARQUEE
BEHAVIOR = ALTERNATE | SCROLL | SLIDEDIRECTION = DOWN | LEFT | RIGHT | UPLOOP = intSCROLLAMOUNT=longSCROLLDELAY=longWIDTH = long> Text Text Text
</MARQUEE>
Ví dụ
![Page 34: 05 web course form](https://reader036.fdocuments.in/reader036/viewer/2022062308/558e8b4c1a28ab6b4e8b47cc/html5/thumbnails/34.jpg)
Lập trình và Thiết kế Web – Bài : Form
Tự động chuyển hướng trang web
Tự động chuyển hướng trang web sang trang web khác (URL) sau một khoảng thời gian t (tính theo giây)
Cú pháp<head>
<META HTTP-EQUIV=“refresh” CONTENT=“t;URL=URL”>
</head>