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