Bài viết này sẽ hướng dẫn bạn tạo một nút radio HTML với sự trợ giúp của một ví dụ thực tế.
Làm thế nào để thêm một nút radio trong HTML?
Để thêm một nút radio trong HTML, hãy làm theo cú pháp dưới đây:
< đầu vào loại hình = 'Đài' Tên = '' giá trị = '' >
Đây là mô tả về cú pháp đã nêu:
- “ loại hình ”: Thuộc tính này chỉ định loại đầu vào bạn muốn tạo, chẳng hạn như văn bản, radio, hộp kiểm, v.v. Để tạo một nút radio, giá trị thuộc tính phải được đặt là 'radio'.
- “ Tên ”: Nó xác định tên của phần tử đầu vào. Thuộc tính này phải giống nhau đối với danh sách các nút radio.
- “ giá trị ”: Điều này chỉ định giá trị sẽ được gửi đến máy chủ khi nút radio được đánh dấu là đã chọn.
Ví dụ: Thêm một nút radio trong HTML
Ví dụ này sẽ thảo luận về quy trình thêm một nút radio trong HTML bằng cách sử dụng nút radio đầu vào. Trong
Bước 1: Tạo tệp HTML
Đầu tiên, hãy thêm thẻ
Bên trong
- Đầu tiên, hãy thêm dấu “ ”Để cung cấp tiêu đề cho trang.
- Sau đó, một “ ”Cho một đoạn văn hoặc dòng văn bản.
- Sau đó, thẻ đầu vào được thêm với thuộc tính “ loại hình 'Có giá trị' Đài ', Tên được đặt là select và' giá trị ' như ' màu đỏ ”. Các giá trị khác nhau được cấp cho mọi nút radio có cùng tên. Tên giống nhau đại diện cho cùng một nhóm hoặc cùng một danh sách.
- Nếu bạn muốn thêm một nút theo mặc định được đánh dấu là đã chọn, thì hãy gán thuộc tính “ đã kiểm tra ”Vào nút đó.
- Cuối cùng, “
”Trên mỗi nút radio được sử dụng để thêm phụ đề. Nó cũng cung cấp khả năng tiếp cận tốt hơn.
Đoạn mã dưới đây là cách diễn giải tình huống trên:
< h1 > Nút radio HTML h1 >< P > Màu mà bạn thích là gì? P >
< đầu vào loại hình = 'Đài' Tên = 'Chọn màu' giá trị = 'màu đỏ' đã kiểm tra >
< nhãn mác vì = 'radio1' > Màu đỏ nhãn mác >
< br >
< đầu vào loại hình = 'Đài' Tên = 'Chọn màu' giá trị = 'màu xanh da trời' >
< nhãn mác vì = 'radio1' > Màu xanh da trời nhãn mác >
< br >
< đầu vào loại hình = 'Đài' Tên = 'Chọn màu' giá trị = 'màu xanh lá' >
< nhãn mác vì = 'radio1' > màu xanh lá nhãn mác >
< br >
< đầu vào loại hình = 'Đài' Tên = 'Chọn màu' giá trị = 'màu đỏ tía' >
< nhãn mác vì = 'radio1' > Màu đỏ tía nhãn mác >
< br >
< đầu vào loại hình = 'Đài' Tên = 'Chọn màu' giá trị = 'khác' >
< nhãn mác vì = 'radio1' > Khác nhãn mác >
Có thể thấy rằng các nút radio được tạo thành công:
Bạn cũng có thể áp dụng kiểu cho nút radio được tạo ở trên bằng cách làm theo mã CSS được đề cập bên dưới.
Bước 2: Áp dụng kiểu cho HTML
Các ' div ”Cho biết thẻ div mà chúng tôi đã tạo trong tệp HTML:
- Đầu tiên ' màu nền Thuộc tính 'được đặt là' # 8197f0 ”.
- “ biên giới Thuộc tính 'được đặt là' 5px chấm # 13023a ”, Trong đó 5px biểu thị chiều rộng của đường viền, dấu chấm cho biết loại đường và tiếp theo cho biết màu của đường viền.
- “ đệm lót ”Được đặt là“ 20px 100px ”Trong đó 20px chỉ định vùng đệm từ trên xuống dưới và 100px chỉ định vùng đệm từ trái và phải.
- Để tạo kiểu phông chữ, hãy chỉ định “ font-family 'Giá trị thuộc tính là' chữ ẩu ”.
CSS
div {màu nền: # 8197f0;
border: 5px dotted # 13023a;
đệm: 20px 100px;
font-size: 20px;
font-family: chữ thảo;
}
Có thể thấy rằng phần tử div được tạo kiểu thành công:
Đó là nó! Chúng tôi đã giải thích chi tiết về nút radio HTML.
Sự kết luận
Nút radio là một đầu vào luôn xuất hiện trong các nhóm gồm hai hoặc nhiều tùy chọn. Từ nhóm này, người dùng chỉ có thể chọn một tùy chọn. Trong HTML, một nút radio có thể được tạo bằng cách sử dụng “ Thẻ 'có loại thuộc tính với giá trị' Đài ”. Blog này đã trình bày phương pháp thêm các nút radio trong HTML.