Biểu mẫu gửi HTML

Biểu mẫu HTML được yêu cầu khi bạn muốn thu thập một số dữ liệu từ khách truy cập trang web. Ví dụ: trong quá trình đăng ký người dùng, bạn muốn thu thập thông tin như tên, địa chỉ email, thẻ tín dụng, v.v.

Một biểu mẫu sẽ lấy đầu vào từ khách truy cập trang web và sau đó sẽ đăng nó lên một ứng dụng phụ trợ, chẳng hạn như CGI, ASP Script hoặc PHP script, v.v. Ứng dụng back-end sẽ thực hiện xử lý cần thiết trên dữ liệu đã truyền dựa trên logic nghiệp vụ đã xác định bên trong ứng dụng

Có sẵn nhiều thành phần biểu mẫu khác nhau như trường văn bản, trường vùng văn bản, menu thả xuống, nút radio, hộp kiểm, v.v.

HTML

thẻ được sử dụng để tạo một biểu mẫu HTML và nó có cú pháp sau -
   form elements like input, textarea etc.

Thuộc tính biểu mẫu

Ngoài các thuộc tính phổ biến, sau đây là danh sách các thuộc tính biểu mẫu được sử dụng thường xuyên nhất –

Sr. Không có Thuộc tính & Mô tả1

hoạt động

Tập lệnh phụ trợ sẵn sàng xử lý dữ liệu đã truyền của bạn

2

phương pháp

Phương pháp được sử dụng để tải lên dữ liệu. Được sử dụng thường xuyên nhất là các phương thức GET và POST

3

Mục tiêu

Chỉ định cửa sổ hoặc khung đích nơi kết quả của tập lệnh sẽ được hiển thị. Nó nhận các giá trị như _blank, _self, _parent, v.v.

4

mã hóa

Bạn có thể sử dụng thuộc tính enctype để chỉ định cách trình duyệt mã hóa dữ liệu trước khi gửi đến máy chủ. Các giá trị có thể là -

application/x-www-form-urlencoded − Đây là phương pháp tiêu chuẩn mà hầu hết các biểu mẫu sử dụng trong các tình huống đơn giản

multipart/form-data − Điều này được sử dụng khi bạn muốn tải lên dữ liệu nhị phân ở dạng tệp như hình ảnh, tệp từ, v.v.

Lưu ý - Bạn có thể tham khảo Perl & CGI để biết chi tiết về cách tải lên dữ liệu biểu mẫu hoạt động

Điều khiển biểu mẫu HTML

Có nhiều loại điều khiển biểu mẫu khác nhau mà bạn có thể sử dụng để thu thập dữ liệu bằng biểu mẫu HTML -

  • Điều khiển nhập văn bản
  • Kiểm soát hộp kiểm
  • Điều khiển hộp radio
  • Chọn điều khiển hộp
  • Hộp chọn tệp
  • Điều khiển ẩn
  • Các nút có thể nhấp
  • Nút gửi và đặt lại

Điều khiển nhập văn bản

Có ba kiểu nhập văn bản được sử dụng trên các biểu mẫu –

  • Điều khiển nhập văn bản một dòng – Điều khiển này được sử dụng cho các mục chỉ yêu cầu một dòng nhập của người dùng, chẳng hạn như hộp tìm kiếm hoặc tên. Chúng được tạo bằng thẻ HTML

  • Điều khiển nhập mật khẩu - Đây cũng là kiểu nhập văn bản một dòng nhưng nó che dấu ký tự ngay khi người dùng nhập nó. Chúng cũng được tạo bằng thẻ HTMl

  • Điều khiển nhập văn bản nhiều dòng – Điều khiển này được sử dụng khi người dùng được yêu cầu cung cấp thông tin chi tiết có thể dài hơn một câu. Điều khiển đầu vào nhiều dòng được tạo bằng HTML

    Biểu mẫu HTML là một phần của tài liệu chứa các điều khiển như trường văn bản, trường mật khẩu, hộp kiểm, nút radio, nút gửi, menu, v.v.

    Một biểu mẫu HTML tạo điều kiện cho người dùng nhập dữ liệu sẽ được gửi đến máy chủ để xử lý như tên, địa chỉ email, mật khẩu, số điện thoại, v.v.


    Tại sao nên sử dụng Biểu mẫu HTML

    Biểu mẫu HTML được yêu cầu nếu bạn muốn thu thập một số dữ liệu từ khách truy cập trang web

    Ví dụ. Nếu người dùng muốn mua một số mặt hàng trên internet, họ phải điền vào biểu mẫu như địa chỉ giao hàng và chi tiết thẻ tín dụng/thẻ ghi nợ để mặt hàng đó có thể được gửi đến địa chỉ đã cho

    Kiếm thu nhập với kỹ năng HTML của bạn

    Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn
    Chúng tôi đang xây dựng thị trường làm việc tự do tự phục vụ lớn nhất cho những người như bạn

    Biểu mẫu là một trong những phần quan trọng nhất của trang web. Không có chúng, sẽ không có cách nào dễ dàng để thu thập dữ liệu, tìm kiếm tài nguyên hoặc đăng ký để nhận thông tin có giá trị

    Bạn có thể nhúng các biểu mẫu trên các trang web bằng phần tử HTML

    
    
    3. Bên trong phần tử biểu mẫu, một số đầu vào được lồng vào nhau. Những đầu vào này còn được gọi là điều khiển biểu mẫu

    Trong hướng dẫn này, chúng ta sẽ khám phá phần tử biểu mẫu HTML, các loại đầu vào khác nhau mà nó cần và cách tạo nút gửi để gửi dữ liệu

    Cuối cùng, bạn sẽ biết cách thức hoạt động của các biểu mẫu và bạn sẽ có thể tự tin tạo ra chúng

    Cú pháp biểu mẫu HTML cơ bản

    Các loại đầu vào biểu mẫu HTML

    Bạn sử dụng thẻ

    
    
    4 để tạo các điều khiển biểu mẫu khác nhau trong HTML. Nó là một phần tử nội tuyến và có các thuộc tính như
    
    
    5,
    
    
    6,
    
    
    7,
    
    
    8,
    
    
    9, v.v. Mỗi trong số này có các giá trị cụ thể mà họ lấy

    Thuộc tính

    
    
    9 rất quan trọng vì nó giúp người dùng hiểu mục đích của trường nhập liệu trước khi họ nhập bất kỳ thứ gì vào

    Có 20 loại đầu vào khác nhau và chúng tôi sẽ xem xét từng loại một

    Nhập văn bản

    Loại đầu vào này nhận một giá trị là “văn bản”, vì vậy nó tạo ra một dòng đầu vào văn bản

    
    

    Đầu vào với loại văn bản trông giống như ảnh chụp màn hình bên dưới

    Biểu mẫu gửi HTML

    Nhập mật khẩu

    Như tên của nó, một đầu vào với một loại mật khẩu sẽ tạo ra một mật khẩu. Nó tự động ẩn đối với người dùng, trừ khi nó bị thao túng bởi JavaScript

    
    

    Biểu mẫu gửi HTML

    Nhập Email

    Bất kỳ đầu vào nào có loại email đều xác định trường để nhập địa chỉ email

    
    

    Biểu mẫu gửi HTML

    Loại số

    Loại đầu vào này chỉ cho phép người dùng nhập số

    
    

    Biểu mẫu gửi HTML

    Loại đài phát thanh

    Đôi khi, người dùng sẽ cần chọn một trong số nhiều tùy chọn. Trường đầu vào có thuộc tính loại được đặt thành “radio” cho phép bạn thực hiện việc này

     
    

    Biểu mẫu gửi HTML

    Loại hộp kiểm

    Vì vậy, với một kiểu đầu vào của bộ đàm, người dùng sẽ được phép chọn một trong vô số lựa chọn. Điều gì sẽ xảy ra nếu bạn muốn họ chọn càng nhiều tùy chọn càng tốt?

    
    

    Biểu mẫu gửi HTML

    Loại Gửi

    Bạn sử dụng loại này để thêm nút gửi vào biểu mẫu. Khi người dùng nhấp vào nó, nó sẽ tự động gửi biểu mẫu. Nó nhận một thuộc tính giá trị, xác định văn bản xuất hiện bên trong nút

    
    

    Biểu mẫu gửi HTML

    Loại nút

    Đầu vào có loại được đặt thành nút sẽ tạo một nút, nút này có thể được thao tác bằng loại trình xử lý sự kiện onClick của JavaScript. Nó tạo một nút giống như một kiểu gửi đầu vào, nhưng ngoại trừ giá trị mặc định là trống, vì vậy nó phải được chỉ định

    
    

    Biểu mẫu gửi HTML

    Nhập tệp

    Điều này xác định một trường để gửi tệp. Khi người dùng nhấp vào nó, họ sẽ được nhắc chèn loại tệp mong muốn, có thể là hình ảnh, PDF, tệp tài liệu, v.v.

    
    

    Kết quả của một loại tệp đầu vào trông như thế này

    Biểu mẫu gửi HTML

    Loại Màu

    Đây là một loại đầu vào ưa thích được giới thiệu bởi HTML5. Với nó, người dùng có thể gửi màu yêu thích của họ chẳng hạn. Màu đen (#000000) là giá trị mặc định, nhưng có thể được ghi đè bằng cách đặt giá trị thành màu mong muốn

    Nhiều nhà phát triển đã sử dụng nó như một thủ thuật để chọn các sắc thái màu khác nhau có sẵn ở định dạng RGB, HSL và chữ số

    
    
    0

    Đây là kết quả của một loại màu đầu vào

    Biểu mẫu gửi HTML

    Loại tìm kiếm

    Đầu vào với loại tìm kiếm xác định một trường văn bản giống như một loại văn bản đầu vào. Nhưng lần này nó có mục đích duy nhất là tìm kiếm thông tin. Nó khác với gõ văn bản ở chỗ, nút hủy xuất hiện khi người dùng bắt đầu gõ

    
    
    1

    Biểu mẫu gửi HTML

    Nhập URL

    Khi thuộc tính loại của thẻ đầu vào được đặt thành URL, nó sẽ hiển thị một trường nơi người dùng có thể nhập URL

    
    
    2

    Biểu mẫu gửi HTML

    Nhập số điện thoại

    Loại đầu vào của điện thoại cho phép bạn thu thập số điện thoại từ người dùng

    
    
    3

    Biểu mẫu gửi HTML

    Nhập ngày

    Bạn có thể đã đăng ký trên một trang web nơi bạn yêu cầu ngày của một sự kiện nhất định. Trang web có thể đã sử dụng đầu vào có giá trị loại được đặt thành ngày để đạt được điều này

    
    
    4

    Đây là giao diện của đầu vào có kiểu ngày tháng

    Biểu mẫu gửi HTML

    Nhập Datetime-local

    Điều này hoạt động giống như ngày loại đầu vào, nhưng nó cũng cho phép người dùng chọn một ngày với một thời gian cụ thể

    
    
    5

    Biểu mẫu gửi HTML

    Loại tuần

    Loại đầu vào của tuần cho phép người dùng chọn một tuần cụ thể

    
    
    6

    Biểu mẫu gửi HTML

    Loại tháng

    Đầu vào có loại tháng sẽ điền các tháng để người dùng chọn khi nhấp vào

    
    
    7

    Biểu mẫu gửi HTML

    vùng văn bản

    Đôi khi, người dùng sẽ cần điền vào nhiều dòng văn bản không phù hợp với loại văn bản đầu vào (vì nó chỉ định trường văn bản một dòng)

    
    
    2 cho phép người dùng làm điều này vì nó xác định nhiều dòng nhập văn bản. Nó nhận các thuộc tính riêng của nó, chẳng hạn như
    
    
    3 – cho số cột và
    
    
    4 cho số hàng

    
    
    8

    Biểu mẫu gửi HTML

    Nhiều hộp chọn

    Điều này giống như một nút radio và hộp kiểm trong một gói. Nó được nhúng trong trang với hai phần tử – một phần tử

    
    
    5 và một phần tử
    
    
    6, luôn được lồng bên trong
    
    
    5

    Theo mặc định, người dùng chỉ có thể chọn một trong các tùy chọn. Nhưng với nhiều thuộc tính, bạn có thể cho phép người dùng chọn nhiều tùy chọn

    
    
    9

    Biểu mẫu gửi HTML

    Cách dán nhãn đầu vào HTML

    Việc gán nhãn cho các điều khiển biểu mẫu là rất quan trọng. Khi chúng được kết nối đúng cách với trường đầu vào thông qua thuộc tính

    
    
    8 và thuộc tính
    
    
    9 của đầu vào, người dùng sẽ dễ dàng sử dụng hơn vì họ chỉ cần nhấp vào nhãn để truy cập thông tin đầu vào

    
    
    0

    Biểu mẫu gửi HTML

    Cách biểu mẫu HTML hoạt động

    Khi người dùng điền vào một biểu mẫu và gửi nó bằng nút gửi, dữ liệu trong các điều khiển biểu mẫu sẽ được gửi đến máy chủ thông qua các phương thức yêu cầu HTTP

    
    
    0 hoặc
    
    
    1

    Vậy máy chủ được chỉ định như thế nào? . Nó cũng nhận một thuộc tính phương thức, trong đó phương thức HTTP mà nó sử dụng để truyền các giá trị đến máy chủ được chỉ định

    Phương pháp này có thể là

    
    
    0 hoặc
    
    
    1. Với phương thức
    
    
    0, các giá trị do người dùng nhập sẽ hiển thị trong URL khi dữ liệu được gửi. Nhưng với
    
    
    1, các giá trị được gửi trong tiêu đề HTTP, vì vậy những giá trị đó không hiển thị trong URL

    Nếu một thuộc tính phương thức không được sử dụng trong biểu mẫu, nó sẽ tự động cho rằng người dùng muốn sử dụng phương thức GET, vì đó là mặc định

    Vậy khi nào bạn nên sử dụng phương pháp

    
    
    0 hoặc
    
    
    1? . Sử dụng yêu cầu
    
    
    1 khi gửi tệp hoặc dữ liệu nhạy cảm

    Dự án nhỏ. Xây dựng một biểu mẫu liên hệ cơ bản

    Hãy lấy những gì chúng ta đã học về biểu mẫu và sử dụng nó để tạo một biểu mẫu liên hệ đơn giản. Tôi cũng sẽ giới thiệu một số khái niệm mới khi chúng ta tổng hợp lại tất cả

    Đây là HTML

    
    
    1

    Điều gì đang xảy ra trong mã HTML này?

    Đầu tiên, một phần tử

    
    
    3 đang bao bọc mọi phần tử khác. Nó có một hành động được đặt thành
     
    
    1 một máy chủ giả nơi sẽ nhận dữ liệu biểu mẫu

    Sau phần tử biểu mẫu, mọi phần tử khác cũng được bao quanh bởi phần tử

     
    
    2 với thẻ
     
    
    3 ngay bên dưới nó

    Chúng tôi sử dụng phần tử

     
    
    2 để nhóm các đầu vào có liên quan lại với nhau và thẻ
     
    
    3 chứa chú thích truyền đạt nội dung của biểu mẫu

    Các đầu vào

    
    
    6,
     
    
    7 và
    
    
    2 đều nằm trong một
     
    
    9 với một lớp điều khiển biểu mẫu. Vì vậy, chúng hoạt động giống như một phần tử khối, để tạo kiểu dễ dàng hơn với CSS

    Chúng cũng được xác thực với thuộc tính

    
    
    0, vì vậy biểu mẫu không gửi được khi các trường đó trống hoặc khi người dùng không nhập được các giá trị ở định dạng thích hợp

    Sau tất cả, chúng ta sẽ có kết quả trong ảnh chụp màn hình bên dưới

    Biểu mẫu gửi HTML

    Làm thế nào xấu là điều đó?

    Đây là CSS

    
    
    2

    Mã CSS đang làm gì ở đây?

    Chúng tôi căn giữa mọi thứ trong cơ thể theo chiều ngang với Flexbox và theo chiều dọc với chiều cao khung nhìn 100%. Chúng tôi đã sử dụng một họ phông chữ thảo

    Chúng tôi đã cung cấp cho đầu vào và

    
    
    2 chiều rộng 100% để chúng đi hết cỡ. Các nhãn có chiều cao dòng tối thiểu là 1. 9rem (30. 4px), vì vậy chúng không ở quá gần với đầu vào tương ứng của chúng

    Chúng tôi đã tạo kiểu cụ thể cho nút (nút loại đầu vào) bằng thuộc tính biến đổi để đẩy nó vào giữa vì nó lệch tâm một chút. Chúng tôi đã tạo cho nó một phần đệm 3px để có thêm khoảng cách xung quanh nó. Sau đó, chúng tôi đã chọn một họ phông chữ thảo cho nó với độ đậm đậm.

    Bởi vì nút quá gần với

    
    
    2, chúng tôi đặt lề trên bằng 0. 6rem để đẩy nó xuống một chút

    Chúng tôi đã cung cấp cho phần tử bộ trường của mình một phần đệm 20px ở trên cùng và dưới cùng, với 40px ở bên trái và bên phải để tách đường viền mà nó tạo ra xung quanh các phần tử

    
    
    3 mà nó được bao bọc trong đó

    Cuối cùng ta được mẫu đẹp bên dưới

    Biểu mẫu gửi HTML

    Phần kết luận

    Tôi hy vọng hướng dẫn này đã giúp bạn hiểu cách thức hoạt động của các biểu mẫu. Bây giờ bạn đã có kiến ​​thức cần thiết để tích hợp các biểu mẫu vào trang web của mình để có thể bắt đầu thu thập dữ liệu

    Cảm ơn bạn đã đọc và tiếp tục mã hóa

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO

    QUẢNG CÁO


    Biểu mẫu gửi HTML
    Kolade Chris

    Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng


    Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

    Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

    Biểu mẫu gửi HTML hoạt động như thế nào?

    Biểu mẫu HTML hoạt động như thế nào? .
    Một khách truy cập vào một trang web có chứa một biểu mẫu
    Trình duyệt web hiển thị dạng HTML
    Khách truy cập điền vào biểu mẫu và gửi
    Trình duyệt gửi dữ liệu biểu mẫu đã gửi đến máy chủ web
    Tập lệnh xử lý biểu mẫu chạy trên máy chủ web xử lý dữ liệu biểu mẫu

    Làm cách nào để nhận dữ liệu biểu mẫu đã gửi trong HTML?

    Thuộc tính phương thức chỉ định cách gửi dữ liệu biểu mẫu (dữ liệu biểu mẫu được gửi đến trang được chỉ định trong thuộc tính hành động). Dữ liệu biểu mẫu có thể được gửi dưới dạng biến URL (với method="get" ) hoặc dưới dạng giao dịch bài đăng HTTP (với method="post" ) . Ghi chú về NHẬN. Nối dữ liệu biểu mẫu vào URL theo cặp tên/giá trị.

    Biểu mẫu gửi tới HTML ở đâu?

    1 lần gửi biểu mẫu HTML. Hầu hết các biểu mẫu HTML đều có nút gửi ở cuối biểu mẫu .

    Hai phương pháp gửi biểu mẫu HTML là gì?

    Thuộc tính phương thức HTML GET và POST . Thuộc tính phương thức có thể được sử dụng với phần tử