Web1013 lab10

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 thực hành bạn có khả  Xây dựng form thân thiện với người dùng với o Các thuộc tính điều khiển o Điều khiển HTML o Định dạng với CSS BÀI (4 ĐIỂM) Xây dựng form sau Yêu cầu kỹ thuật  Quốc tịch nhập sẵn readonly  Nút xóa bị vơ hiệu hóa (disabled)  Thứ tự tab: Họ tên => Ghi => Nút thêm => Nút Sửa WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 10: THIẾT KẾ FORM (PHẦN II)  Định dạng với CSS Hướng dẫn  Tổ chức form Họ tên Quốc tịch Ghi Các nút  Nhóm điều khiển: thiết kế nhóm điều khiển theo cấu trúc sau Họ tên:  Nhóm nút Thêm Sửa Xóa  Bổ sung thuộc tính cho điều khiển o Thêm @tabindex=”1” vào điều khiển họ tên o Thêm @value=”Việt nam” @readonly vào ô nhập quốc tịch o Thêm @tabindex=”2” vào điều khiển ghi 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 điều khiển o form-group{} phân cách nhóm  margin:10 pixel pixel o form-control{} định dạng cho điều khiển  width:98%  padding:5 pixel WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 10: THIẾT KẾ FORM (PHẦN II) o o o o o  outline:none  border:1 pixel solid gray  border-radius:3 pixel form-group label{} định dạng cho nhãn điều khiển  font-weight:bold  font-variant:small-caps form-control:focus{} định dạng cho điều khiển nhận trỏ chuột  background-color:yellow  box-shadow:0 pixel red  border:1 pixel solid yellow 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 20 pixel blue form-button:hover{} định dạng cho nút đưa chuột lên  color:blue  box-shadow:inset 0 20 pixel orangered form-button:disabled{} định dạng cho nút bị vơ hiệu hóa  color:darkgray  box-shadow:inset 0 20 pixel gray BÀI (4 ĐIỂM) Thiết kế form nhập hình sau WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 10: THIẾT KẾ FORM (PHẦN II) Yêu cầu kỹ thuật     Sử dụng fieldset để bọc nhóm giới tính sở thích Ngày sinh sử dụng type=”date” Điểm sử dụng type=”number” không, max 10 step 0.25 Nghề nghiệp sử dụng type=”list” kết hợp với nhập sẵn danh sách nghề nghiệp  Định dạng CSS: sử dụng chung định dạng WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 10: THIẾT KẾ FORM (PHẦN II) BÀI (2 ĐIỂM) – GV CHO THÊM WEB1013 – XÂY DỰNG TRANG WEB TRANG ... nghiệp  Định dạng CSS: sử dụng chung định dạng WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 10: THIẾT KẾ FORM (PHẦN II) BÀI (2 ĐIỂM) – GV CHO THÊM WEB1013 – XÂY DỰNG TRANG WEB TRANG ... hóa  color:darkgray  box-shadow:inset 0 20 pixel gray BÀI (4 ĐIỂM) Thiết kế form nhập hình sau WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 10: THIẾT KẾ FORM (PHẦN II) Yêu cầu kỹ thuật     Sử dụng...  margin:10 pixel pixel o form-control{} định dạng cho điều khiển  width:98%  padding:5 pixel WEB1013 – XÂY DỰNG TRANG WEB TRANG LAB 10: THIẾT KẾ FORM (PHẦN II) o o o o o  outline:none  border:1