You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tìm hiểu về các thuộc tính và cách hoạt động của thẻ Form

Tìm hiểu về các thuộc tính và cách hoạt động của thẻ Form

Cùng tìm hiểu về thẻ Form trong HTML.

Xem thêm bài viết

Xin chào các bạn! Hôm nay chúng ta sẽ cùng nhau tìm hiểu một loại thẻ cuối cùng mà bạn phải biết trước khi tạo ra những Form mà bạn thường xuyên sử dụng trong HTML. Vì thế mà bạn cần chú ý rất nhiều đến bài học ngày hôm nay. Hôm nay chúng ta sẽ cùng nhau tìm hiểu thẻ Form trong HTML.

Thẻ Form đóng vai trò rất quant rọng để có thể giúp cho các thẻ Input phát huy được tác dụng. Cũng giống như thẻ table thì không thể thiếu được các thẻ TR và TD. Thẻ Form sẽ giúp trình duyệt hiểu đây chính là Form của trang HTML chứ không phải là bất cứ một thứ nào khác. Mà như thế là rất co lợi rồi còn gì nữa.

Không thể sinh ra biểu mẫu hoàn hảo nếu thiếu thẻ Form

Đây chính là câu trả lời vô cùng chính xác và cũng là vô cùng quan trọng. Bạn không thể gom các thẻ Input mà sau này chúng sẽ được gọi là các control nhập liệu thành một biểu mẫu hoàn chỉnh dành cho người dùng được. Thế nên chúng quan trọng đến mức bạn không được quyền quên chúng. Từ bây giờ trở đi hãy xem Form như là tri kỷ của bạn mỗi khi muốn thực hiện một biểu mẫu nào đó trong HTML.

Cú pháp thẻ Form

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

Content

</form>

 

Bên trong thẻ Form chủ yếu là chứa các thẻ Input ngoài ra còn có những thẻ khác. Những thẻ khác thường được dùng để miêu tả cho những khung mà bạn vừa tạo được. Do người dùng không thể nào phân biệt được hai khung này vì chúng khá giống nhau. Lấy ví dụ như khi bạn tạo ra khung tên đăng nhập và mật khẩu. Thường thì người dùng sẽ không phân biệt được. Đó là lý do bạn cần một vài thẻ P trong thẻ Form.

Ví dụ

 Lần trước chúng ta đã thử tạo ra hai ô Textbox trong thẻ Form. Bạn có thể xem lại đoạn code ở đây.

<!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>
            <input type="text" name="HTen"/>
            <input type="text" name="Ten"/>
        </form>
        
    </body>

Kết quả ví dụ

Thẻ Form có các thuộc tính mà bạn cần phải lưu ý. Đây đều là những thuộc tính bắt buộc trong thẻ Form.

  • name: đây là cách chúng ta đặt tên cho form và nó sẽ có giá trị duy nhất để phân biệt với các thẻ khác, đặc biệt là các thẻ form khác trong cùng một trang web. Dĩ nhiên là ta có thể tạo ra nhiều web form trên một trang web.
  • action: thuộc tính này sẽ chứa đường dẫn đến trang xử lý thông tin của các ô nhập liệu trong form này, phần này liên quan đến việc xử lý của phía server nên ta sẽ không tìm hiểu sâu về nó. thay vào đó chúng ta sẽ tìm hiểu trong những bài học phía sau.
  • method: thuộc tính này chỉ chấp nhận hai giá trị là POST hoặc GET và nó cũng liên quan đến phần xử lý của phía server nên ta cũng sẽ không tìm hiểu sâu về 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>
        
    </body>

Kết quà ví dụ

Nhìn chung kết quả ví dụ cũng không có gì thay đổi. Bạn sẽ thấy được tác dụng của những thuộc tính trên Form sau khi chúng ta học cách tạo một nút xác nhận nhân trong Form. 

Bạn đã biết cách để nhập một thẻ Form vào HTML. Quá tuyệt vời. Bây giờ thì bạn đã có đầy đủ “vũ khí” để có thể chiến đấu cùng với việc tạo ra những Form tuyệt vời. Hãy sẵn sàng vì chúng ta sẽ tạo Form trong bài kế tiếp.




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