You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tạo các ô đánh dấu trong biểu mẫu bằng giá trị Radiobox trong thẻ Input

Tạo các ô đánh dấu trong biểu mẫu bằng giá trị Radiobox trong thẻ Input

Cùng tìm hiểu về thuộc tính Radio trong HTML.

Xem thêm bài viết

Bạn đã biết về kiểu control Textbox. Dù rất tiện lợi nhưng Control Textbox vẫn gặp một vài vấn đề. Thật ra khá là mất thời gian chỉ để đánh vào ô Textbox. Khá là mất thời gian nhất là những phần giống như là sở thích và giới tính. Không lẽ bạn phải ngồi nhập đi nhập lại chữ “Nam” hoặc “Nữ”. Hay là bạn phải nhập đi nhập lại dòng chữ “Những sở thích của tôi là..”. Tốn thời gian quá đi ấy chứ.

Có cách nào giải quyết chuyện này không?

Tất nhiên là bạn phải nhờ vào thẻ Input rồi. Thuộc tính sẽ có ích dành cho bạn vào lúc này chính là Radiobox. Nếu quen miệng thì thường thuộc tính này sẽ được gọi thành thẻ Radio trong HTML. Câu chữ dễ gâ hiểu lầm ghê cơ. Thế nên chúng ta gọi nguyên văn tên họ của thuộc tính này nhé!

Radiobox mang đến cho bạn những ô tròn để người dùng có thể đánh dấu vào mà không cần mất quá nhiều thời gian để nhập vào giống như kiểu control Textbox. Từ đó chúng ta sẽ giảm thiểu được sai sót cũng như là trong lúc người dùng vô tình mà bàn phím thì hữu ý nhập nhầm thì bạn sẽ khó thống kê và xử lý được. Tất nhiên là hiệu quả gấp đôi so với bên Textbox rồi còn gì.

Cú pháp tạo control Radiobox

Cú pháp:

<input type= “radiobox” name= “…” value= ".."/> * Tên bạn muốn đặt *

Điều đặc biệt trong Radiobox không phải chỉ có như vậy không thôi. Thuộc tính name của Radiobox có thể đặt cùng giá trị với nhau. Chúng ta hãy cùng xem qua ví dụ về giới tính nhé! Bạn thường sẽ tạo ra những ô giới tính bằng control Radiobox. Thường thì sẽ là Nam, Nữ. Một số nơi thì có thêm từ None dành cho những người không muốn tiết lộ. Bạn hãy thử tưởng tượng xem nếu bạn đặt tên cho chúng mỗi thẻ Input là một tên thì bạn sẽ chọn được một lúc nhiều tên. Tức là bạn cừa có thể chọn None, vừa chọn được Nam, vừa chọn được Nữ. Bạn đâu muốn như vậy.

Bạn cần phải đặt tên của chúng giống nhau để gom chúng lại thành một nhón như vậy thì bạn sẽ chỉ được chọn một mà thôi. Như vậy hợp lý hơn nhiều chứ đúng không nào?

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        <h1>Chào mừng bạn đến với trang liên hệ</h1>
        <p>Hãy liên hệ với chúng tôi để có thêm nhiều thông tin thú vị về ẩm thực Việt Nam. Chúng tôi sẵn sàng tư vấn miễn phí cho bạn những quán ăn  ngon-bổ-rẻ. Hãy điền vào form bên trái nếu bạn muốn tư vấn và điền vào form bên phải để liên hệ với chúng tôi thực hiện những yêu cầu khác.</p>
        <form name="form1" action=" " method="get">
            <input type="text" name="Ho"/>
            <input type="text" name="Ten"/>
        </form>
        <br/>
        
        <form name="form2" action=" " method="get">
            <input type="textbox" name="TDnhap"/>
            <input type="password" name="Pwsd1"/>
            <input type="submit" name="Sbm1"/>
        </form>
        <br/>
        <form name="form3" action=" " method="get">
            <input type="email" name="EMl1"/>
            <input type="tel" name="Tl1"/>
            <input type="radio" name="sex" value="male"/> Nam
            <input type="radio" name="sex" value="female"/> Nữ
            <input type="submit" name="Sbm2"/>
            
        </form>
    </body>

Kết quả ví dụ

Bạn lưu ý một chút nhé! Trong phần cú pháp chúng ta có thuộc tính Value. Thuộc tính này nhằm giúp bạn lưu trữ dữ liệu của một ô Radio. Có một số tài liệu sẽ ghi là giá trị của ô Radiobox. Giá trị Value không được hiển thị ra bên ngoài. Tức là chỉ một mình bạn biết thôi. Trong ví dụ trên thì bạn có thể thấy rằng giá trị Value là Male và Female. Male và Female là cùng chung một nhóm giới tính (Sex). Những gì mà bạn ghi phía bên ngoài thẻ Input đều sẽ hiển thị trên trình duyệt.

Mẹo nhỏ cho bạn nữa là với HTML5 thì bạn có thể không cần đánh chữ "textbox" mà có thể đánh là "text". Tương tự như thế thì nhiều giá trị của thuộc tính Type cũng dần lượt bỏ chữ Box. Ngoài ra chúng ta còn có thể đánh dấu sẵn cho người dùng bằng cách thêm chữ Checked vào thẻ Input. Người dùng có thể thay đổi nếu muốn.

Ví dụ

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        <h1>Chào mừng bạn đến với trang liên hệ</h1>
        <p>Hãy liên hệ với chúng tôi để có thêm nhiều thông tin thú vị về ẩm thực Việt Nam. Chúng tôi sẵn sàng tư vấn miễn phí cho bạn những quán ăn  ngon-bổ-rẻ. Hãy điền vào form bên trái nếu bạn muốn tư vấn và điền vào form bên phải để liên hệ với chúng tôi thực hiện những yêu cầu khác.</p>
        <form name="form1" action=" " method="get">
            <input type="text" name="Ho"/>
            <input type="text" name="Ten"/>
        </form>
        <br/>
        
        <form name="form2" action=" " method="get">
            <input type="textbox" name="TDnhap"/>
            <input type="password" name="Pwsd1"/>
            <input type="submit" name="Sbm1"/>
        </form>
        <br/>
        <form name="form3" action=" " method="get">
            <input type="email" name="EMl1"/>
            <input type="tel" name="Tl1"/>
            <input type="radio" name="sex" value="male" checked/> Nam
            <input type="radio" name="sex" value="female"/> Nữ
            <input type="submit" name="Sbm2"/>
            
        </form>
    </body>

Kết quả ví dụ

Sau khi xem xong ví dụ, bạn đã biết đến cách sử dụng thẻ Input cùng thuộc thính Type để tạo ra Radiobox. Bạn cần luyện tập một chút và bạn sẽ nhanh chóng làm quen được với cú pháp này mà thôi. Chúc bạn học vui và bai tập của bạn nằm ở phía dưới.

 




Đặt câu hỏi cho bài viết này ?