LAB 10: THIẾT KẾ FORM (PHẦN II)

LAB 10: THIẾT KẾ FORM (PHẦN II)

--------------------

MỤC TIÊU:
Kết thúc bài thực hành này bạn có khả năng

 Xây dựng form thân thiện với người dùng với

o Các thuộc tính của các điều khiển
o Điều khiển HTML 5
o Định dạng với CSS

BÀI 1 (4 ĐIỂM)
Xây dựng form như sau

Yêu cầu kỹ thuật

 Quốc tịch được nhập sẵn và readonly

 Nút xóa bị vô hiệu hóa (disabled)
 Thứ tự tab: Họ và tên => Ghi chú => Nút thêm => Nút Sửa

WEB1013 – XÂY DỰNG TRANG WEB TRANG 1

 LAB 10: THIẾT KẾ FORM (PHẦN II)
 Định dạng với CSS

Hướng dẫn

 Tổ chức form
<form>
<div class="form-group">
Họ và tên
</div>
<div class="form-group">
Quốc tịch
</div>
<div class="form-group">
Ghi chú
</div>
<hr />
<div class="form-group">
Các nút
</div>
</form>
 Nhóm điều khiển: thiết kế các nhóm điều khiển theo cấu trúc sau
<label>Họ và tên:</label>
<input class="form-control" />
 Nhóm các nút
<button class="form-button">Thêm</button>
<button class="form-button">Sửa</button>
<button class="form-button">Xóa</button>
 Bổ sung các thuộc tính cho các điều khiển
o Thêm @tabindex=”1” vào điều khiển họ và tên
o Thêm @value=”Việt nam” và @readonly vào ô nhập quốc tịch
o Thêm @tabindex=”2” vào điều khiển ghi chú
o Thêm @tabindex=”3” vào nút thêm
o Thêm @tabindex=”4” vào nút sửa
o Thêm @disabled vào nút xóa
 Chạy thử trang web
 Định dạng CSS cho các điều khiển
o .form-group{} phân cách các nhóm
 margin:10 pixel 0 pixel
o .form-control{} định dạng cho 1 điều khiển
 width:98%
 padding:5 pixel
WEB1013 – XÂY DỰNG TRANG WEB TRANG 2
 LAB 10: THIẾT KẾ FORM (PHẦN II)
 outline:none
 border:1 pixel solid gray
 border-radius:3 pixel
o .form-group label{} định dạng cho nhãn trên điều khiển
 font-weight:bold
 font-variant:small-caps
o .form-control:focus{} định dạng cho điều khiển đang nhận trỏ chuột
 background-color:yellow
 box-shadow:0 0 3 pixel red
 border:1 pixel solid yellow
o .form-button{} định dạng cho nút nhấn
 padding:8 pixel 30 pixel
 outline:none
 border:none
 border-radius:20 pixel
 font-weight:bold
 background-color:white
 color:orangered
 box-shadow:inset 0 0 20 pixel blue
o .form-button:hover{} định dạng cho nút khi đưa chuột lên
 color:blue
 box-shadow:inset 0 0 20 pixel orangered
o .form-button:disabled{} định dạng cho nút bị vô hiệu hóa
 color:darkgray
 box-shadow:inset 0 0 20 pixel gray

BÀI 2 (4 ĐIỂM)
Thiết kế form nhập như hình sau

WEB1013 – XÂY DỰNG TRANG WEB TRANG 3

 LAB 10: THIẾT KẾ FORM (PHẦN II)

Yêu cầu kỹ thuật

 Sử dụng fieldset để bọc các nhóm giới tính và sở thích

 Ngày sinh sử dụng type=”date”
 Điểm sử dụng type=”number” min là không, max là 10 và step là 0.25
 Nghề nghiệp sử dụng type=”list” kết hợp với <datalist> nhập sẵn danh sách
ít nhất 5 nghề nghiệp
 Định dạng CSS: sử dụng chung định dạng của bài 1

WEB1013 – XÂY DỰNG TRANG WEB TRANG 4

 LAB 10: THIẾT KẾ FORM (PHẦN II)
BÀI 3 (2 ĐIỂM) – GV CHO THÊM

WEB1013 – XÂY DỰNG TRANG WEB TRANG 5