Em hãy thực hiện các yêu cầu dưới đây trang 141 Tin học 12

Giải Tin học 12 Bài F12: Định kiểu CSS cho biểu mẫu - Chân trời sáng tạo

Vận dụng trang 141 Tin học 12: Em hãy thực hiện các yêu cầu dưới đây.

1. Định kiểu để tạo màu nền chung cho hai nút tròn và màu nền chung cho ba hộp kiểm của biểu mẫu của Thực hành.

2. Tạo và định kiểu cho biểu mẫu đăng nhập gồm các thành phần sau:

Hai văn bản để nhập Tên tài khoản và Mật khẩu;

Một hộp kiểm Ghi nhớ thông tin đăng nhập;

Một nút nhấn Đăng nhập;

Một đường liên kết Quên mật khẩu.

3. Tìm hiểu thêm cách để chèn biểu tượng vào hộp văn bản.

Lời giải:

1. Thực hiện định kiểu để tạo màu nền chung cho hai nút tròn và màu nền chung cho ba hộp kiểm của biểu mẫu của Thực hành.

- Đối với hộp kiểm, khai báo vùng chọn để định kiểu cho trạng thái được chọn: input[type="checkbox"]: checked {

}

accent-color: #007bff;

Với khai báo này, khi người dùng nháy chọn, hộp kiểm sẽ có dạng

- Đối với nút, khai báo vùng chọn để định kiểu cho trạng thái hover và active:

button[type="submit"]:hover {

}

background-color: #0056b3;

button[type="submit"]:active { background-color: #ff0000;

}

2. Tạo và định kiểu cho biểu mẫu đăng nhập gồm các thành phần sau:

- Hai văn bản để nhập Tên tài khoản và Mật khẩu;

input[type="text"] { display: block;

}

box-sizing: border-box; width: 100%;

background-color: #f4f4f4;

border: none;

border-radius: 20px; padding: 10px;

margin: 10px 0 10px 0;

rocksen trò

an

input[type="text"]: focus {outline: 2px solid #007bff;

}

- Một hộp kiểm Ghi nhớ thông tin đăng nhập; Một nút nhấn Đăng nhập; Một đường liên kết Quên mật khẩu.

input[type="radio"]: checked {

}

background-color: #007bff;

input[type="checkbox"]: checked { accent-color: #007bff;

}

textarea {

box-sizing: border-box;

width: 100%;

background-color: #f4f4f4;

border: none;

}

border-radius: 20px; padding: 10px; resize: vertical;

textarea: focus {

}

outline: 2px solid #007bff;

3. Tìm hiểu thêm cách để chèn biểu tượng vào hộp văn bản.

button[type="submit"] { width: 25%; font-size: 16px;

color: #fff;

background-color: #007bff;

border: none;

border-radius: 20px;

padding: 10px 20px;

margin: 10px auto; cursor: pointer;

}

button[type="submit"]:hover {

}

background-color: #005663;

button[type="submit"]: focus { outline: yellow;

}

"T-sctave a trời sáng tạo

button[type="submit"]: activ background-color: #4ff4a2;

}

Lời giải bài tập Tin học 12 Bài F12: Định kiểu CSS cho biểu mẫu hay khác:

• Hoạt động trang 138 Tin học 12: Em hãy khai báo vùng chọn dùng để định kiểu cho trạng thái focus của phần tử textarea ....

• Hoạt động trang 138 Tin học 12: Em hãy khai báo vùng chọn dùng để định kiểu cho trạng thái focus của phần tử textarea ....

• Hoạt động trang 139 Tin học 12: Trong khai báo vùng chọn của hộp kiểm, em hãy thay đổi thuộc tính accent-color thành backgroun-color ....

• Luyện tập 1 trang 139 Tin học 12: Em hãy trình bày lợi ích khi định kiểu cho biểu mẫu ....

• Luyện tập 2 trang 139 Tin học 12: Ý nghĩa của thuộc tính display và box-sizing là gì? ....

• Luyện tập 3 trang 139 Tin học 12: Em hãy liệt kê một số trạng thái của các thành phần trong biểu mẫu ....

• Thực hành trang 139 Tin học 12: Nhiệm vụ. Định kiểu CSS cho biểu mẫu góp ý ....

Xem thêm lời giải bài tập Tin học lớp 12 Chân trời sáng tạo hay nhất, ngắn gọn khác:

• Tin học 12 Bài F13: Dự án tạo trang web (tiếp theo)

• Tin học 12 Bài F14: Học máy

• Tin học 12 Bài F15: Khoa học dữ liệu

• Tin học 12 Bài F16: Máy tính, thuật toán và Khoa học dữ liệu

• Tin học 12 Bài F17: Hoạt động trải nghiệm về Khoa học dữ liệu

Xem thêm các tài liệu học tốt lớp 12 hay khác:

• Giải sgk Tin học 12 Chân trời sáng tạo
• Giải Chuyên đề Tin học 12 Chân trời sáng tạo
• Giải SBT Tin học 12 Chân trời sáng tạo
• Giải lớp 12 Chân trời sáng tạo (các môn học)
• Giải lớp 12 Kết nối tri thức (các môn học)
• Giải lớp 12 Cánh diều (các môn học)

---