Menu
CoddyTech
Bắt đầu học

Ôn tập: biểu mẫu #2

Thuộc phần Kiến thức cơ bản trong hành trình HTML của Coddy. Bài học 47 trên 60.

challenge icon

Thử thách

Dễ

Hãy tạo một biểu mẫu đăng ký đơn giản giống như trong hình bên dưới!

Biểu mẫu cần có những phần sau:

  1. Thẻ <form> để bao bọc mọi thứ.
  2. Trường Username có nhãn và ô nhập văn bản. Nhãn cần ghi "Username:" và dùng for="username". Ô nhập cần có id="username", name="username", type="text" và placeholder "Enter your username".
  3. Trường Email có nhãn và ô nhập email. Nhãn cần ghi "Email:" và dùng for="email". Ô nhập cần có id="email", name="email", type="email" và placeholder "Enter your email".
  4. Trường Password có nhãn và ô nhập mật khẩu. Nhãn cần ghi "Password:" và dùng for="userpassword". Ô nhập cần có id="userpassword", name="userpassword", type="password" và placeholder "Enter your password".
  5. Một nhóm nút radio để người dùng chọn loại tài khoản: "Student" hoặc "Teacher". Thêm một đoạn văn hoặc tiêu đề ghi "User Type:" phía trên các nút radio. Nút radio "Student" cần có id="student", name="usertype", value="student" và nhãn ghi "Student". Nút radio "Teacher" cần có id="teacher", name="usertype", value="teacher" và nhãn ghi "Teacher". Hãy nhớ: cả hai nút radio phải có cùng thuộc tính name ("usertype") để mỗi lần chỉ có thể chọn một nút.
  6. Một nhóm hộp kiểm để người dùng chọn sở thích: "Sports", "Music" và "Technology". Thêm một đoạn văn hoặc tiêu đề ghi "Interests:" phía trên các hộp kiểm. Hộp kiểm "Sports" cần có id="sports", name="interests", value="sports" và nhãn ghi "Sports". Hộp kiểm "Music" cần có id="music", name="interests", value="music" và nhãn ghi "Music". Hộp kiểm "Technology" cần có id="technology", name="interests", value="technology" và nhãn ghi "Technology". Hãy nhớ: tất cả hộp kiểm cần có cùng thuộc tính name ("interests") vì chúng thuộc cùng một nhóm.
  7. Một nút Sign Up và một nút Clear ở cuối biểu mẫu. Nút Sign Up cần có type="submit" và nút Clear cần có type="reset". Nút Sign Up cần hiển thị dòng chữ "Sign Up" và nút Clear cần hiển thị dòng chữ “Clear”.

Hãy thêm nhãn và tiêu đề phù hợp để người dùng dễ sử dụng!

Hãy nhớ, các ô nhập cần có những thuộc tính quan trọng sau: type, id, name và value.

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <!-- Viết code ở đây -->
    </body>
</html>

Tất cả bài học trong Kiến thức cơ bản

1Kiến thức cơ bản về HTML

HTML là gì?Cấu trúc cơ bản của HTMLThẻ và phần tửThẻ lồng nhau và thẻ đóngChú thích trong HTML

4Thẻ công thức nấu ăn

Tổng quan dự ánTên và mô tả công thứcBài học dự ánNguyên liệuBài học dự ánCác bướcBài học dự án

7Trang hồ sơ cá nhân

Tổng quan dự ánPhần đầu trangBài học dự ánẢnh đại diệnBài học dự ánPhần giới thiệu bản thânBài học dự ánLiên kết mạng xã hộiBài học dự án

10Bảng

Cơ bản về bảngThêm tiêu đề bảngGộp hàng và cộtÔn tập: Bảng

2Văn bản và định dạng

Tiêu đềĐoạn vănNgắt dòngChữ đậm và chữ nghiêngLại chữ đậm và chữ nghiêngÔn tập: định dạng

5Thêm nội dung

Thuộc tính HTMLLiên kếtLiên kết đến trang mớiHình ảnhThuộc tính hình ảnh

8Biểu mẫu và đầu vào phần 1

Kiến thức cơ bản về biểu mẫuÔ nhập văn bảnThuộc tính của ô nhậpTrường mật khẩuNhãn cho ô nhậpÔn tập: biểu mẫu cơ bản

11Trang đăng ký sự kiện

Tổng quan dự ánPhần đầu trangBài học dự ánPhần thông tin sự kiệnBài học dự ánBiểu mẫu đăng kýBài học dự ánPhần chân trangBài học dự án

3Làm việc với danh sách

Danh sách không có thứ tựDanh sách có thứ tựDanh sách lồng nhauÔn tập: danh sách

6Bố cục trang

Các phần tử divCác span nội dòngThẻ ngữ nghĩaPhần và bài viếtÔn tập: bố cục

9Biểu mẫu và đầu vào phần 2

Nút radioHộp kiểmDanh sách thả xuốngNútNút trong biểu mẫuÔn tập: biểu mẫu #1Ôn tập: biểu mẫu #2

12Thử thách cuối

Thẻ hồ sơ đơn giảnThiệp mời sự kiệnTrang bài viết đơn giảnDanh sách sách yêu thích

Tự luyện tập: Playground Web