Tạo Form
- Đặt con trỏ nháy tại vị trí muốn tạo form. - Tạo Form:
C1: Click chọn nút Form trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn Form.
- Sau đó xuất hiện khung viền không liền nét màu đỏ trên trang đại diện cho giới hạn trong Form.
Chèn các thành phần Form Khung nhóm-Fieldset
Mục đích-Purpose - Dùng để đặt tên cho 1 nhóm các điều khiển.- VD: Cá nhân, Xã hội…
Chèn-Insert
- Đặt con trỏ nháy tại vị trí muốn chèn ở trong form. - Chèn Khung nhóm-Fieldset:
C1: Click chọn nút Fieldset trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn Fieldset. - Sau đó xuất hiện hộp thoại Fieldset:
+ Nhập tên khung vào hộp .
Hộp nhập liệu-Text Field Mục đích-
Purpose - Dùng để nhập các thông tin ngắn nằm gọn trong một dòng văn bản.- VD: Họ tên, Địa chỉ, Số điện thoại …
Chèn-Insert - Đặt con trỏ nháy tại vị trí muốn chèn ở trong form. - Chèn Ô nhập liệu-Text Field:
C1: Click chọn nút Text Field trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn Text Field. - Sau đó xuất hiện hộp thoại Input Tag Accessibility Attributes:
2 bước làm Tạo Form Tạo Form Chèn các thành phần Form Thành phần của Form Hộp nhập (Bàn phím) Hộp chọn (Chuột)
+ Nhập nhãn của hộp nhập liệu vào hộp . - Khi đó xuất hiện 1 hộp nhập liệu trên trang như sau . - Chọn hộp nhập liệu.
- Định dạng trên thanh thuộc tính:
+ Nhập chiều dài hộp nhập liệu (đơn vị tính là kí tự) vào hộp . + Nhập chiều dài dữ liệu nhập tối đa vào hộp .
+ Nhập dữ liệu hiển thị mặc định trên hộp nhập liệu vào hộp .
Hộp mật khẩu-Password Mục đích-
Purpose - Dùng để nhập thông tin mật khẩu, đặc điểm của thông tin mật khẩu là sẽ không hiển thị kí tự cụ thể khi nhập. Chèn-Insert
- Giống chèn hộp nhập liệu.
- Nhưng sau đó chọn hộp nhập liệu rồi chọn hộp trên thanh thuộc tính. - Khi đó xuất hiện 1 hộp nhập mật khẩu trên trang như sau .
Hộp văn bản-Text Area
Mục đích-Purpose - Dùng để nhập các thông tin dài nằm trong nhiều dòng văn bản.- VD: Ý kiến, Nội dung …
Chèn-Insert
* Dùng nút Textarea:
- Đặt con trỏ nháy tại vị trí muốn chèn ở trong form. - Chèn Ô văn bản-Text Area:
C1: Click chọn nút Textarea trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn Textarea. - Sau đó xuất hiện hộp thoại Input Tag Accessibility Attributes:
+ Nhập nhãn của hộp văn bản vào hộp . - Khi đó xuất hiện 1 hộp văn bản trên trang như sau . - Chọn hộp văn bản.
- Định dạng trên thanh thuộc tính: (adsbygoogle = window.adsbygoogle || []).push({});
+ Nhập chiều dài hộp văn bản (đơn vị tính là kí tự) vào hộp . + Nhập chiều cao hộp văn bản (đơn vị tính là dòng) vào hộp .
+ Nhập dữ liệu hiển thị mặc định trên hộp văn bản vào hộp . * Dùng nút Text Field:
- Giống chèn hộp nhập liệu.
- Nhưng sau đó chọn hộp nhập liệu rồi chọn hộp trên thanh thuộc tính.
Hộp lựa chọn-Radio Button
Mục đích-Purpose - Dùng để chọn 1 và chỉ một thông tin trong nhiều nhóm thông tin được đưa ra.- VD: Giới tính …
Chèn-Insert
* Dùng Nhóm hộp lựa chọn-Radio Group: (Chèn nhiều) - Đặt con trỏ nháy tại vị trí muốn chèn ở trong form. - Chèn Hộp lựa chọn-Radio Group:
C1: Click chọn nút Radio Group trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn Radio Group. - Sau đó xuất hiện hộp thoại Radio Group:
+ Nhập tên của nhóm hộp lựa chọn vào hộp . + Thêm, xóa, nhập nhãn, nhập giá trị ở khung . - Khi đó xuất hiện 1 nhóm hộp lựa chọn trên trang như sau .
* Dùng Hộp lựa chọn-Radio Button: (Chèn một) - Đặt con trỏ nháy tại vị trí muốn chèn ở trong form. - Chèn Hộp lựa chọn-Radio Button:
C1: Click chọn nút Radio Button trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn Radio Button. - Sau đó xuất hiện hộp thoại Input Tag Accessibility Attributes:
+ Nhập nhãn của hộp lựa chọn vào hộp . - Khi đó xuất hiện 1 hộp lựa chọn trên trang như sau .
- Chọn hộp lựa chọn.
- Định dạng trên thanh thuộc tính:
+ Chọn hộp để hộp lựa chọn được đánh dấu sẵn trước.
+ Chọn hộp để hộp lựa chọn không được đánh dấu sẵn trước.
Hộp đánh dấu-Check Box
Mục đích-Purpose - Dùng để chọn 1 hay nhiều thông tin trong nhiều nhóm thông tin được đưa ra.- VD: Sở thích, Bằng cấp … Chèn-Insert - Đặt con trỏ nháy tại vị trí muốn chèn ở trong form.
- Chèn Hộp đánh dấu chọn-Check Box:
C1: Click chọn nút Checkbox trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn Checkbox. - Sau đó xuất hiện hộp thoại Input Tag Accessibility Attributes:
+ Nhập nhãn của hộp đánh dấu chọn vào hộp . - Khi đó xuất hiện 1 hộp đánh dấu chọn trên trang như sau .
- Chọn hộp đánh dấu chọn. - Định dạng trên thanh thuộc tính:
+ Chọn hộp để hộp đánh dấu chọn được đánh dấu sẵn trước.
+ Chọn hộp để hộp đánh dấu chọn không được đánh dấu sẵn trước.
Hộp danh sách thả xuống-Menu
Mục đích-Purpose - Dùng để chọn 1 hay nhiều (nên là 1) thông tin trong nhiều nhóm thông tin được đưa ra.- VD: Thành phố, Trình độ …
Chèn-Insert
- Đặt con trỏ nháy tại vị trí muốn chèn ở trong form. - Chèn Hộp danh sách thả xuống-Combo Box:
C1: Click chọn nút List/Menu trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn List/Menu. - Sau đó xuất hiện hộp thoại Input Tag Accessibility Attributes: (adsbygoogle = window.adsbygoogle || []).push({});
+ Nhập nhãn của hộp danh sách thả xuống vào hộp . - Khi đó xuất hiện 1 hộp danh sách thả xuống trên trang như sau .
- Chọn nút trên thanh thuộc tính.
- Sau đó xuất hiện hộp thoại List Values để thêm, xóa, thay đổi vị trí danh sách thả xuống:
Hộp danh sách-List
Mục đích-Purpose - Dùng để chọn 1 hay nhiều thông tin trong nhiều nhóm thông tin được đưa ra.- VD: Thành phố, Trình độ …
Chèn-Insert
- Giống chèn Hộp danh sách thả xuống-Menu. - Trên thanh công cụ thuộc tính, chọn thêm:
+ Hộp .
+ Nhập số dòng danh sách sẽ hiển thị ở hộp .
+ Nếu muốn cho phép chọn nhiều thì chọn hộp .
Hộp danh sách liên kết-Jump Menu Mục đích-
Purpose - Dùng để mở 1 trang Web liên kết trong nhiều trang được đưa ra.- VD: Echip, PCWorld VN, VNExpress …
Chèn-Insert - Đặt con trỏ nháy tại vị trí muốn chèn ở trong form.
- Chèn Hộp danh sách liên kết-Jump Menu:
C1: Click chọn nút Jump Menu trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn Jump Menu. - Sau đó xuất hiện hộp thoại Insert Jump Menu:
+ Thêm, xóa, thay đổi vị trí ở khung . + Nhập văn bản liên kết vào hộp . VD: Echip.
+ Nhập địa chỉ Web vào hộp . VD:
http://www.echip.com.vn. Hộp gửi kèm file-File Field
Mục đích-
Purpose - Dùng để chọn tập tin để tải lên máy chủ.
Chèn-Insert
- Đặt con trỏ nháy tại vị trí muốn chèn ở trong form. - Chèn Hộp gửi kèm file-File Field:
C1: Click chọn nút File Field trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn File Field. - Sau đó xuất hiện hộp thoại Input Tag Accessibility Attributes:
+ Nhập nhãn của hộp gửi kèm file vào hộp . - Khi đó xuất hiện 1 hộp danh sách thả xuống trên trang như sau
.
Nút Gửi-Submit, Xóa-Reset-Button
Mục đích-Purpose - Nút Gửi-Submit dùng để gửi thông tin người xem đến máy chủ.- Nút Xóa-Reset dùng để xóa hết thông tin để nhập lại. Chèn-Insert * Nút Gửi-Submit Button:
- Đặt con trỏ nháy tại vị trí muốn chèn ở trong form. - Chèn Nút Gửi-Submit Button:
C1: Click chọn nút Button trên thanh công cụ Form. C2: Click chọn menu > chọn Form > chọn Button.
+ Chú ý là không nhập nhãn của nút gửi vào hộp . - Khi đó xuất hiện nút gửi trên trang như sau . (adsbygoogle = window.adsbygoogle || []).push({});
- Chọn nút.
- Nhập nhãn nút ở hộp . VD: Gửi.
* Nút Xóa-Reset Button:
- Giống nút gửi.
- Trên thanh thuộc tính, chọn thêm: + Hộp .
- Nhập nhãn nút ở hộp . VD: Xóa.
Ràng buộc dữ liệu-Validate Form: Mục đích-
Purpose - Kiểm tra dữ liệu nhập của người dùng trên Hộp nhập liệu-Text Field.
Ràng buộc- Validate
- Mở khung panel Tag Inspector:
Click chọn menu > chọn Behavior. Ấn phím Shift + F4.
- Sau đó xuất hiện khung panel Tag Inspector:
- Chọn form bằng cách đặt dấu nháy trên form.
- Click chọn nút Add Behavior > chọn Validate Form. - Khi đó xuất hiện hộp thoại Validate Form:
+ Chọn tên hộp nhập liệu ở khung danh sách . + Chọn hộp để yêu cầu ô nhập liệu đó phải được nhập.
+ Chọn hộp để cho phép hộp được nhập dữ liệu bất kì.
+ Chọn hộp để quy định dữ liệu nhập là dạng Email (tức có dấu @). + Chọn hộp để quy định hộp được nhập dữ liệu số.
+ Chọn hộp để quy định hộp được nhập dữ liệu số từ giá trị nào
đến giá trị nào.