Web1013 lab09

LAB 9: THIẾT KẾ FORM

LAB 9: THIẾT KẾ FORM
-------------------MỤC TIÊU:
Kết thúc bài thực hành này bạn có khả năng
 Thiết kế form nhập dữ liệu
BÀI 1 (3 ĐIỂM)
Thiết kế form đăng nhập

Hướng dẫn
 Tạo form với thẻ <form>
 Thêm các điều khiển vào form bằng cách sử dụng thẻ input với
o Type=”text”
o Type=”password”
o Type=”checkbox”
WEB1013 – XÂY DỰNG TRANG WEB

TRANG 1


LAB 9: THIẾT KẾ FORM
o Type=”submit”
 Sử dụng thẻ <label> để bọc checkbox
 Sử dụng thẻ <div> để chia nhóm các điều khiển và định dạng với CSS
<div class=”form-group”>
<div>User Name:</div>
<input type=”text” name=”username” class=”form-control”>
</div>
 Viết mã css cho
o .form-group{}
o .form-control{}

BÀI 2 (4 ĐIỂM)
Thiết kế form đăng ký

WEB1013 – XÂY DỰNG TRANG WEB

TRANG 2


LAB 9: THIẾT KẾ FORM
Hướng dẫn
 Tổ chức tương tự như bài 1
 Sử dụng thêm các control
o <select>
o <textarea>
 Chọn sẵn
o Giới tính là Nam
o Sở thích là Du lịch
o Quốc tịch là Việt nam
 Chú ý đây là form có upload nên cần
o Method=”post”
o Enctype=”multipart/form-data”
BÀI 3 (3 ĐIỂM) – GV CHO THÊM

WEB1013 – XÂY DỰNG TRANG WEB

TRANG 3