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ụ:

  Họ và đệm: 

  

Tên: 

8 thiết lập sau khi ấn nút submit sẽ vẫn ở nguyên màn hình trình duyệt (giá trị _self: mặc định) hay sẽ mở một cửa sổ hoặc một tab mới (giá trị _blank)

Form nhập liệu được đánh dấu bằng thẻ

  Họ và đệm: 

  

Tên: 

9, code sau đây khai báo một form nhập liệu với phương thức POST và được gửi đến đường dẫn action_page.php

  ...Nội dung form nhập liệu

3.2.1 GET và POST khác nhau như thế nào?

Với form nhập liệu, thuộc tính method của thẻ HTML

  Họ và đệm: 

  

Tên: 

9 có hai giá trị là GET và POST, vậy chúng khác nhau như thế nào? Mặc định thuộc tính method của form có giá trị là GET. Khi sử dụng phương thức GET, dữ liệu của form sẽ được đưa vào kèm theo với đường dẫn URL gửi đến máy chủ web. Ví dụ:

    Username: 

    Password: 

    

Khi người dùng nhập username là abc và password là xyz và bấm submit thì bản chất là thực hiện đường dẫn login.php?username=abc&password=xyz. Một số chú ý khi sử dụng GET:

• Thêm dữ liệu form vào URL theo cặp tên/giá trị.
• Độ dài tối đa của URL là 3000 ký tự
• Không sử dụng GET để gửi các dữ liệu nhạy cảm như mật khẩu, số tài khoản, thông tin cá nhân... vì nó sẽ hiển thị trên URL.
• Sử dụng kiểu GET khi muốn người dùng có thể đánh dấu URL (bookmark) để sử dụng lại sau.
• GET sử dụng tốt với các dữ liệu không cần bảo mật, giống như các chuỗi truy vấn trong URL của Goolge tìm kiếm.

Ví dụ khi bạn tìm kiếm từ khóa "All Laravel" trên Google thì form tìm kiếm sử dụng phương thức GET do đó dữ liệu được đưa vào URL như sau: https://www.google.com.vn/search?q=all+laravel. Đường dẫn này bạn có thể đánh dấu (bookmark) lại để sử dụng sau, trong trình duyệt Chrome bạn sử dụng tổ hợp phím Ctrl + D, lần sau bạn muốn tìm kiếm lại từ khóa "All Laravel" bạn chỉ cần chạy lại đường dẫn đã đánh dấu mà không cần nhập liệu gì thêm. POST có gì khác, khi sử dụng phương thức POST với form nhập liệu, các dữ liệu form sẽ không được hiển thị trong URL mà nó sẽ đóng gói trong header của gói tin gửi đi, do đó các thông tin sẽ được bảo mật hơn. Với phương thức POST, độ lớn của dữ liệu gửi đi là không giới hạn, tuy nhiên gửi dữ liệu kiểu POST không thể đánh dấu để sử dụng lại sau.

3.3 Các thành phần hỗ trợ nhập liệu

3.3.1 Thẻ HTML

  Họ: 

  Tên: 

  

  

1

Thẻ

  Họ: 

  Tên: 

  

  

1 tạo ra các thành phần nhập liệu như ô nhập liệu, nút lựa chọn dạng checkbox, radio... Trong các phiên bản trước của HTML5, thẻ

  Họ: 

  Tên: 

  

  

1 đã được hỗ trợ tuy nhiên chỉ hỗ trợ một số dạng nhập liệu. Phiên bản HTML5 có thêm nhiều các dạng nhập liệu mới, đây là sự đúc kết qua một quá trình phát triển nội dung HTML qua nhiều năm.

3.3.1.1 Thuộc tính của thẻ

  Họ: 

  Tên: 

  

  

1

Trước khi đi vào từng dạng nhập liệu

  Họ: 

  Tên: 

  

  

1 chúng ta xem xét các thuộc tính của thẻ

  Họ: 

  Tên: 

  

  

1:

• autocomplete: Giá trị của thuộc tính này là on/off, nó xác định xem trình duyệt cứ tự động gợi ý text đã nhập trước đây không? Với một số trường hợp như khi bạn xây dựng một ô nhập liệu tự động gợi ý theo cách của bạn thì cần tắt tính năng gợi ý của trình duyệt. (Ví dụ Xây dựng tìm kiếm thông minh với Typeahead) Chú ý: autocomplete chỉ làm việc với các dạng ô nhập liệu sau: text, search, url, tel, email, password, datepickers, range và color.

• autofocus: Khi thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 nào được thiết lập thuộc tính này thì khi trang web tải, con trỏ nhập liệu sẽ ngay lập tức ở ô nhập liệu này. Thuộc tính này không có giá trị, chỉ cần đưa thuộc tính vào thẻ, ví dụ:

• form: Mặc định, các thành phần nhập liệu nằm giữa thẻ

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

  9 sẽ thuộc về form, tuy nhiên nếu thành phần nhập liệu nằm ngoài form thì sao? Chúng ta sử dụng thuộc tính form để xác định xem ô nhập liệu thuộc về nào, ví dụ:

  Họ và đệm: 

  

Tên: 

• formaction: Mặc định URL mà form gửi dữ liệu đến được xác định trong thuộc tính action của thẻ

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

  9 tuy nhiên trong một số tình huống chúng ta muốn với trường hợp này thì gửi đến URL mặc định còn trường hợp khác thì gửi dữ liệu đến một URL khác. Ví dụ:

  Họ: 

  Tên: 

  

  

Trong ví dụ này, khi người dùng nhấn vào nút "Người dùng đăng nhập" thông tin sẽ được gửi đến đường dẫn /user_login.php còn nếu người dùng bấm vào "Quản trị đăng nhập" thì thông tin được gửi đến /admin_login.php.

• formenctype: Thuộc tính formenctype xác định cách thức dữ liệu form được mã hóa khi được gửi đi, thuộc tính này chỉ được sử dụng khi form gửi đi với phương thức POST (

  
    Họ: 
  
    
    
  

  0). Thiết lập này sẽ ghi đè thiết lập trong thẻ và thiết lập này chỉ sử dụng cho các thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 có thuộc tính type là submit và image.

  Họ: 

  
  

• formmethod: Ghi đè phương thức gửi của form nhập liệu

  Họ: 

  Tên: 

  
  

• formnovalidate: Ghi đè thuộc tính novalidate của thẻ

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

  9, sử dụng với thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 có type là submit:

  Địa chỉ email: 

  

  

• formtarget: Thuộc tính formtarget xác định nơi hiển thị hồi đáp từ máy chủ web khi nhận được dữ liệu gửi lên từ form. Thuộc tính này có thể ghi đè thuộc tính target của thẻ

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

  9 và thuộc tính này chỉ sử dụng cho thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 có type là submit và image.

  ...Nội dung form nhập liệu

0

• height: Xác định độ cao của thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 với type là image:

  ...Nội dung form nhập liệu

1

• width: Xác định độ rộng của thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 với type là image:

  ...Nội dung form nhập liệu

1

• list: Thuộc tính list sử dụng để tham chiếu đến thành phần HTML

  
    Họ: 
  
    
    
  

  8 chứa các tùy chọn được định nghĩa trước với thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1

  ...Nội dung form nhập liệu

3

• min, max: Thuộc tính min, max xác định giá trị tối thiểu và tối đa của một thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1, sử dụng cho các dạng nhập liệu: number, range, date, datetime-local, month, time và week.

  ...Nội dung form nhập liệu

4

• multiple: Cho phép người dùng nhập liệu nhiều giá vào thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1, sử dụng cho các dạng email, file. Ví dụ cho phép người dùng có thể chọn nhiều file ảnh:

  ...Nội dung form nhập liệu

5

• pattern (regexp): Thuộc tính pattern xác định biểu thức chính quy (regular expression) mà thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 sử dụng để kiểm tra giá trị trong value. Thuộc tính này hoạt động với các dạng text, search, url, tel, email và password.

  ...Nội dung form nhập liệu

6

• placeholder: Thuộc tính placeholder để hiển thị gợi ý nhập liệu trong chính thành phần HTML, sử dụng cho các dạng nhập liệu text, search, url, tel, email và password.

  ...Nội dung form nhập liệu

7

• required: Thẻ required xác định thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 có phải nhập liệu hay không trước khi gửi dữ liệu form.

  ...Nội dung form nhập liệu

8

• step: Thuộc tính này sẽ đưa vào điều khiển tăng giảm theo một số được thiết lập trước

  ...Nội dung form nhập liệu

9

3.3.1.2 Các dạng thẻ

  Họ: 

  Tên: 

  

  

1

Trong HTML5 có thêm rất nhiều các dạng thẻ

  Họ: 

  Tên: 

  

  

1 mới do sau một quá trình sử dụng HTML4.01 có rất nhiều các thành phần form thiếu hoặc phải sử dụng một thư viện ngoài để tạo ra. Trong phần các dạng thẻ

  Họ: 

  Tên: 

  

  

1 này chúng ta sẽ xem danh sách các dạng thẻ

  Họ: 

  Tên: 

  

  

1 thành hai phần:

• Các dạng thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 được hỗ trợ từ HTML4.01.
• Các dạng thẻ

  
    Họ: 
  
    Tên: 
  
    
  
    
  

  1 mới có ở HTML5

3.3.1.2.1 Các dạng thẻ

  Họ: 

  Tên: 

  

  

1 được hỗ trợ trước đây

Bảng dưới đây chứa danh sách các dạng thẻ

  Họ: 

  Tên: 

  

  

1 được sử dụng trong các phiên bản trước HTML5 như HTML4.01, HTML4...

Text: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng nhập văn bản, đây là dạng phổ biến nhất dùng để nhập văn bản với các thông tin cơ bản như họ tên, mô tả...

    Username: 

    Password: 

    

0

Password: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng nhập mật khẩu, các ký tự khi được nhập vào sẽ được hiển thị ở dạng dấu * để che dấu các ký tự nhập vào

    Username: 

    Password: 

    

1

Submit: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng nút submit, sử dụng tạo ra nút submit để gửi dữ liệu lên máy chủ, chỉ có nút dạng submit khi nhấn mới thực hiện gửi dữ liệu

    Username: 

    Password: 

    

2

Reset: Thẻ dạng nút reset, sử dụng để xóa dữ liệu được nhập trong cả form

    Username: 

    Password: 

    

3

Radio: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng nút radio, sử dụng để người dùng có thể lựa chọn duy nhất một giá trị trong danh sách các giá trị

    Username: 

    Password: 

    

4

Checkbox: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng nút checkbox, sử dụng để người dùng có thể lựa chọn nhiều giá trị trong một danh sách các giá trị

    Username: 

    Password: 

    

5

Button: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng nút thông thường, sử dụng tạo ra một nút để khi người dùng nhấn vào thì thực hiện một số hoạt động.

    Username: 

    Password: 

    

6

3.3.1.2.2 Các dạng thẻ

  Họ: 

  Tên: 

  

  

1 mới trong HTML5

HTML5 có thêm rất nhiều các dạng nhập liệu mới cho thẻ HTML

  Họ: 

  Tên: 

  

  

1, nó giúp bạn xây dựng form nhập liệu rất phong phú với nội dung cần thu thập mà không cần phải sử dụng đến các thư viện của bên thứ 3.

Color: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng chọn mã màu, khi bấm vào sẽ hiển thị một cửa sổ mới và có thể chọn màu với các mã màu trong đó.

    Username: 

    Password: 

    

7

Date: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng date dùng để chọn ngày tháng năm.

    Username: 

    Password: 

    

8

Datetime-local: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng datetime-local sử dụng để lựa chọn cả ngày và giờ

    Username: 

    Password: 

    

9

Email: Thẻ dạng email sử dụng để nhập liệu địa chỉ email.

0

Month: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng month dùng lựa chọn tháng và năm.

1

Number: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng number sử dụng để nhập vào các số.

2

Range: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng range sử dụng để nhập một số trong một khoảng giá trị cho trước, kết hợp với các thuộc tính min, max để thiết lập giá trị tối thiểu và tối đa của dải giá trị.

3

Search: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng search khá giống với input dạng văn bản thông thường, khác một chút là nó có nút xóa toàn bộ nội dung.

4

Tel: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng tel để nhập số điện thoại, khi sử dụng trên các smart phone nó sẽ hiển thị bảng số cho bạn dễ nhập liệu.

5

Time: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng range sử dụng để nhập một số trong một khoảng giá trị cho trước, kết hợp với các thuộc tính min, max để thiết lập giá trị tối thiểu và tối đa của dải giá trị.

6

Url: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng url sử dụng để nhập giá trị là các đường dẫn URL nếu không đúng khi submit sẽ báo lỗi.

7

Week: Thẻ

  Họ: 

  Tên: 

  

  

1 dạng range sử dụng để nhập một số trong một khoảng giá trị cho trước, kết hợp với các thuộc tính min, max để thiết lập giá trị tối thiểu và tối đa của dải giá trị.

8

3.3.2 Thẻ HTML

  ...Nội dung form nhập liệu

11

Thẻ

  ...Nội dung form nhập liệu

12 cho phép nhập liệu văn bản, tuy nhiên nó chỉ cho nhập liệu trên một dòng, để nhập liệu được trên nhiều dòng sử dụng thẻ HTML

  ...Nội dung form nhập liệu

11. Thẻ HTML

  ...Nội dung form nhập liệu

11 có hai thuộc tính là rows và cols để xác định khung nhập liệu văn bản sẽ cao bao nhiêu dòng và rộng bao nhiêu cột. Ví dụ:

9

Thẻ HTML

  ...Nội dung form nhập liệu

11 thường dùng cho các nội dung có lượng dữ liệu lớn của form như nội dung mô tả, các nội dung có chứa định dạng... Thẻ HTML

  ...Nội dung form nhập liệu

11 có thể định dạng kích thước thông qua thuộc tính style với cặp tên thuộc tính CSS/giá trị thuộc tính CSS như sau:

0

3.3.3 Thẻ HTML

  ...Nội dung form nhập liệu

17,

  ...Nội dung form nhập liệu

18,

  ...Nội dung form nhập liệu

19

Trong form nhập liệu, có những trường hợp chúng ta muốn người dùng lựa chọn một giá trị từ một danh sách dài, ví dụ chọn ngành nghề mà một ứng viên muốn tuyển dụng, chọn kích thước một loại quảng cáo mà bạn muốn đưa vào website... Khi đó chúng ta sẽ xây dựng một danh sách dạng drop-down tức là khi bấm vào thì danh sách sẽ xổ xuống bằng thẻ HTML

  ...Nội dung form nhập liệu

17 để đánh dấu bắt đầu danh sách và kết hợp với thẻ

1

[jsfiddle url="https://jsfiddle.net/he8bvykp/5/" height="300px" include="result,html,js" font-color="39464E" menu-background-color="FFFFFF" code-background-color="f3f5f6" accent-color="1C90F3"]