You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tạo tương tác giữa tiêu đề và ô nhập liệu trong Form bằng thẻ Label

Tạo tương tác giữa tiêu đề và ô nhập liệu trong Form bằng thẻ Label

Chúng ta hãy cùng tìm hiểu xem thuộc tính Label giúp ích được gì cho Form nhé!

Xem thêm bài viết

Các bạn đã hoàn thành xong phần học tạo ra các Form trong HTML.Những Form bạn đã học đều là những cách tạo Form cơ bản. Hôm nay chúng ta sẽ cùng học cách để tuỳ biến một Form.

Bạn có để ý thấy tại một số trang web khi bạn nhấn vào dòng chữ Email thì trỏ chuột sẽ tự động nhảy vào khung nhập liệu để người dùng nhập dữ liệu. Bạn đừng cảm thấy vi diệu vì bạn cũng có thể làm được điều đó một cách dễ dàng. Đây sẽ là một chức năng rất hay đối với Form.

Thẻ nào có thể giúp chúng ta làm được điều này?

Bạn cần biết đến thẻ này đơn giản là vì như thế bạn sẽ giú cho người dùng dễ dàng nhận biêt được khung mà họ cần nhập dữ liệu. Họ sẽ không nhập sai mà thay vào đó là nhập rất chính xác. Vì bạn đã gán chúng vào các mục của mỗi khung. Nên chuyện nhầm lẫn là không thể nào. Điều này quả là có lợi đúng không nào. Chúng ta cùng học ngay thôi. Thẻ mà chúng ta sẽ học là thẻ Label trong HTML.

Cú pháp thẻ Label

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

<input type= “…” name= “…” id= “…”/>

 

Giá trị của thuộc tính For của thẻ Label là giá trị của thuộc tính ID trong thẻ Input. Bạn có thể đặt tên bạn muốn hiển thị ra ngoài để người dùng nhấn vào ở khu vu74c Tên muốn hiển thị.

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">
            <label for="TX1">Tên Đăng Nhập</label>
            <input type="text" name="Txt2" value="Tên Đăng Nhập" id="TX1"/><br/>
            <label for="MK1">Mật Khẩu</label>
            <input type="password" name="Psw1" value="Mật khẩu" id="MK1"/><br/>
             <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">
          
        <label for="em1">Email</label> <input type="email" name="eml1" value="Nhập Email" id="em1"/><br/>
           <label for="dte1">Nhập ngày sinh</label><input type="date" name="Dte1" value="Ngày sinh" id="dte1"/><br/>
            <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 đừng lo khi nhìn thấy Form có vè không đẹp lắm. Chúng ta sẽ học cách tuỳ chỉnh chúng trong những bài học sau. Tạm thời các bạn cứ vững Label cái đã. Từ từ chúng ta sẽ tiến tới những trình cao hơn.

Cách áp dụng khá đơn giản đúng không nào. Chắc chắn là người dùng sẽ được định hướng cực tốt và không nhập nhầm khung. Vì bây giờ chúng ta đã gán Label cho thẻ Input rồi.

Quá tuyệt vời đúng không? Bây giờ chính bạn đã tạo ra sự vi diệu cho chính Form của bạn rồi. Còn rất nhiều điều thú vị về Form nữa. Hãy cùng khám phá trong những bài học tiếp theo nhé! Bài tập của các bạn ở 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 ?