Bài giảng Thiết kế Web tĩnh - Phần 1: Ngôn ngữ HTML - Chương 6: Form

CHƯƠNG VI 
 FORM 
 I. GIỚI THIỆU FORM 
1. Form được sử dụng khi cần: 
 – Thu thập thông tin tên, địa chỉ, số điện thoại, email, …để 
 đăng ký cho người dùng vào một dịch vụ, một sự kiện 
 – Tập hợp thông tin để mua hàng 
 – Thu thập thông tin phản hồi về một Website 
 – Cung cấp công cụ tìm kiếm trên website 
2. Cách tạo: 
 Cú pháp: 
 Nội dung của Form 
 Trong đó: 
 -Method: xác định phương thức đưa dữ liệu lên máy 
 chủ, có 2 giá trị :Post và Get 
 – Nếu giá trị là GET thì trình duyệt sẽ tạo một câu 
 hỏi chứa trang URL, một dấu hỏi và các giá trị do 
 biểu mẫu tạo ra. Trình duyệt sẽ đổi script của câu 
 hỏi thành kiểu được xác định trong URL để xử lý. 
 – Nếu giá trị là POST thì dữ liệu trên biểu mẫu sẽ 
 được gửi đến script như một khối dữ liệu 
 -Action: là địa chỉ của script sẽ thực hiện khi form 
 được submit 
 II. CÁC PHẦN TỬ CỦA FORM 
Các phần tử của form thường sử dụng trên web gồm: 
– Input boxes: nhập dữ liệu dạng text và number 
– Radio buttons: dùng để chọn một tùy chọn trong danh 
 sách 
– Selection lists: dùng cho một danh sách dài các lựa 
 chọn, thường là trong Drop-down list box 
– Check boxes: chỉ định một item được chọn hay không 
– Text area: một text box có thể chứa nhiều dòng 
– Submit và Reset button: để gửi form đến CGI script 
 vừa để reset form về trạng thái ban đầu 
 INPUT BOXES 
 Là một hộp dòng đơn dùng để nhập văn bản hoặc số. 
 Để tạo các input boxes, sử dụng tag , tag 
 còn được sử dụng cho nhiều loại field 
 khác trên form. 
 Cú pháp: 
 Các giá trị của thuộc tính TYPE: 
 Mặc định giá trị của TYPE là text, nếu trong tag 
 không nhập thuộc tính TYPE thì loại 
 input boxes là text 
1. Text box: Hộp văn bản, do người sử dụng nhập vào 
 Cú pháp: 
<Input Type=”Text” Value=”Value” Name=”name” 
 Size=n Maxlength=m> 
– Name : tên dữ liệu đầu vào server 
– Value: Dữ liệu ban đầu có sẳn trong text box 
– Size: chiều rộng của text box tính bằng số ký tự 
 (mặc định là 20) 
– Maxlength: số ký tự tối đa có thể nhập vào text box 
 Ví dụ: 
 Form 
 UserName 
2. Tạo hộp Password: Những ký tự nhập vào hiển 
 thị dưới dạng dấu chấm , thông tin sẽ không bị 
 mã hoá khi gửi lên server 
 Cú pháp: 
<Input Type=”password” Name=”name” size=n 
 maxlength=n> 
– Size: chiều rộng của hộp Password, tính bằng ký tự 
– Maxlength: Số ký tự tối đa có thể nhập vào hộp 
 Password 
Form 
Password: 
3. Checkbox: Hộp chọn, người xem có thể đánh dấu 
 nhiều checkbox trong cùng 1bộ 
 Cú pháp: 
 <Input Type=”Checkbox” Name=”Name” 
 Value=”Value” Checked> Nhãn 
 – Name: tên của checkbox 
 – Value: xác định mỗi giá trị cho mỗi hộp 
 checkbox được gửi cho server khi người xem 
 đánh dấu vào checkbox 
 – Checked: thuộc tính để hộp check box được 
 chọn mặc định 
Ví dụ: 
Form 
 Hobby: 
 Music 
 Film 
 Sport 
4. Radio button: Cho phép người xem chỉ chọn một tuỳ 
 chọn tại mỗi thời điểm 
 Cú pháp: 
 <input type="radio" name="name“ value="Value" 
 checked >Nhãn 
 • Name: tên của radio, kết nối các radio button với nhau 
 • Value: Những dữ liệu sẽ gữi đến server khi radio 
 button được chọn 
 • Checked: thuộc tính để radio button được chọn mặc 
 định 
Ví dụ: 
 Form 
 User for 
 Home 
 Business 
 Government 
 Educational Institution 
 Other 
5. Submit Button: Tất cả thông tin của người xem nhập 
 vào sẽ được gửi đến server khi người xem click nút 
 Submit 
 Cú pháp: 
 <Input Type=”Submit” Value=”Submit Message” 
 Name=”Name”> 
 – Submit Message: Là chữ xuất hiện trên Button 
 – Name: tên của button 
6. Reset Button: Thiết lập giá trị ban đầu của tất cả các 
 điều khiển trên form 
 Cú pháp: 
 <Input Type=”reset” Value=”Reset Message” 
 Name=”Name”> 
 Có thể tạo nút Reset và Submit bằng hình ảnh với cú 
 pháp: 
 Nhãn chữ lề trái 
 Nhãn chữ lề phải 
7. Button: Nút dùng để thực hiện các lệnh do người 
 sửn dụng đưa ra 
 Cú pháp: 
8. Hidden: là các field mà người xem không nhìn thấy 
 trên trình duyệt, nhưng vẫn là một phần tử trên form. 
 Hidden field dùng để lưu trữ thông tin trong các form 
 trước, các thông tin này cần đi kèm với các dữ liệu 
 trong form hiện hành mà không muốn người xem nhập 
 lại 
 Cú pháp: 
 – Name: tên mô tả ngắn gọn thông tin cần lưu trữ 
 – Value: Thông tin cần lưu trữ 
 SELECTION LIST 
1. Drop down menu: 
Cú pháp: 
 Option 1 
 Option 2 
 … 
Nhãn:Giới thiệu Menu 
Name: tên dữ liệu đầu vào server 
Size: là chiều cao của menu tính bằng hàng chữ 
Multiple: là thuộc tính cho phép chọn nhiều đề mục (listbox) 
Selected: đề mục được chọn mặc định 
Value: xác định dữ liệu gởi cho server nếu đề mục được chọn 
 Ví dụ: 
 Dropdown menu 
 ScanMaster 
 ScanMaster II 
 LaserPrint 1000 
 LaserPrint 5000 
 Print/scan 150 
 Print/scan 250 
2. Lixbox: Nếu thêm thuộc tính Multiple thì ta được 
 dạng listbox 
 ScanMaster 
 ScanMaster II 
 LaserPrint 1000 
 LaserPrint 5000 
 Print/scan 150 
 Print/scan 250 
3. Phần tử OPTGROUP: được sử dụng để nhóm các 
 chọn lựa thành các nhóm riêng trong dropdown menu 
 hoặc listbox. 
 Cú pháp: 
 option1 
 option1 
 option1 
 …. 
 … 
 TEXTAREA 
TextArea: Hộp văn bản cho phép nhập nhiều dòng 
 Cú pháp: 
 Default text 
– Rows: số dòng có thể nhập vào TextArea (mặc định là 4) 
– Cols: độ rộng của textarea, tính bằng số ký tự, mặc định 
 là 40 
– Wrap: các dòng chữ tự động dàn ra trong lề của vùng text 
 area, Value: virtual,physical 
 Ví dụ: 
 Comments ? 
 <textarea rows=4 cols=50 name=comments 
 wrap=virtual> 
Nhãn: Dùng để tạo nhãn liên kết với thành phần đi kèm 
 Cú pháp: 
 Nội dung label 
Idname: là giá trị của thụôc tính ID trong thành phần Form 
 tương ứng 
Ví dụ: 
Firsname: 
 Last name: 
 Label 
 FIELDSET 
Nhóm các đối tượng giống nhau vào một phần logic 
 Cú pháp: 
 Chú thích 
 Các thành phần trong nhóm 
 -Tag: tạo chú thích cho nhóm 
 -Align=left, right: chỉ vị trí của chú thích 
 Ví dụ: 
 Position 
 Application for the post of: <INPUT name= 'name' type= 
 'text' tabindex= '1'> 
 Educational Qualifications 
 <INPUT name= 'qualif' type='radio' value= 'grad' 
 tabindex= '5'> Graduate 
 <INPUT name= 'qualif' type='radio' value='postgrad' 
 tabindex='5'> Postgraduate 
 Điều khiển các phần tử trên form 
1. Định thứ tự Tab: 
  Dùng phím tab để di chuyển giữa các đốitượng trong form, 
 mặc định theo thứ tự của mã HTML, muốn định lại thứ tự ta 
 dùng thuộc tính TabIndex=n trong tag tạo các thành phần của 
 form, trong đó n là thứ tự của tab, có giá trị từ 0 đến 32767 
  Trong một form ta thường định thứ tự tab cho các thành phần : 
 textbox, password, checkbox, radio button, textarea, menu và 
 button 
2. Tạo phím tắt: 
  Cách tạo: 
 Trong tag tạo các phần tử của form ta dùng thuộc tính 
 Accesskey=”Phím tắt” 
  Sử dụng phím tắt: Nhấn tổ hợp phím Alt+Phím tắt