You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tạo Form Selected Box bằng các thẻ Select, Option và Form trong HTML

Tạo Form Selected Box bằng các thẻ Select, Option và Form trong HTML

Cùng tìm hiểu cách tạo ra Form Selected Box nào.

Xem thêm bài viết

Chúng ta đã học qua hai thẻ Select và Option ở những bài học trước. Bây giờ chúng ta sẽ tiến hành tạo Form cuối cùng trong phần học Form của chúng ta. Chúng ta sẽ cùng nhau chiến đấu đến bài học tạo Form. Chúng ta sẽ còn có nhiều bài học về Form nhưng sẽ ở một cách tiếp cận khác. Vì các Form cơ bản của chúng ta đến phần Form Selected Box là hết.

Thực tế mà nói thì hai thẻ quan trọng nhất để tạo ra Form Selected chính là thẻ Select. Sau này nếu bạn học đến jQuery thì bạn sẽ thấy thẻ này cực kỳ quan trọng để bạn có thể lấy giá trị Select trong thẻ HTML. Chúng ta cần nhiều kỹ thuật hơn bạn nghĩ. Nhất là kỹ thuật jQuery. Bạn sẽ chỉ cần một chút kỹ thuật này là bạn có thể lấy được giá trị của thẻ Select. Tuy nhiên, chúng ta sẽ học sau. Bây giờ chúng ta đi tạo Form cuối cùng thôi.

Bạn thường nhìn thấy Selected Box ở đâu?

Dễ nhìn thấy nhất có lẽ chính là lúc bạn chỉnh múi giờ trong một trang mạng xã hội hay chọn quốc gia nơi mình sinh sống. Mặc dù Radiobox và Checkbox cho phép bạn chọn nhiều hoặc ít nhưng bạn lại khó lòng mà giữa một rừng chủ đề chọn hết được. Vì hai kiểu trên đều có giới hạn vì bạn không thể đánh quá nhiều được. Trong khi đó thì Selected Box. Bạn thấy có đến hơn cả trăm quốc gia lại được gói gọn trong một danh sách xổ xuống khá tiết kiệm diện tích. Trong khi đó nếu bạn thực hiện điều tương tự trong control Radiobox và Checkbox sẽ nhìn rối và tốn diện tích rất nhiều.

Cú pháp tạo Form Selected Box

Cú pháp

<form name= “…” action= “ ” method= “…”>

            <select name= “…” multiple>

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

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

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

                        …

</select>

</form>

 

Giống như Checkbox có checked thì bên Selected Box cũng có selected để giúp cho trình duyệt hiểu đây là giá trị mặc định của Form Selected. Ngoài ra Selected cũng chỉ cho phép bạn chọn một dữ kiện duy nhất. Nếu bạn muốn chọn nhiều hơn thì bạn sẽ thêm thuộc tính multiple để chọn được nhiều dữ kiện hơn trong Form Selected Box.

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>
        <form name="form4" action=" " method="get">
             <select name="monan">
            <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>
        </form>
       
        <br/>
        <h2>Ẩm thực mà bạn muốn được tư vấn</h2>
        <form name="form5" action=" " method="get">
            <select name="quocgia">
            <option value="france">Pháp</option>
            <option value="denmark">Đan Mạch</option>
            <option value="switzerland">Thuỵ Sĩ</option>
            <option value="spain">Tây Ban Nha</option>
            <option value="india">Ấn Độ</option>
            <option value="arab">Ả Rập</option>
            <option value="vietnam" selected>Việt Nam</option>
            <option value="thailand">Thái Lan</option>
            <option value="singapore">Singapore</option>
            <option value="malaysia">Malaysia</option>
            <option value="korea">Hàn Quốc</option>
            <option value="japan">Nhật Bản</option>
            <option value="United States">Mỹ</option>
        </select>
        </form>
        
    </body>

Kết quả ví dụ

Bạn sẽ chưa thấy tác dụng rõ ràng của thẻ Form. Bạn chỉ cần hiểu đơn giản là Form giúp bạn gom Select lại với nhau. Trong khi đó thì thẻ Select gom các Option lại với nhau. Như vậy thì bạn sẽ dễ dàng đánh được những phần còn lại của trang web hơn. Đồng thời bạn cũng có thể dễ dàng thiết lập các tuỳ chỉnh có liên quan đến việc trang trí như CSS, làm JavaScript hoặc là viết những dòng code với PHP.

Chúng ta đã học xong phần tạo Form Selected. Đây chính là Form cơ bản cuối cùng mà mình đã đề cập với các bạn trước đó. Bây giờ các bạn sẽ có bài tập cho phần này. Ở bài học sau mình sẽ giới thiệu đến các bạn một thuộc tính rất hay trong Form. Chúc các bạn học vui!

 




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