You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tạo khung ghi chú cho người dùng nhập liệu trong Form bằng thẻ TextArea

Tạo khung ghi chú cho người dùng nhập liệu trong Form bằng thẻ TextArea

Chúng ta sẽ cùng tìm hiểu về thẻ TextArea trong HTML.

Xem thêm bài viết

Chúng ta đã tìm hiểu được kha khá thuộc tính của thẻ Input. Vì thế mà bạn đã nhìn thấy được những công dụng tuyệt vời của chúng. Vẫn còn khá nhiều Form mà bạn cần học. Theo đó chúng ta vẫn còn một Control khá quan trọng trong phần tạo Form trong HTML. Control mà mình vừa đề cập chính là TextArea.

Nghe thì có vẻ khá liên quan. Bạn đang nghĩ đến chuyện sử dụng thẻ Input để tạo ra control này. Bé cái nhầm rồi nhé. Muốn tạo được control này bạn cần phải thực hiện bằng một thẻ riêng. Thẻ này cùng tên vời control. Thẻ mà hôm nay chúng ta sẽ học chính là thẻ TextArea trong HTML.

Tác dụng của control này như thế nào?

Thông thường thì bạn thấy control Textbox thường sẽ không nhập liệu tốt. Chúng bị hạn chế số ký tự. Vì thế mà rất khó để bạn có thể ghi những dòng ghi chú quá dài. Thông thường bạn sẽ thấy khung TextArea trong những lần Feedback sản phẩm, góp ý kiến cho một nhà hàng để người chủ có thể cải thiện chất lượng. Ngoài ra thì nếu bạn tinh ý thì những ô dùng để chứa bản dịch của Google Dịch cũng như thế. Text Area sẽ giải quyết vấn đề này một cách triệt để nhất vì bạn có thể quy định số dòng và số cột trong một trang Forn mà bạn muốn hiển thị tuỳ theo ý bạn muốn.

Cú pháp thẻ TextArea

<textarea rows= “…” cols= “…”>

Content

</textarea>

 

Trong thẻ này chúng ta cần chú ý đến thuộc tính Rows và Cols.

Theo đó thì Rows là dùng để biểu thị số dòng mà TextArea sẽ hiển thị trên trình duyệt. Nếu văn bản có số lượng nhiều hơn số dòng quy định thì thanh cuộng dọc sẽ xuất hiện. Lúc này người dùng muốn xem nội dung trong khung chỉ cần nhấn giữa thanh cuộn đọc. Cuộn lên cuộn xuống để xem nội dung.

Đối với thẻ Cols sẽ quy định cột mà TextArea sẽ hiển thị. Nói ngắn gọn chính là giới hạn kích thước theo chiều ngang. Bạn có thấy chúng hơi quen quen và giống với hai thuộc tính Width và Height không? Rows chính là Height còn Width là Cols.

Lưu ý là thẻ này nằm trong thẻ Form hoặc có thể ở ngoài thẻ Form trong một vài trường hợp.

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"/><br/>
            
            <textarea rows="3" cols="40">Hãy điền những yêu cầu mà bạn muốn khi đến một quán ăn lý tưởng của bạn. Chúng tôi sẽ tư vấn dựa trên những điều này.</textarea>
            <textarea rows="5" cols="80">Hãy nói về sở thích của bạn</textarea>
        </form>
    </body>

Kết quả ví dụ

Bạn thấy là nội dung mà bạn ghi giữa hai thẻ mở và thẻ đóng của Text Area đều được hiển thị. Cái này rất là có lợi đối với người dùng. Bởi bạn viết Content là bạn đang giải thích cho người dùng hiểu ô này dùng để làm gì. Bạn có thể điều chỉnh kích thước theo ý muốn nhưng tốt nhất là đừng quá to. Khoảng từ 40 đến 80 là hợp lý.

Sau ví dụ này có lẽ bạn đã hiểu hơn về cách mà control TextArea hoạt động. Rất hữu ích đối với bạn đó. Chúng ta sẽ có một chút bài tập và bạn sẽ là người hoàn thàn bài tập này. Chúc bạn học vui!




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