Hướng dẫn thẻ radio trong html

Thực ra chúng đều thuộc về nhóm thẻ input nhưng có thuộc tính type là radio button và checkbox.

Nhóm thẻ input là không thể thiếu khi muốn làm form nhập liệu và chúng thường xuyên kết hợp với Javascript để validate (xác thực các trường dữ liệu).

Bên cạnh 5 type rất hay dùng gồm: text, password, submit, reset và email thì 2 type chuyên dụng để tạo các lựa chọn là Radio button và Checkbox bạn cũng cần nắm rõ.

Type này được dùng để chọn một trong nhiều lựa chọn, chẳng hạn chọn giới tính, chọn quốc gia đang sinh sống.

Code mẫu:

Nam
Nữ
Khác

Kết quả:

Nếu bạn không để thuộc tính name có cùng tên thì bạn sẽ chọn được 2 cái cùng lúc, do vậy cần lưu ý name đồng bộ khi dùng radio, vì với radio có nghĩa là chúng ta muốn chỉ một trong các lựa chọn được chọn mà thôi.

Checkbox

Radio buttons dùng để chọn chỉ một cái trong nhiều lựa chọn còn checkbox thì ngược lại, nó cho phép bạn không chọn lựa cái nào hoặc chọn nhiều cái (từ một cho đến tất cả).

Code mẫu:

Bóng đá
Bơi lội
Điền kinh
Cầu lông
Võ thuật

Kết quả:

Thuộc tính checked

Đây là thuộc tính được dùng để đánh dấu trước một lựa chọn nào đó, chẳng hạn một Form nhập liệu yêu cầu bạn nhập Quốc gia đang sinh sống, nhưng nó cũng xác định được địa chỉ IP của bạn xuất phát từ Việt Nam nên đã tick sẵn vào đây từ trước cho bạn.

Điều này giúp người dùng của bạn giảm thiểu các thao tác phải nhập và cũng hạn chế được tối đa việc nhập sai dữ liệu. Ví dụ:

Code mẫu:

Việt Nam
Trung Quốc
Nhật Bản
Hàn Quốc

Mặc dù phiên bản mới nhất của HTML là HTML5, đã loại bỏ đi một số thẻ không cần thiết. Nhưng bên cạnh đó một số thẻ tag vẫn tồn tại mặc dù công nghệ đã update. Và bài viết hôm nay Quách Quỳnh muốn nhắc tới đó chính là thẻ Radio button trong HTML. Qua đó bạn sẽ biết được Radio button sử dụng như thế nào.

Khi làm việc với input bạn sẽ viết như sau:

Trong đó type chính là kiểu dữ liệu đầu vào. Type gồm có các kiểu như: text, file, password, email, submit, radio, checkbox, color vv…

Tìm hiểu về Radio button

Hãy thực hiện ví dụ sau:

  
  Học HTML

  
  Học CSS

  
  Học JavaScript
 

Như cách viết ở trên chúng ta sẽ thấy để tạo ra radio button thì cần dùng tới kiểu type="radio".

Bên cạnh đó trong trường input thì cũng cần có id, name những cái này sẽ hữu ích sau này sử dụng JavaScript và PHP. Vì thế khi viết bạn cần có thói quen thêm id và name vào.

Để thêm một button submit thì bạn chỉ cần thay đổi type="submit".

Trình duyệt hỗ trợ:

Kết luận: Radio button có xuất hiện trong các Form liên hệ. Nhờ vào nó người dùng sẽ lựa chọn thông tin dễ dàng. Đây là kiến thức HTML cơ bản nhưng nó khá quan trọng. Vì thế bạn nên đọc rồi thực hành gõ code lại theo cách hiểu của mình.

Đã đăng vào thg 10 21, 2019 12:36 SA 2 phút đọc

• Một ngày buồn và cạn hết nguồn ý tưởng ko biết viết gì để chia sẻ kiến thức với các bạn . Thôi nay mình chia sẻ tips đơn giản hướng dẫn các bạn style checkbox, radio button không giống như mặc định ban đầu của checkbox và radio button chỉ với css
• Để giúp cho các bạn tự làm được tôi sẽ hướng dẫn với radio button còn các bạn có thể tự làm với checkbox thông qua bài làm của tôi

1. Tạo HTML

• Chúng ta tạo các input với radio theo sau là label sao cho id của input bằng for của label như đoạn code bên dưới đây

    
    I love
  

2. Tạo css

• Đầu tiên chúng ta nên ẩn input đi và mọi style chúng ta làm trong label bằng đoạn code dưới đây.

input[type="radio"] { {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
  }

đoạn này bạn cũng có thể thay bằng đoạn code sau:

input[type="radio"] { {
    display: none;
  }

• Tiếp theo ta style cho label

label {
    padding-left: 35px; // Khoảng cách này để mình chứa style cho ô radio
    position: relative;
    margin: 0;
    line-height: 20px;
 }

• Bây giờ chúng ta style cho cái nút radio

  • Tạo vòng tròn bao ngoài nút radio. Chúng ta cho label bằng relative và tạo ra nút vòng bao ngoài radio với :before

label:before {
	 width: 20px;
	 height: 20px;
	 border-radius: 50%;
	 position: absolute;
	 top: 50%;
	 tranform: translateY(-50%);
	 left: 0;
	 content: '';
	 background: #fff;
	 border: 1px solid black;
}

• Tạo nút bên trong radio khi input: checked. Bằng cách sau:

input[type="radio"]:checked ~ label:after {
	 width: 12px;
	 height: 12px;
	 border-radius: 50%;
	 position: absolute;
	 top: 50%;
	 tranform: translateY(-50%);
	 left: 4px;
	 content: '';
     background: blue;
}

• Chỉ với vài dòng code đơn giản chúng ta đã tuỳ chỉnh dc radio button theo ý mình.
• Tương tự với checkbox cũng vậy. Các bạn chỉ cần chú ý đoạn code này input[type="radio"]:checked + label
• https://codepen.io/ngc-yn/pen/MWWjVQa

3. Kết luận.

• Như vậy trong bài viết này mình đã hướng dẫn cách làm sao để có thể style lại các radio button, tương tự các bạn hãy thử làm với checkbox để xem mình hiểu bài ko nhé . Cảm ơn các bạn đã đọc bài viết của mình.

• Demo với checkbox https://codepen.io/ngc-yn/pen/vYYXRoQ

All rights reserved