Nghĩa Của Từ Form Là Gì ? Định Nghĩa, Ví Dụ, Giải Thích Customs Declaration (Form) 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ứ.

Đang xem: Form là gì

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:

Mô tả form nhập liệu, sử dụng các thẻ

, …, ,

legend: Tiêu đề của nhóm các ô nhập liệufieldset: Nhóm các ô nhập liệulabel: tiêu đề của ô nhập liêuinput: ô 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ệuChọn thông tin phù hợpNhấ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ụ:

method: Xác định phương thức HTTP sẽ sử dụng để gửi dữ liệu, có hai loại phương thức thường dùng là GET và POST.target: giống như thuộc tính target của thẻ 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ẻ , 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ệu3.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 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

Thẻ 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ẻ đã đượ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ẻ

Trước khi đi vào từng dạng nhập liệu chúng ta xem xét các thuộc tính của thẻ :

autofocus: Khi thẻ 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ẻ 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ẻ 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.

Các dạng thẻ được hỗ trợ từ HTML4.01.Các dạng thẻ mới có ở HTML53.3.1.2.1 Các dạng thẻ được hỗ trợ trước đây

Bảng dưới đây chứa danh sách các dạng thẻ được sử dụng trong các phiên bản trước HTML5 như HTML4.01, HTML4…

Text: Thẻ 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ả…

Password: Thẻ 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

Submit: Thẻ 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

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

Radio: Thẻ 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ị

Checkbox: Thẻ 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ị

Button: Thẻ 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.

3.3.1.2.2 Các dạng thẻ 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 , 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ẻ 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 đó.

Date: Thẻ dạng date dùng để chọn ngày tháng năm.

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

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

Month: Thẻ dạng month dùng lựa chọn tháng và năm.

Number: Thẻ dạng number sử dụng để nhập vào các số.

Range: Thẻ 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ị.

Search: Thẻ 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.

Tel: Thẻ 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.

Xem thêm: Cung Kim Ngưu Sinh Ngày 5 5 Là Cung Gì ? Giải Mã Tích Cách, Tình Yêu Và Sự Nghiệp

Time: Thẻ 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ị.

Url: Thẻ 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.

Week: Thẻ 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.3.2 Thẻ HTML

Thẻ 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 . Thẻ HTML 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ụ:

Nội dung văn bản

Thẻ HTML 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 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:

Nội dung văn bản 3.3.3 Thẻ HTML , , 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 để đánh dấu bắt đầu danh sách và kết hợp với thẻ để đánh dấu các giá trị trong danh sách. Ví dụ:

Giáo dục Công nghệ thông tin Công nghiệp Dịch vụ công Nghệ thuật

Mặc định phần tử đầu tiên trong danh sách sẽ được lựa chọn, trong ví dụ trên mặc định giá trị “Giáo dục” sẽ được lựa chọn, chúng ta có thể định nghĩa giá trị mặc định này thông qua thuộc tính selected cho thẻ HTML :

Công nghệ thông tin Khi đó giá trị “Công nghệ thông tin” sẽ được lựa chọn mặc định. Chúng ta có thể sử dụng dạng nhập liệu , cho mục đích tương tự, tuy nhiên các dạng này thường sử dụng cho các danh sách có số lượng giá trị ít, thường là khoảng dưới 5. Với các danh sách lựa chọn lên đến hàng vài chục giá trị thì HTML là lựa chọn tốt hơn. Khi sử dụng HTML , mặc định sẽ chỉ hiển thị một dòng giá trị lựa chọn, bạn có thể mở rộng ra hiển thị nhiều dòng lựa chọn thông qua thuộc tính size, ví dụ:

Giáo dục Công nghệ thông tin Công nghiệp Dịch vụ công Nghệ thuật

Sẽ hiển thị 3 dòng đầu tiên trong danh sách 5 giá trị có thể lựa chọn. Danh sách lựa chọn sử dụng mặc định chỉ cho phép chọn duy nhất một giá trị, tuy nhiên bạn cũng có thể lựa chọn nhiều giá trị một lúc, ví dụ một ứng viên có thể lựa chọn nhiều ngành nghề tuyển dụng như Giáo dục, Công nghệ thông tin… thông qua thuộc tính multiple của thẻ HTML :

Giáo dục Công nghệ thông tin Công nghiệp Dịch vụ công Nghệ thuật

Khi lựa chọn nhiều giá trị cùng một lúc giữ phím Ctrl và dùng chuột trái click để lựa chọn các giá trị. Các danh sách trong form nhập liệu có thể là một danh sách đơn giản hoặc một danh sách đa cấp, quay lại ví dụ về ngành nghề ở trên, trong ngành nghề “Giáo dục” có thể chia nhỏ hơn như Tiểu học, Trung học, Đại học hay trong “Công nghệ thông tin” có thể chia thành “Phần mềm”, “Mạng và viễn thông”, “Phần cứng”… Với trường hợp này chúng ta sử dụng thẻ HTML để xây dựng các danh sách đa cấp này.

Tiểu học Trung học học Đại học Phần mềm Mạng và viễn thông Phần cứng Công nghiệp Dịch vụ công Nghệ thuật

3.3.4 Thẻ HTML5

Kể từ khi Google thống trị toàn cầu với chỉ một ô nhập liệu có gợi ý, thế giới website cũng có những thay đổi, các ô nhập liệu không còn đơn thuần, nó có thể gợi ý theo những gì người dùng đang nhập liệu. HTML5 đã đưa vào thẻ HTML để định nghĩa trước một danh sách, khi danh sách này được gán vào một thẻ HTML người dùng có thể gõ và danh sách gợi ý hiện ra, người dùng có thể lựa chọn trong gợi ý hoặc gõ vào một văn bản riêng. Ví dụ:

Bạn thích nhất PHP framework nào: Bạn có thể lựa chọn PHP framework trong danh sách gợi ý, hoặc nếu bạn thích Zend hoặc FuelPHP… thì cũng có thể nhập vào.

3.3.5 Thẻ HTML5

Thẻ HTML5 hiển thị kết quả của phép tính giống như khi thực hiện bằng một đoạn mã script. Ví dụ:

0100 + = Kết quả như sau:

3.3.6 Thẻ

Trong quá trình nhập liệu vào form với những form có nội dung dài, đôi khi chúng ta muốn biết được trạng thái nhập liệu như đã hoàn thành bao nhiêu %, ví dụ form là một đề thi thì hiển thị % số lượng bài đã hoàn thành là rất hữu ích. Trong HTML5 có hai thẻ mới sử dụng cho mục đích đo lường, hiển thị phần trăm hoàn thành là và :

Thẻ HTML5

: như tên gọi của thẻ, nó thể hiện tiến trình của một tác vụ tức hay phần trăm đã hoàn thành, ví dụ khi bạn tải file, thanh trạng thái thể hiện tải được bao nhiêu % là cực hữu ích, chúng ta có thể sử dụng HTML5 cho trường hợp này.Thẻ HTML5 : là thước đo cho phép xác định phép đo đại lượng vô hướng trong một phạm vi đã biết hoặc giá trị phân số, ví dụ dung lượng ổ cứng đang sử dụng, nhiệt độ hiện tại của động cơ… HTML5 cho phép định nghĩa các dải thấp, cao, điều kiện tốt nhất để hiển thị các màu sắc cho thanh trạng thái. Khi mới sử dụng bạn khó phân biệt cách dùng thẻ HTML5 và tuy nhiên ý nghĩa của nó rõ ràng là khác nhau, chúng ta cùng xem hai ví dụ về cách sử dụng các thẻ trạng thái này. Ví dụ 1: Form thực hiện bài thi:

Bạn đã hoàn thành: 6/10 bài

Chú ý trạng thái hoàn thành sử dụng thường có giá trị tăng lên, ví dụ khi bạn làm nhiều bài hơn trong đề thi thì thanh tiến trình sẽ tăng giá trị hoàn thành hoặc khi bạn tải một file thì % hoàn thành cũng chỉ có tăng lên. Ví dụ hai về đồng hồ bình xăng của xe máy:

Xăng còn 4.5 lít:Xăng còn 2.5 lít:Xăng còn 0.5 lít:

Qua hai ví dụ bạn đã thấy được sự khác biệt giữa progress và meter rồi chứ.

3.3.7 Thẻ

Thẻ HTML định nghĩa một nút bấm, khi bấm vào có thể thiết lập các sự kiện bằng Javascript, hiện tại có thể bạn chưa biết về Javascript, chúng ta sẽ cùng tìm hiểu sau trong Khóa học Javascript cơ bản. Ví dụ:

Hiển thị nội dung! Thẻ HTML cho kết quả hiển thị giống như thẻ HTML với type=”button”, vậy giữa và có gì khác nhau, tại sao phải có cả hai loại nút như vậy:

HTML cho phép đưa mã HTML vào trong, do đó bạn hoàn toàn có thể đưa vào một ảnh, một nội dung… thành một nút bấm.Có một số khuyến cáo tránh sử dụng do có nhiều trình duyệt không hỗ trợ, đặc biệt là IE, tuy nhiên các trình duyệt IE hiện nay không còn phổ biến. Thẻ HTML có thêm một số thuộc tính so với thẻ HTML , danh sách như sau:

Autofocus: Thiết lập nút bấm sẽ được focus ngay khi tải trang.

disabled: Thiết lập nút bấm đang được khóa, không sử dụng được.

form: form_id Xác định nút bấm thuộc về một hoặc nhiều form nhập liệu trong trang.

formaction: URL – Xác định nơi dữ liệu form sẽ được gửi đến khi bấm vào nút submit, chỉ sử dụng với.

formmethod: Giá trị get post. Xác định phương thức gửi dữ liệu form, chỉ sử dụng với.

formnovalidate: giá trị formnovalidate. Xác định dữ liệu form có cần kiểm tra khi gửi lên máy chủ không, chỉ sử dụng với.

formtarget: Giá trị _blank, _self, _parent, _top hoặc _framename. Thiết lập nơi hiển thị hồi đáp từ máy chủ sau khi gửi dữ liệu form lên, chỉ sử dụng với.

name: Giá trị name. Thiết lập tên nút bấm.

type: Giá trị button, reset hoặc submit. Thiết lập dạng nút bấm.

value: Giá trị text. Thiết lập giá trị khởi tạo cho nút bấm.

3.3.8 Các thành phần khác trong form

Như trong phần một số khái niệm cơ bản của form HTML chúng ta đã đưa ra các thành phần như nhóm nhập liệu, tiêu đề nhóm, tiêu đề cho ô nhập liệu, ô nhập liệu… Các phần trước của bài viết chúng ta đã tập trung vào các dạng ô nhập liệu, do vậy phần tiếp theo này chúng ta sẽ cùng tìm hiểu tiếp các thành phần còn lại.

Xem thêm: 8 Tháng 3 Là Cung Gì ? Tổng Quát Về Người Sinh Vào Tháng 3 Sinh Ngày 8 Tháng 3 Là Cung Hoàng Đạo Nào

3.3.8.1 Thẻ HTML

Thẻ HTML dùng để định nghĩa tiêu đề cho một thẻ HTML , khi trình duyệt xử lý HTML không có gì khác với văn bản thông thường ngoại trừ việc người dùng có thể nhấp chuột vào tiêu đề và con trỏ chuột sẽ nhảy vào ô nhập liệu tương ứng. Chú ý: thuộc tính for của thẻ HTML phải bằng thuộc tính id của thẻ tương ứng.

Username: Password:3.3.8.2 Thẻ HTML Trong form nhập liệu có thể chia ra các nhóm thông tin nhập liệu khác nhau, ví dụ một form đăng ký người dùng bao gồm nhóm thông tin chung như họ tên, địa chỉ, email, số điện thoại, nhóm thông tin về các mạng xã hội sử dụng, nhóm thông tin về kinh nghiệm. Mỗi nhóm trong form được thiết lập bằng thẻ HTML và tiêu đề của nhóm sử dụng thẻ HTML . Ví dụ: