Action trong html là gì?

Trong bài trước chúng ta đã được làm quen rất nhiều các thẻ HTML xây dụng lên nội dung các trang HTML, bài viết này chúng ta cùng tiếp tục tìm hiểu về một khái niệm mới là form trong HTML. Vậy HTML form là gì?, Tại sao nó quan trọng với trang web?, cùng tìm hiểu bạn nhé. Chú ý: HTML form là bài số 4 trong Khóa học HTML từ cơ bản đến nâng cao, bạn hãy tham khảo nội dung cả khóa học này nhé.

1. HTML Form là gì?

Form nhập liệu là một phần đặc biệt trong trang web, chúng ta sử dụng form để thu nhập thông tin từ người dùng. Trong thực tế, form có thể sử dụng trong các phần phản hồi, bình luận bài viết, thanh toán đơn hàng trực tuyến, form đăng nhập, đăng ký... Chính vì form là một thành phần đặc biệt nên được tách rời thành một bài viết riêng mà không đưa vào bài viết Xây dựng nội dung trang HTML cơ bản. Form có thể chứa rất nhiều các thành phần HTML mà người dùng có thể sử dụng để nhập thông tin vào. Tại sao HTML form lại quan trọng? Đơn giản thôi vì đây là phần tương tác giữa người dùng với trang web, nếu không có form người dùng chỉ có thể đọc mà không thể làm gì hơn. "Mâu thuẫn là động lực của phát triển", nếu người dùng chỉ đọc nội dung theo một chiều, các "mâu thuẫn" là không thể phát sinh hoặc có nhưng không thể đến tai người viết nội dung, vậy thì phát triển thế nào? Vậy HTML form giúp người dùng tương tác với trang web hay với chính người lập ra nó và hẳn bạn đã hiểu tại sao nó quan trọng trong một trang web rồi chứ.

2. HTML Form hoạt động như thế nào?

1. Người dùng mở trang web có form nhập liệu trong trình duyệt. 2. Người dùng điền thông tin vào các thành phần form nhập liệu sau đó nhấn nút gửi [submit] dữ liệu lên máy chủ. Trong giai đoạn này dữ liệu được nhập vào đã có thể được kiểm tra tại máy tính người dùng thông qua các đoạn mã Javascript. 3. Tại máy chủ web, thông tin được xử lý thông qua các ngôn ngữ kịch bản máy chủ như PHP, ASP.NET, JSP... Các đoạn mã kịch bản máy chủ sẽ thực hiện kiểm tra dữ liệu trong form, thực hiện các logic, ghi nhận dữ liệu vào database... 4. Máy chủ web sau khi xử lý xong thông tin sẽ gửi lại một hồi đáp thành công hay không về trình duyệt và kết thúc một chu trình khép kín xử lý form nhập liệu.

3. Các thành phần cơ bản của form nhập liệu

3.1 Một số khái niệm trong HTML form

Một form HTML cơ bản như hình trên có các thành phần như sau:

• Tiêu đề của form nhập liệu, sử dụng các thẻ

  
    Họ và đệm: 
  
    
  
  Tên: 

  3, …,

  
    Họ và đệm: 
  
    
  
  Tên: 

  4 tùy thuộc vào độ quan trọng của form [Xem bài Xây dựng nội dung trang HTML]
• Mô tả form nhập liệu, sử dụng các thẻ

  
    Họ và đệm: 
  
    
  
  Tên: 

  5, …,

  
    Họ và đệm: 
  
    
  
  Tên: 

  4,

  
    Họ và đệm: 
  
    
  
  Tên: 

  7
• legend: Tiêu đề của nhóm các ô nhập liệu
• fieldset: Nhóm các ô nhập liệu
• label: tiêu đề của ô nhập liêu
• input: ô nhập liệu

Với form nhập liệu, chúng ta có thể có 3 hành động như sau:

• Nhập thông tin vào ô nhập liệu
• Chọn thông tin phù hợp
• Nhấp chuột vào nút gửi dữ liệu

Mỗi hành động ở trên có rất nhiều các thẻ HTML liên quan đến form nhập liệu, chúng ta sẽ cùng tìm hiểu trong phần tiếp theo.

3.2 Tạo khung form nhập liệu với thẻ HTML

Trước khi đi vào chi tiết từng thành phần HTML form, việc đầu tiên là tạo ra khung form nhập liệu với thẻ HTML . Thẻ form có một số các thuộc tính hay dùng:

• action: Định nghĩa hành động sẽ được thực hiện khi nhấn nút gửi dữ liệu, hành động này có thể là gửi dữ liệu lên web server, gửi dữ liệu đến một mail server... Ví dụ: