Trong bài viết này của Scaler Topics, chúng tôi sẽ đưa bạn qua hộp kiểm trong HTML là gì và cách tạo, chọn, bỏ chọn và tắt hộp kiểm trong HTML.

Bạn đang xem : html chính xác để tạo hộp kiểm là gì

Tìm hiểu hộp kiểm trong HTML là gì & amp; cách tạo, chọn, bỏ chọn và vô hiệu hóa nó.

Giới thiệu về Hộp kiểm trong HTML

Hãy xem trường hợp sau –

Bạn muốn đặt một chiếc bánh sandwich tàu điện ngầm từ một ứng dụng đặt đồ ăn trực tuyến. Có một danh sách lớn các loại rau mà bạn có thể thêm vào bánh mì của mình. Bạn có thể thích một số lớp trên bề mặt như Cà chua, Hành tây và Rau diếp. Với tư cách là người dùng, bạn chọn ba loại rau này để thêm vào bánh sandwich của mình trong toàn bộ danh sách các loại rau.

Thật tiện lợi khi bạn muốn chọn nhiều loại rau, phải không?
Tính năng giúp bạn có trải nghiệm này thật dễ dàng không gì khác ngoài hộp kiểm trong HTML!

Hộp kiểm trong HTML

Trong hướng dẫn này, chúng tôi sẽ giới thiệu cho bạn về hộp kiểm trong HTML là gì và cách tạo hộp kiểm trong HTML.

Hộp kiểm trong HTML là gì?

Hộp kiểm trong HTML là một trong những thuộc tính của thẻ đầu vào. Chúng trông giống như các hộp vuông có thể được đánh dấu động trong giao diện người dùng. Hộp kiểm HTML tỏ ra rất hữu ích khi chúng tôi muốn lấy nhiều đầu vào từ người dùng. Khi người dùng gặp một câu hỏi về hộp kiểm, họ chọn các tùy chọn mong muốn trong toàn bộ danh sách bằng cách chọn / đánh dấu vào các hộp văn bản này. Dữ liệu của các hộp kiểm đã chọn sau đó sẽ được thu thập khi câu hỏi hoặc biểu mẫu được gửi và lưu trữ trong phần phụ trợ.

Cú pháp của Hộp kiểm HTML

Cú pháp cơ bản của hộp kiểm trong HTML trông giống như sau –

 
  

& lt;

đầu vào

< / p>

loại

=

"hộp kiểm"

& gt;

Đây là

hộp kiểm

đầu tiên

của tôi

Hộp kiểm HTML

Nếu bạn muốn hiển thị giá trị được kiểm tra trước trong biểu mẫu của mình bằng cách sử dụng hộp kiểm trong HTML, cú pháp sẽ được sửa đổi một chút và trông giống như sau-

Hộp kiểm HTML được kiểm tra

Cách sử dụng Hộp kiểm trong HTML

Như chúng ta đã thấy Trong tình huống, khi đặt hàng một chiếc bánh mì sandwich, chúng tôi bắt gặp các hộp kiểm cho phép chúng tôi chọn nhiều tùy chọn trong danh sách các tùy chọn có sẵn đã cho.

Vì vậy, việc sử dụng hộp kiểm trong HTML là khá rõ ràng. Chúng tôi sử dụng chúng trong các tình huống khi chúng tôi muốn chấp nhận nhiều đầu vào từ người dùng. Trong tình huống đã cho, đó là về việc rau được thêm vào bánh sandwich.

Một ví dụ khác để hiểu rõ hơn điều này có thể là-

Bạn đang điền vào một biểu mẫu để tham gia một lớp học viết mã. Họ muốn biết bạn đã quen với những ngôn ngữ nào trong danh sách nhất định về những ngôn ngữ mà họ dạy trong lớp của họ. Nếu các tùy chọn có sẵn là – Java, Python, C và JavaScript và bạn chỉ biết Java và Python, bạn sẽ đánh dấu vào các hộp kiểm bên cạnh hai tùy chọn này.

Thuộc tính đã chọn trong hộp kiểm là thuộc tính boolean. Boolean không có nghĩa là đúng hoặc sai. Vì vậy, nếu một hộp kiểm được đánh dấu, dữ liệu cho cùng một sẽ được coi là đầu vào hợp lệ và được lưu trữ trong phần phụ trợ. Hộp kiểm không được chọn sẽ không được coi là đầu vào. Chúng tôi cũng có thể thao tác thuộc tính “đã kiểm tra” bằng cách sử dụng JavaScript mà chúng tôi sẽ xem xét ngay sau đây.

Cách tạo hộp kiểm trong HTML?

Chúng tôi có thể thêm nhãn vào các hộp kiểm để làm cho văn bản kích hoạt các hộp kiểm. Chúng tôi thậm chí có thể vô hiệu hóa các hộp kiểm dựa trên yêu cầu của chúng tôi. Chúng tôi cũng có thể sử dụng chúng với các thẻ biểu mẫu và với thuộc tính biểu mẫu.

Hãy tiếp tục và xem chúng tôi có thể làm điều đó như thế nào. Mã ví dụ dưới đây sẽ được sử dụng để hiểu những điều khác nhau mà bạn có thể làm với hộp kiểm trong HTML trong suốt hướng dẫn.

Chúng tôi sẽ gọi nó là “mã ví dụ”.

 < pre>  

& lt; form & gt;

& lt; p & gt;

Thêm

rau của bạn: & lt; / p & gt;

& lt; input

=

"hộp kiểm"

tên

=

"rau"

id

=

" veg1 "

giá trị

=

" cà chua "

onclick

=

"return ValidateSelection ();"

& gt;

& lt; label

cho

=

"veg1"

& gt; Tomato & lt; / label & gt;

& lt; đầu vào

biểu mẫu

=

"myForm"

=

"hộp kiểm"

tên

=

" rau "

id

=

" veg2 "

giá trị

=

"hành"

onclick

=

"trở lại ValidateSelection (); "

& gt;

& lt; label

cho

=

"veg2"

& gt; Hành tây & lt; / label & gt;

& lt; đầu vào

biểu mẫu

=

"myForm"

=

"hộp kiểm"

tên

=

" rau "

id

=

" veg3 "

giá trị

=

"rau diếp"

onclick

=

"trả lại ValidateSelection (); "

& gt;

& lt; label

cho

=

"veg3"

& gt; Xà lách & lt; / label & gt;

& lt; input

=

"hộp kiểm"

tên

=

"rau"

id

=

" veg4 "

giá trị

=

" capsicum "

bị vô hiệu hóa & gt;

& lt; label

cho

=

"veg4"

& gt; Capsicum & lt; / label & gt;

& lt; p & gt; & lt; input

=

"submit"

giá trị

=

"Gửi"

& gt; & lt; / p & gt;

& lt; biểu mẫu

hành động

=

""

mục tiêu

=

"result3"

Phương thức

=

"lấy "

id

=

" myForm "

& gt;

& lt; / form & gt;

& lt; script

loại

=

"text / javascript"

& gt;

hàm ValidateSelection () {

var cb = document.getElementsByName (

"rau"

);

var CheckedItems = 0;

cho

(var i = 0; i & lt; cb.length; i ++)

{

nếu

(cb [i] .checked)

CheckedItems ++; }

nếu

(CheckedItems & gt; 2) {

alert (

"Bạn không thể chọn nhiều hơn ba loại rau!"

);

trả về

sai

;}

} & lt; / script & gt;

Cách đơn giản nhất để tạo hộp kiểm trong HTML là sử dụng thẻ đầu vào . Chúng tôi đã đặt loại đầu vào thành “hộp kiểm” như bạn có thể thấy trong mã ví dụ. Thuộc tính name cho phép chúng tôi đặt tên cho hộp kiểm và với thuộc tính value, chúng tôi chỉ định giá trị mà nó nắm giữ. Các thuộc tính này rất hữu ích khi chúng ta làm việc với JavaScript trong phần phụ trợ. Chúng giúp chúng tôi tham khảo các hộp kiểm một cách dễ dàng.

Nhãn cho Hộp kiểm trong HTML

Bây giờ, bạn đã biết cách tạo một hộp kiểm đơn giản, được chọn và không được chọn trong HTML.

Nếu bạn nhìn vào mã ví dụ ở trên, bạn sẽ nhận thấy rằng chúng tôi đã tạo “nhãn” cho mọi hộp kiểm. Chắc hẳn bạn đang thắc mắc tại sao chúng tôi lại làm như vậy.

Chà, nếu bạn chỉ tạo một hộp kiểm không có nhãn, hộp kiểm sẽ chỉ được đánh dấu chọn hoặc được kích hoạt bằng cách chỉ nhấp vào hộp kiểm mà không phải trên văn bản bạn. liên kết với nó. Điều này có thể dẫn đến trải nghiệm người dùng không tốt. Vì vậy, để khắc phục điều này, chúng tôi sử dụng nhãn. Việc thêm nhãn vào hộp kiểm trong HTML đảm bảo rằng nó sẽ kích hoạt hộp kiểm khi người dùng nhấp vào văn bản. Do đó, đó là những gì phần tử nhãn thực hiện trong mã mẫu và sử dụng nó, bạn có thể tùy chỉnh nhãn cho hộp kiểm HTML của mình.

Nhãn cho hộp kiểm trong HTML

Thuộc tính biểu mẫu

Hộp kiểm trong HTML có thể được sử dụng riêng hoặc cùng với thuộc tính “biểu mẫu”. Vì vậy, bây giờ tất cả các thuộc tính biểu mẫu này là gì? Hãy cùng xem!

Chúng tôi có thể liên kết các hộp kiểm với một biểu mẫu bằng cách sử dụng thuộc tính biểu mẫu trong thẻ đầu vào. Thuộc tính này chủ yếu được sử dụng khi các hộp kiểm không có bên trong thẻ biểu mẫu nhưng nội dung cần được gửi. Hãy quay lại mã ví dụ và xem các hộp kiểm có id-veg2 và veg3.

Bạn sẽ nhận thấy rằng chúng tôi đã thêm thuộc tính biểu mẫu trong mục tiêu đầu vào và đặt nó bằng “myForm”.

Sau bốn hộp kiểm, chúng ta có nút “Gửi” ở cuối.
Vì vậy, bây giờ, sau khi người dùng đưa ra lựa chọn của họ và nhấp vào nút gửi, các hộp kiểm có thuộc tính biểu mẫu sẽ gửi nội dung tương ứng đến chương trình phụ trợ.

Thuộc tính hành động của phần tử biểu mẫu phải chứa URL trong đó bạn muốn các giá trị đã gửi của bạn được lưu trữ.
Đó là cách chúng tôi có thể chấp nhận dữ liệu người dùng bằng thuộc tính biểu mẫu trong thẻ đầu vào ngay cả khi các hộp kiểm không có bên trong thẻ biểu mẫu.

Tắt một Hộp kiểm trong HTML

Đôi khi, có thể không có một số loại rau nhất định trong khi bạn đặt bánh sandwich. Trong những trường hợp đó, rau hết hàng sẽ chuyển sang màu xám và các hộp kiểm liên quan bị vô hiệu hóa. Bạn có thể vô hiệu hóa một hộp kiểm trong HTML rất dễ dàng bằng cách sử dụng thuộc tính “đã tắt”. Điều này có thể được thêm trực tiếp vào thẻ đầu vào dựa trên bất kỳ tính khả dụng hoặc tiêu chí nhất định là gì.

Tắt Hộp kiểm trong HTML

Tham khảo mã ví dụ và chú ý đến hộp kiểm có id = veg4. Trong bối cảnh, loại rau này là Capsicum. Nó không có sẵn và do đó chúng tôi đã sử dụng thuộc tính “vô hiệu hóa” trong thẻ đầu vào để làm cho nó được biết đến. Trong giao diện người dùng, nó sẽ chuyển sang màu xám và hộp kiểm sẽ không thể nhấp được.

Nó sẽ trông giống như thế này-

Hộp kiểm HTML bị tắt

Hộp kiểm so với Nút radio trong HTML

Để có thể sử dụng hộp kiểm trong HTML một cách thích hợp, điều cần thiết là phải hiểu sự khác biệt giữa hộp kiểm và nút radio. Sự khác biệt chính giữa hai tùy chọn là nút radio chỉ cho phép chọn một tùy chọn trong khi hộp kiểm trong HTML cho phép chọn nhiều tùy chọn từ danh sách các tùy chọn đã cho.

Chcekboxes và nút Radio trong HTML

Phần tử hộp kiểm đã được thiết kế để cho phép nhiều lựa chọn tùy thích. Vì vậy, nó phù hợp trong một kịch bản mà vấn đề yêu cầu nhiều câu trả lời cho một câu hỏi. Ví dụ, trong kịch bản của chúng tôi, một người có thể thích ăn nhiều hơn một loại rau. Do đó, sử dụng hộp kiểm HTML trong trường hợp này là lựa chọn đúng đắn.

Ngược lại, nút radio chỉ cho phép một lựa chọn tại một thời điểm, tức là khi người dùng cố gắng chọn một tùy chọn khác, tùy chọn mới sẽ được chọn và cái đầu tiên sẽ được bỏ chọn. Điều này phù hợp với những câu hỏi chỉ có thể có một lựa chọn đúng. Không có cách nào để chọn nhiều tùy chọn khi làm việc với các nút radio. Hãy thử đoạn mã sau để xem cách các nút radio hoạt động khác với hộp kiểm trong HTML-

 
  

& lt; p & gt;

Thêm

rau của bạn: & lt; / p & gt;

& lt; input

=

"radio"

tên

=

"rau"

id

=

" veg1 "

giá trị

=

" cà chua "

& gt;

& lt; label

cho

=

"veg1"

& gt; Tomato & lt; / label & gt;

& lt; input

=

"radio"

tên

=

"rau"

id

=

" veg2 "

giá trị

=

" rau diếp "

& gt;

& lt; label

cho

=

"veg2"

& gt; Xà lách & lt; / label & gt;

& lt; / form & gt;

Làm việc Động với Hộp kiểm HTML

DOM hoặc Mô hình Đối tượng Tài liệu rất hữu ích khi chúng ta muốn thực hiện các thao tác bằng JavaScript. Trong khi làm việc với hộp kiểm trong HTML, chúng ta có thể sử dụng DOM để đảm bảo hộp kiểm có được chọn hay không bằng cách triển khai một số logic. Chúng tôi cũng có thể thêm một số điều kiện chỉ cho phép chọn 2 hộp kiểm. Hãy quay lại mã ví dụ của chúng ta và xem các hộp kiểm có id- veg1, veg2 và veg3.

  • Bạn có thể nhận thấy thuộc tính “onclick” trong thẻ đầu vào mà chúng ta chưa thảo luận.
  • “onclick” về cơ bản là một thuộc tính sự kiện. Sự kiện mà chúng tôi đang giải quyết trong trường hợp hộp kiểm là sự kiện chuột.
  • Về cơ bản, thuộc tính này sẽ làm gì là khi chúng ta nhấp vào các hộp kiểm, nó sẽ gọi hàm

    ValidateSelection ()

    .

  • ValidateSelection ()

    là một phương thức JavaScript.

  • Mã được viết sau thẻ script chứa logic để chỉ cho phép chọn hai hộp kiểm.
  • Mã cũng đảm bảo một thông báo phương thức có liên quan được hiển thị khi người dùng cố gắng chọn nhiều hơn hai hộp kiểm

Đầu ra sẽ giống như thế này –

Hộp kiểm HTML động

Đây là cách bạn có thể sử dụng JavaScript để làm cho hộp kiểm HTML hoạt động động.

Browser Hỗ trợ

Hộp kiểm trong HTML được các trình duyệt sau hỗ trợ-

  1. Google Chrome
  2. Mozilla Firefox
  3. Opera
  4. Safari
  5. Windows Explorer

Kết luận

Khi chúng ta đã kết thúc phần hướng dẫn của mình, bây giờ bạn có thể thực hiện thành công những việc sau-

  • Tạo một hộp kiểm trong HTML
  • Thêm nhãn vào hộp kiểm HTML
  • Sử dụng hộp kiểm có thuộc tính biểu mẫu
  • Tắt hộp kiểm theo yêu cầu
  • Cho biết sự khác biệt giữa nút radio và hộp kiểm
  • Sử dụng JavaScript để thêm xác thực vào hộp kiểm trong HTML

Hộp kiểm trong HTML là một cách tốt để cung cấp cho người dùng của bạn các tùy chọn trong khi chọn từ một nhóm các tùy chọn. Vì vậy, đừng chần chờ gì nữa và hãy tự mình thử chúng!


Xem thêm những thông tin liên quan đến chủ đề html chính xác để tạo hộp kiểm là gì

Content Boxes In HTML | Content Box In HTML | How To Create Content Box In HTML | Simplilearn

alt

  • Tác giả: Simplilearn
  • Ngày đăng: 2021-06-18
  • Đánh giá: 4 ⭐ ( 6888 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video tutorial, you will learn about content boxes in html and how to create a content box in HTML. You will work on an example where you will create Content Boxes with hover effects using HTML and CSS. We’ll use html elements such as margins, borders, padding, and the actual content to build content boxes using HTML and CSS.

    Below are the topics you will learn in this Content Boxes in HTML video –

    00:00 What are Content Boxes In HTML?
    06:28 How to create Content Boxes?
    11:15 How to add hover effects?

    🔥Explore Our Free Courses With Completion Certificate by SkillUp: https://www.simplilearn.com/skillup-free-online-courses?utm_campaign=ContentboxesInHTML&utm_medium=Description&utm_source=youtube

    ✅Subscribe to our Channel to learn more about the top Technologies: https://bit.ly/2VT4WtH

    ⏩ Check out the HTML training videos: https://www.youtube.com/playlist?list=PLEiEAq2VkUULq2aJA53pkSyperPfVtf7N

    ContentBoxHTML ContentBoxesInHTML HowToCreateContentBoxInHTML HowToUseContentBoxHTML HTMLTutorial HTMlTutorialForBeginners HTMLTraining Simplilearn

    What is HTML (Hyper Text Markup Language)?
    HTML is the most widely used language for developing web applications. It was created by Berners-Lee in the year 1991 but was first published in 1995. HTML 4 was a popular breakthrough version and got published in 1999. This version gained a lot of popularity and was adopted all over the globe for developing web applications. HTML 5 is the current version and was published in 2012. HTML is critical for web development, and if you’ve ever thought about choosing that career path, you’d unquestionably have come across this language. And that’s probably why you are here in the first place.

    HTML stands for HyperText Markup Language. It is used for creating websites and web applications. Let’s break it down, so we understand the name better:
    HyperText: HyperText refers to the “text wrapped within a text.” It is very similar to hyperlink and contains an underlying text that, when clicked, redirects to a new webpage.
    Markup Language: A markup language is not necessarily a programming language. Instead, it is used to apply formatting and layout to a simple text document. This leads to more interactive and dynamic text content.
    Web Page: A web page is a document that is commonly coded in HTML and rendered by a web browser. Every web page is identified by a URL and can be static or dynamic according to the requirements. If we are only using HTML for development, we can create static web pages.

    HTML

    To learn about HTML and we development, check our Full Stack Java Developer program: https://www.simplilearn.com/java-full-stack-developer-certification-training-course?utm_campaign=ContentboxesInHTML&utm_medium=Description&utm_source=youtube

    About Full Stack Java Developer Program:
    This Full Stack Java Developer Job Guarantee Program is a comprehensive six-month program, in partnership with HIRIST and HackerEarth, is designed to fast track your career as a Full Stack Developer focusing industry demand, with a starting salary of up to ₹5 LPA.

    Full Stack Java Developer Program Program Overview:
    This Full Stack Java Developer course is designed to give you an essence of front-end, middleware, and back-end Java web developer technologies. You will learn to build an end-to-end application, test and deploy code, store data using MongoDB, and much more.

    Key Features of this Full Stack Java Developer Program Program:
    ✅ 250+ hours of Applied Learning
    ✅ Industry recognized certification
    ✅ 20 lesson-end and 6 phase-end projects
    ✅ 30+ in-demand tools and skills
    ✅ 4 industry-aligned capstone projects
    ✅ Lifetimes access to high-quality course content
    ✅ Cohort-based online program structure
    ✅ 24×7 online assistance

    Skills covered in this Full Stack Java Developer Program Program:
    ✅ Agile
    ✅ Java
    ✅ Hibernate and JPA
    ✅ Spring Core 5.0
    ✅ DevOps
    ✅HTML5 and CSS3

    What is the Full Stack Java Developer Job Guarantee Program?
    Simplilearn has designed a comprehensive Full Stack Java Developer track. Through this program, learners who complete it will gain access to guaranteed full-time job offers with hiring partner companies through collaboration with Hirist.com. The course curriculum and subsequent assessment have been designed by industry experts for a set of target audiences.

    👉Learn more at: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=ContentboxesInHTML&utm_medium=Description&utm_source=youtube

    For more updates on courses and tips follow us on:
    – Facebook: https://www.facebook.com/Simplilearn
    – Twitter: https://twitter.com/simplilearn
    – LinkedIn: https://www.linkedin.com/company/simplilearn/
    – Website: https://www.simplilearn.com
    – Instagram: https://www.instagram.com/simplilearn_elearning
    – Telegram Mobile: https://t.me/simplilearnupdates
    – Telegram Desktop: https://web.telegram.org//im?p=@simplilearnupdates

    Get the Simplilearn app: https://simpli.app.link/OlbFAhqMqgb

Hướng tạo Ô tìm kiếm trong html, hướng dẫn tạo hộp tìm kiếm bằng bootstrap

  • Tác giả: jdomain.vn
  • Đánh giá: 4 ⭐ ( 2895 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Search component là một thành phần quan trọng trong trang web, Nó giúp người dùng dễ dàng có thể tìm thấy nội dung mà họ mong muốn ở trong website của bạn

Hướng dẫn cách chèn Hộp Kiểm (Hộp đánh dấu) trong Google sheets

  • Tác giả: gitiho.com
  • Đánh giá: 5 ⭐ ( 3382 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Google Sheets đã được thêm rất nhiều chức năng tuyệt vời, trong đó có cả cách chèn hộp kiểm (hộp đánh dấu) vào bất kỳ ô nào chỉ bằng một cú nhấp chuột cực kỳ dễ dàng.

HTML là gì?

  • Tác giả: topdev.vn
  • Đánh giá: 5 ⭐ ( 8322 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản). HTML được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles, blockquotes… và HTML không phải là ngôn ngữ lập trình.

Các kiểu input trong HTML

  • Tác giả: tedu.com.vn
  • Đánh giá: 5 ⭐ ( 4451 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về các kiểu input trong HTML

Html chính xác để tạo hộp kiểm là gì?

  • Tác giả: hoicay.com
  • Đánh giá: 5 ⭐ ( 2773 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định nghĩa và sử dụng Tag được sử dụng cho người dùng nhập hay chọn thông tin. Dạng của có thể có nhiều dạng khác nhau, tùy thuộc vào thuộc tính tùy trọn type, có thể là text, một checkbox, một trường password, một button radio, một button, … Khuyên: sử dụng tag

Thêm hộp kiểm hoặc nút tùy chọn (Điều khiển biểu mẫu)

  • Tác giả: support.microsoft.com
  • Đánh giá: 4 ⭐ ( 1295 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm thế nào để chèn hộp kiểm và các nút tùy chọn trong Excel giúp nhập dữ liệu dễ dàng hơn.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Kiểm tra xem Chuỗi có chứa Ký tự cụ thể trong JavaScript hay không - kiểm tra xem một ký tự có trong một chuỗi javascript không

By ads_php