You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tạo dữ liệu cho kiểu Form Dropdown List bằng thẻ Option trong HTML

Tạo dữ liệu cho kiểu Form Dropdown List bằng thẻ Option trong HTML

Cùng học về thẻ Option trong HTML để có thể tạo ra biểu mẫu cuối cùng nhé!

Xem thêm bài viết

Chúng ta đã học được khá nhiều thẻ  và thuộc tính để tạo ra Form trong HTML. Hôm nay chúng ta sẽ học hai thẻ nữa để có thể hoàn thành một Form cuối cùng mà chúng ta rất thường xuyên được sử dụng. Bây giờ chúng ta sẽ đến với thẻ sẽ giúp bạn tạo ra những danh sách nhưng theo một dạng danh sách xổ xuống. Thẻ mà chúng ta sẽ học ngày hôm nay chính là thẻ Option trong HTML.

Bạn thường nhìn thấy danh sách dạng như thế này ở đâu nhỉ? Có thể là bạn đã từng nhìn thấy danh sách này nằm trong dạng chọn quốc gia của người dùng. Những giá trị hiển thị các quốc gia được tạo ra bằng thẻ Option.

Nếu bắt bạn định nghĩa thẻ này thì rất khó. Vì thế chúng ta sẽ đến thẳng phần cú pháp  vì thẻ này có giải thích thì bạn cũng sẽ cảm thấy khó hiểu.

Cú pháp

<option value= “…”>Tên muốn hiển thị</option>

Giá trị của Value giúp cho bạn xác định được những giá trị nằm trong danh sách. Tất nhiên những giá trị này không được trùng nhau. Thường thì bạn sẽ thấy là Value và Tên muốn hiển thị cho người dùng. Mục đích là giúp bạn dễ dàng phân loại và không bị nhầm lẫn.

Ví dụ

 Chúng ta sẽ mượn tạm thẻ Select để có thể thấy được công dụng của thẻ Option. Các tính năng của thẻ Select sẽ được truyền tải đến bạn trong những bài viết sau.

<!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>
        <h2>Danh sách các món ăn mà bạn muốn được tư vấn</h2>
        <select>
            <option value="bunbo">Bún bò Huế</option>
            <option value="bunmam">Bún mắm</option>
            <option value="banhcanh">Bánh canh</option>
            <option value="banhbotloc">Bánh bột lọc</option>
            <option value="sup">Súp</option>
            <option value="lau">Lẩu</option>
            <option value="chao">Cháo</option>
            <option value="duahapca">Dứa hấp cá</option>
        </select>
    </body>

Kết quả ví dụ

Bạn nên đánh những giá trị của thẻ Option không có dấu cách hoặc là kí tự gì cả. Bởi chúng đôi khi sẽ khiến cho bạn đánh mỏi tay hơn mặc dù chúng vẫn hiển thị được. Bạn nên ghi liền không dấu sẽ dễ cho bạn kiểm soát các value ngắn hơn. Nếu bạn thật sự cần đánh dấu gạch ngang thì nên chọn những ký tự dài dễ gây nhầm lẫn hoặc là dài quá khó đọc khi viết liền.Nhưng tuyệt đối không viết có dấu cách.

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>
        <h2>Danh sách các món ăn mà bạn muốn được tư vấn</h2>
        <select>
            <option value="bunbo">Bún bò Huế</option>
            <option value="bunmam">Bún mắm</option>
            <option value="banhcanh">Bánh canh</option>
            <option value="banhbotloc">Bánh bột lọc</option>
            <option value="sup">Súp</option>
            <option value="lau">Lẩu</option>
            <option value="chao">Cháo</option>
            <option value="duahapca">Dứa hấp cá</option>
            <option value="banh-mi">Bánh mì</option>
            <option value="sui-cao-hap-kieu-hong-kong">Sủi cảo hấp kiểu Hong Kong</option>
        </select>
    </body>

Kết quả ví dụ

 

Có khá nhiều điều cần lưu ý trong quá trình tạo ra thẻ Form cuối cùng và thẻ Option chỉ là một trong những ví dụ đó. Bạn cần phải chú ý thật kỹ với thẻ nào. Nếu không bạn sẽ hỏng luôn ở phần tại Form SelectedBox. Bài tập của các bạn ở dưới. Chúc các bạn học vui!




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