HTML: Mã hoá URL và biểu mẫu nhiều phần – NordicCoder

Về HTML và REST thì mình đã cố gắng nỗ lực viết một điểm cuối REST trong Go, trong đó tải lên nội dung của một biểu mẫu được gửi trong trình duyệt đến một điểm cuối REST khác, nói cách khác ,

Form in Browser ----> My GO Rest API ----> Another REST API

Trong khi làm điều đó mình đã kết thúc việc học 1 số ít nguyên tắc cơ bản về phương pháp hoạt động giải trí của những biểu mẫu HTML. Vì vậy, mình nghĩ rằng sẽ thật tốt khi san sẻ những kỹ năng và kiến thức về HTML cho những bạn .

Loại mã hóa của một hình thức được xác định bởi thuộc tính enctype. Nó có thể có ba giá trị,

application / x-www-form-urlencoding – Đại diện cho một hình thức được mã hóa URL. Đây là giá trị mặc định nếu thuộc tính enctype không được đặt thành bất kỳ thứ gì .multipart / form-data – Đại diện cho một hình thức Multipart. Loại biểu mẫu này được sử dụng khi người dùng muốn tải lên tệptext / plain – Một loại biểu mẫu mới được ra mắt trong HTML5, như tên cho thấy, chỉ cần gửi tài liệu mà không cần mã hóaBây giờ, tất cả chúng ta hãy xem xét từng loại biểu mẫu với một ví dụ để hiểu rõ hơn về chúng .Mẫu mã hóa URLNhư tên cho thấy, tài liệu được gửi bằng loại biểu mẫu này là URL được mã hóa. Lấy mẫu sau

action =" / urlencoded ? firstname = sid và lastname = sloth " method =" POST " enctype =" application / x-www-form-urlencoded ">

type =" text " name =" username " value =" sidthesloth "/ >

type =" text " name =" password " value =" slothsecret "/ >

type =" submit " value =" Submit " / >

Tại đây, bạn hoàn toàn có thể thấy rằng biểu mẫu được gửi đến sever bằng cách sử dụng nhu yếu POST, điều này có nghĩa là nó có cấu trúc riêng. Nhưng cấu trúc được định dạng như thế nào ? Đó là URL được mã hóa. Về cơ bản, một chuỗi dài những cặp ( name, value ) được tạo ra. Mỗi cặp ( tên, giá trị ) được phân tách với nhau bằng dấu và ( ký hiệu ) và so với mỗi cặp ( tên, giá trị ), tên được phân tách khỏi giá trị bằng dấu = ( bằng ), như nói ,

key1 = value1 & key2 = value2

Đối với những hình thức trên, nó sẽ là ,

username=sidthesloth&password=slothsecret

Ngoài ra, chú ý quan tâm rằng chúng mình có một số ít tham số truy vấn được truyền trong URL

/urlencoded?firstname=sid&lastname=sloth.

Không phải phần thân được mã hóa URL và những tham số truy vấn được truyền trong URL hành vi trông cực kỳ giống nhau ? Đó là do tại chúng giống nhau. Họ san sẻ cùng một định dạng đã đàm đạo ở trên .Hãy thử tạo một tệp HTML với mã ở trên và xem cách nó được gửi trong những công cụ dev. Đây là một snap

Những điều cần quan tâm ở đây là Content-Type cho biết application / x-www-form-urlencoded, chuỗi truy vấn và trường biểu mẫu được chuyển đến sever theo định dạng như đã tranh luận ở trên .Lưu ý : Đừng nhầm lẫn với thuật ngữ Dữ liệu biểu mẫu trong ảnh chụp màn hình hiển thị. Đó chỉ là cách Google Chrome đại diện thay mặt cho những trường biểu mẫu .Tất cả đều ổn, nhưng có thêm một chút ít cho quy trình mã hóa. Chúng ta hãy ra mắt một số ít khoảng chừng trắng trong những giá trị được gửi, ở dạng bên dưới giống với giá trị trước nhưng có giá trị tên tiên phong được biến hóa từ sid sang sid slayer và giá trị tên người dùng đã biến hóa từ sidthesloth sang sid sloth .

action =" / urlencoded ? firstname = sid slayer và lastname = sloth " method =" POST " enctype =" application / x-www-form-urlencoded ">

type =" text " name =" username " value =" sid the sloth "/ >

type =" text " name =" password " value =" slothsecret "/ >

type =" submit "

value=

" Submit " / >

Bây giờ hãy thử gửi biểu mẫu và xem cách những trường biểu mẫu được chuyển trong những công cụ dev. Đây là một công cụ dev trong Chrome .

Rõ ràng, bạn hoàn toàn có thể thấy rằng những khoảng chừng trắng được sửa chữa thay thế bằng ‘ % 20 ’ hoặc ‘ + ’. Điều này được thực thi cho cả những tham số truy vấn và thân biểu mẫu .Đọc phần này để hiểu khi nào hoàn toàn có thể sử dụng + và % 20. Điều này gồm có quy trình mã hóa URL .Biểu mẫu nhiều phầnCác hình thức nhiều phần thường được sử dụng trong những ngữ cảnh nơi người dùng cần những tệp để được tải lên sever. Tuy nhiên, chúng tôi sẽ chỉ tập trung chuyên sâu vào những biểu mẫu dựa trên trường văn bản đơn thuần, như vậy là đủ để hiểu cách chúng hoạt động giải trí .Để quy đổi biểu mẫu trên thành biểu mẫu nhiều phần, tổng thể những gì bạn cần làm là đổi khác thuộc tính enctype của thẻ biểu mẫu từ application / x-www-form-urlencoding sang Multipart / form-data .

action =" / multipart ? firstname = sid slayer và lastname = sloth " method =" POST " enctype =" multipart / form-data ">

type =" text " name =" username " value =" sid the sloth "/ >

type =" text " name =" password " value =" slothsecret "/ >

type =" submit " value =" Submit " / >

Hãy liên tục và gửi nó và xem nó Open như thế nào trong những công cụ dev .

đây là hai điều cần quan tâm ở đây, tiêu đề Kiểu nội dung và tải trọng của nhu yếu biểu mẫu. Chúng ta hãy đi qua từng cái một .Tiêu đề loại nội dungGiá trị của tiêu đề Kiểu nội dung rõ ràng là nhiều tài liệu / biểu mẫu. Nhưng nó cũng có một giá trị khác, ranh giới. Giá trị cho điều này trong ví dụ trên được tạo bởi trình duyệt, nhưng người dùng cũng hoàn toàn có thể xác lập rất rõ nó, ví dụ, ranh giới = sidtheslothboundary. Chúng ta sẽ xem nó có ích như thế nào trong phần tiếp theo .Yêu cầu khung hìnhTải trọng nhu yếu chứa chính những trường mẫu. Mỗi cặp ( tên, giá trị ) được quy đổi thành một phần thông tin MIME theo định dạng sau ,

– <>

Nội dung-Bố trí: hình thức-dữ liệu; tên = “<< field_name >>”

<< field_value >>

Định dạng trên được lặp lại cho mỗi cặp ( tên, giá trị ) .Cuối cùng, hàng loạt tải trọng được kết thúc bởi giá trị biên được thêm vào bằng một -. Vì vậy, hàng loạt nhu yếu trông như ,– < < ranh giới_value >>Nội dung-Bố trí : hình thức-dữ liệu ; tên = “ < < field_name >> ”

<< field_value >>

– < < ranh giới_value >>Nội dung-Bố trí : hình thức-dữ liệu ; tên = “ < < field_name >> ”

<< trường_value >>

– < < ranh giới_value >> –Bây giờ, tất cả chúng ta thấy cách giá trị biên được sử dụng .Trong trường hợp của một ứng dụng / x-www-form-urlencoding, loại và ampersand hoạt động giải trí như một dấu phân làn giữa mỗi cặp ( tên, giá trị ), được cho phép sever hiểu khi nào và nơi một giá trị tham số mở màn và kết thúc .tên người dùng = sidthelsloth và password = slothsecretTrong trường hợp biểu mẫu nhiều tài liệu / biểu mẫu, giá trị biên Giao hàng mục tiêu này. Giả sử nếu giá trị biên là XXX, tải trọng nhu yếu sẽ như thế nào ,– XXXNội dung-Bố trí : hình thức-dữ liệu ; tên = “ tên người dùng ”sidthesloth– XXXNội dung-Bố trí : hình thức-dữ liệu ; tên = “ mật khẩu ”con lười– XXX –Các dấu gạch nối không phải là một phần của giá trị biên mà là thiết yếu như một phần của định dạng nhu yếu. Tiêu đề Kiểu nội dung cho nhu yếu trên sẽ là ,Loại nội dung : nhiều tài liệu / biểu mẫu tài liệu ; ranh giới = XXXĐiều này được cho phép trình duyệt hiểu, khi nào và nơi mỗi trường mở màn và kết thúc .Văn bản / mẫu đơnCác biểu mẫu này khá giống với những biểu mẫu được mã hóa URL, ngoại trừ những trường biểu mẫu không được mã hóa URL khi được gửi đến sever. Chúng không được sử dụng thoáng đãng nói chung, nhưng chúng đã được ra mắt như thể một phần của đặc tả HTML 5 .Tránh sử dụng chúng vì chúng có nghĩa là cho sự hiểu biết của con người và cho máy móc .Như trích dẫn từ thông số kỹ thuật kỹ thuật ,

Tải trọng sử dụng định dạng văn bản / định dạng được dự định là có thể đọc được. Chúng không thể được giải thích một cách đáng tin cậy bằng máy tính, vì định dạng không rõ ràng (ví dụ: không có cách nào để phân biệt một dòng mới theo nghĩa đen trong một giá trị với dòng mới tại

sự kết thúc của giá trị ) .Hy vọng, tôi đã rõ ràng trong việc lý giải những gì tôi thấy .. Nhìn thấy bạn trong những người tiếp theo .. Peace .. 🙂