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