Làm thế nào dữ liệu biểu mẫu có thể được sử dụng trong HTML?
|
Biểu mẫu HTML là một phần của tài liệu chứa nội dung thông thường, đánh dấu, các phần tử đặc biệt được gọi là (hộp kiểm, nút radio, menu, v.v. ) và nhãn trên các điều khiển đó. Người dùng thường "hoàn thành" một biểu mẫu bằng cách sửa đổi các điều khiển của nó (nhập văn bản, chọn các mục menu, v.v. ), trước khi gửi biểu mẫu cho đại lý để xử lý (e. g. , tới máy chủ Web, tới máy chủ thư, v.v. ) Show Đây là một biểu mẫu đơn giản bao gồm nhãn, nút radio và nút ấn (đặt lại biểu mẫu hoặc gửi biểu mẫu)
Ghi chú. Thông số kỹ thuật này bao gồm thông tin chi tiết hơn về các biểu mẫu trong các tiểu mục trên Người dùng tương tác với các biểu mẫu thông qua các điều khiển được đặt tên "Tên điều khiển" của điều khiển được cung cấp bởi thuộc tính tên của nó. Phạm vi của thuộc tính tên cho một điều khiển trong một phần tử là phần tử Mỗi điều khiển có cả giá trị ban đầu và giá trị hiện tại, cả hai đều là chuỗi ký tự. Vui lòng tham khảo định nghĩa của từng điều khiển để biết thông tin về các giá trị ban đầu và các ràng buộc có thể có đối với các giá trị do điều khiển áp đặt. Nói chung, "giá trị ban đầu" của điều khiển có thể được chỉ định bằng thuộc tính giá trị của phần tử điều khiển. Tuy nhiên, giá trị ban đầu của một phần tử được cung cấp bởi nội dung của nó và giá trị ban đầu của một phần tử trong biểu mẫu được xác định bởi việc triển khai đối tượng (i. e. , nó nằm ngoài phạm vi của thông số kỹ thuật này) "Giá trị hiện tại" của điều khiển trước tiên được đặt thành giá trị ban đầu. Sau đó, giá trị hiện tại của điều khiển có thể được sửa đổi thông qua tương tác của người dùng và tập lệnh Giá trị ban đầu của điều khiển không thay đổi. Do đó, khi một biểu mẫu được đặt lại, giá trị hiện tại của mỗi điều khiển được đặt lại về giá trị ban đầu. Nếu một điều khiển không có giá trị ban đầu, ảnh hưởng của việc đặt lại biểu mẫu đối với điều khiển đó là không xác định Khi một biểu mẫu được gửi để xử lý, một số điều khiển có tên được ghép nối với giá trị hiện tại của chúng và các cặp này có biểu mẫu. Những điều khiển mà các cặp tên/giá trị được gửi được gọi là HTML định nghĩa các loại điều khiển sau nút Tác giả có thể tạo ba loại nútTác giả tạo các nút với phần tử hoặc phần tử. Vui lòng tham khảo định nghĩa của các phần tử này để biết chi tiết về cách chỉ định các loại nút khác nhau Ghi chú. Tác giả nên lưu ý rằng phần tử cung cấp khả năng hiển thị phong phú hơn phần tử hộp kiểmHộp kiểm (và nút radio) là công tắc bật/tắt mà người dùng có thể bật/tắt. Công tắc được "bật" khi thuộc tính của phần tử điều khiển được đặt. Khi một biểu mẫu được gửi, chỉ các điều khiển hộp kiểm "bật" mới có thể trở thànhMột số hộp kiểm trong một biểu mẫu có thể giống nhau. Vì vậy, ví dụ: các hộp kiểm cho phép người dùng chọn một số giá trị cho cùng một thuộc tính. Phần tử được sử dụng để tạo điều khiển hộp kiểm nút radio Các nút radio giống như các hộp kiểm ngoại trừ khi một số chia sẻ giống nhau, chúng loại trừ lẫn nhau. khi một cái được bật "on", tất cả những cái khác có cùng tên sẽ bị "tắt". Phần tử được sử dụng để tạo điều khiển nút radio. Nếu không có nút radio nào trong một nhóm có cùng tên điều khiển được "bật" ban đầu, hành vi của tác nhân người dùng để chọn điều khiển nào ban đầu được "bật" là không xác định. Ghi chú. Do các triển khai hiện tại xử lý trường hợp này theo cách khác, nên thông số kỹ thuật hiện tại khác với RFC 1866 ( phần 8. 1. 2. 4), trong đó nêu rõTại mọi thời điểm, chính xác một trong các nút radio trong bộ được chọn. Nếu không có thành phần nào của tập hợp các nút radio chỉ định `CHECKED', thì tác nhân người dùng phải kiểm tra nút radio đầu tiên của tập hợp đó ngay từ đầu Do hành vi của tác nhân người dùng khác nhau, nên các tác giả phải đảm bảo rằng trong mỗi bộ nút radio, một nút ban đầu được "bật" menuMenu cung cấp cho người dùng các tùy chọn để chọn. Phần tử tạo menu, kết hợp với phần tử và. nhập văn bản Tác giả có thể tạo hai loại điều khiển cho phép người dùng nhập văn bản. Phần tử tạo điều khiển đầu vào một dòng và phần tử tạo điều khiển đầu vào nhiều dòng. Trong cả hai trường hợp, văn bản đầu vào trở thành văn bản của điều khiển. chọn tệp Loại điều khiển này cho phép người dùng chọn tệp để nội dung của chúng có thể được gửi bằng biểu mẫu. Phần tử được sử dụng để tạo điều khiển chọn tệp. điều khiển ẩn Tác giả có thể tạo điều khiển không được hiển thị nhưng có giá trị được gửi cùng với biểu mẫu. Các tác giả thường sử dụng loại điều khiển này để lưu trữ thông tin giữa các trao đổi máy khách/máy chủ nếu không sẽ bị mất do tính chất không trạng thái của HTTP (xem phần ). Phần tử được sử dụng để tạo điều khiển ẩn. điều khiển đối tượng Tác giả có thể chèn các đối tượng chung trong các biểu mẫu sao cho các giá trị liên quan được gửi cùng với các điều khiển khác. Tác giả tạo các điều khiển đối tượng với phần tửCác phần tử được sử dụng để tạo các điều khiển thường xuất hiện bên trong một phần tử, nhưng cũng có thể xuất hiện bên ngoài phần khai báo phần tử khi chúng được sử dụng để xây dựng giao diện người dùng. Điều này được thảo luận trong phần Lưu ý rằng các điều khiển bên ngoài biểu mẫu không thể thẻ bắt đầu. bắt buộc, Thẻ kết thúc. yêu cầu Định nghĩa thuộc tính hành động = Thuộc tính này chỉ định một tác nhân xử lý biểu mẫu. Hành vi tác nhân người dùng cho một giá trị không phải là URI HTTP không được xác định. phương pháp = nhận. post Thuộc tính này chỉ định phương thức HTTP nào sẽ được sử dụng để gửi. Các giá trị có thể (không phân biệt chữ hoa chữ thường) là "get" (mặc định) và "post". Xem phần trên để biết thông tin sử dụng. enctype = Thuộc tính này chỉ định sử dụng để gửi biểu mẫu tới máy chủ (khi giá trị của là "bài đăng"). Giá trị mặc định cho thuộc tính này là "application/x-www-form-urlencoded". Giá trị "multipart/form-data" nên được sử dụng kết hợp với phần tử, type="file". accept-charset = Thuộc tính này chỉ định danh sách dữ liệu đầu vào được chấp nhận bởi máy chủ xử lý biểu mẫu này. Giá trị là danh sách các giá trị được phân tách bằng dấu cách và/hoặc dấu phẩy. Khách hàng phải diễn giải danh sách này dưới dạng danh sách độc quyền-hoặc danh sách, tôi. e. , máy chủ có thể chấp nhận bất kỳ mã hóa ký tự đơn nào cho mỗi thực thể nhận đượcGiá trị mặc định cho thuộc tính này là chuỗi dành riêng "UNKNOWN". Tác nhân người dùng có thể diễn giải giá trị này dưới dạng mã hóa ký tự được sử dụng để truyền tài liệu chứa phần tử này chấp nhận = Thuộc tính này chỉ định danh sách các loại nội dung được phân tách bằng dấu phẩy mà máy chủ xử lý biểu mẫu này sẽ xử lý chính xác. Tác nhân người dùng có thể sử dụng thông tin này để lọc ra các tệp không phù hợp khi nhắc người dùng chọn tệp để gửi đến máy chủ (cf. phần tử khi = "tệp"). name = Thuộc tính này đặt tên cho phần tử để nó có thể được tham chiếu từ biểu định kiểu hoặc tập lệnh. Ghi chú. Thuộc tính này đã được đưa vào để tương thích ngược. Các ứng dụng nên sử dụng thuộc tính để xác định các phần tửCác thuộc tính được xác định ở nơi khác Phần tử hoạt động như một thùng chứa cho. Nó chỉ định
Một biểu mẫu có thể chứa văn bản và đánh dấu (đoạn văn, danh sách, v.v. ) ngoài ra Ví dụ sau đây cho thấy một biểu mẫu sẽ được xử lý bởi chương trình "adduser" khi được gửi. Biểu mẫu sẽ được gửi đến chương trình bằng phương thức "đăng" HTTP ...form contents... Vui lòng tham khảo phần trên để biết thông tin về cách tác nhân người dùng phải chuẩn bị dữ liệu biểu mẫu cho máy chủ và cách tác nhân người dùng nên xử lý các phản hồi dự kiến Ghi chú. Thảo luận thêm về hành vi của các máy chủ nhận dữ liệu biểu mẫu nằm ngoài phạm vi của thông số kỹ thuật này INPUT - O EMPTY -- form control --> %attrs; -- %coreattrs, %i18n, %events -- type %InputType; TEXT -- what kind of widget is needed -- name CDATA #IMPLIED -- submit as part of form -- value CDATA #IMPLIED -- Specify for radio buttons and checkboxes -- checked (checked) #IMPLIED -- for radio buttons and check boxes -- disabled (disabled) #IMPLIED -- unavailable in this context -- readonly (readonly) #IMPLIED -- for text and passwd -- size CDATA #IMPLIED -- specific to each type of field -- maxlength NUMBER #IMPLIED -- max chars for text fields -- src %URI; #IMPLIED -- for fields with images -- alt CDATA #IMPLIED -- short description -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- tabindex NUMBER #IMPLIED -- position in tabbing order -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onselect %Script; #IMPLIED -- some text was selected -- onchange %Script; #IMPLIED -- the element value was changed -- accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- > thẻ bắt đầu. bắt buộc, Thẻ kết thúc. cấm Định nghĩa thuộc tính gõ = văn bản. mật khẩu mở khóa. hộp kiểm. Đài. Gửi đi. cài lại. tập tin. ẩn giấu. hình ảnh. nút Thuộc tính này chỉ định để tạo. Giá trị mặc định cho thuộc tính này là "văn bản". tên = Thuộc tính này chỉ định. giá trị = Thuộc tính này chỉ định điều khiển. Nó là tùy chọn trừ khi thuộc tính có giá trị "radio" hoặc "checkbox". size = Thuộc tính này cho tác nhân người dùng biết chiều rộng ban đầu của điều khiển. Chiều rộng được đưa ra trừ khi thuộc tính có giá trị "văn bản" hoặc "mật khẩu". Trong trường hợp đó, giá trị của nó đề cập đến số ký tự (số nguyên). maxlength = Khi thuộc tính có giá trị "văn bản" hoặc "mật khẩu", thuộc tính này chỉ định số lượng ký tự tối đa mà người dùng có thể nhập. Con số này có thể vượt quá chỉ định, trong trường hợp đó, tác nhân người dùng nên cung cấp cơ chế cuộn. Giá trị mặc định cho thuộc tính này là số lượng không giới hạn. đã chọn Khi thuộc tính có giá trị "radio" hoặc "hộp kiểm", thuộc tính boolean này chỉ định rằng nút đang bật. Tác nhân người dùng phải bỏ qua thuộc tính này cho các loại điều khiển khác. src = Khi thuộc tính có giá trị "hình ảnh", thuộc tính này chỉ định vị trí của hình ảnh được sử dụng để trang trí nút gửi đồ họaCác thuộc tính được xác định ở nơi khác Được xác định bởi phần tử phụ thuộc vào giá trị của thuộc tính textTạo điều khiển một dòng. mật khẩuGiống như "văn bản", nhưng văn bản đầu vào được hiển thị theo cách ẩn các ký tự (e. g. , một dãy dấu hoa thị). Loại điều khiển này thường được sử dụng cho đầu vào nhạy cảm như mật khẩu. Lưu ý rằng đây là văn bản do người dùng nhập, không phải văn bản do tác nhân người dùng hiển thịGhi chú. Các nhà thiết kế ứng dụng nên lưu ý rằng cơ chế này chỉ cung cấp khả năng bảo vệ an ninh nhẹ. Mặc dù mật khẩu được che dấu bởi các tác nhân người dùng từ những người quan sát bình thường, nhưng nó được truyền đến máy chủ ở dạng văn bản rõ ràng và bất kỳ ai có quyền truy cập mạng ở mức độ thấp đều có thể đọc được hộp kiểmTạo radioTạo một lần gửiTạo một hình ảnhTạo một đồ họa Giá trị của thuộc tính chỉ định URI của hình ảnh sẽ trang trí cho nút. Vì lý do tiếp cận, tác giả nên cung cấp hình ảnh thông qua thuộc tínhKhi một thiết bị trỏ được sử dụng để nhấp vào hình ảnh, biểu mẫu sẽ được gửi và tọa độ nhấp được chuyển đến máy chủ. Giá trị x được đo từ bên trái của hình ảnh và giá trị y được đo từ trên cùng của hình ảnh. Dữ liệu đã gửi bao gồm tên. x=x-giá trị và tên. y=y-value trong đó "tên" là giá trị của thuộc tính tên và giá trị x và giá trị y lần lượt là các giá trị tọa độ x và y Nếu máy chủ thực hiện các hành động khác nhau tùy thuộc vào vị trí được nhấp, người dùng trình duyệt phi đồ họa sẽ gặp bất lợi. Vì lý do này, các tác giả nên xem xét các phương pháp thay thế
17. 4. 2 Ví dụ về các biểu mẫu chứa các điều khiển INPUTĐoạn HTML mẫu sau xác định một biểu mẫu đơn giản cho phép người dùng nhập tên, họ, địa chỉ email và giới tính. Khi nút gửi được kích hoạt, biểu mẫu sẽ được gửi đến chương trình được chỉ định bởi thuộc tính
Biểu mẫu này có thể được hiển thị như sau Trong phần về phần tử, chúng ta thảo luận về việc đánh dấu các nhãn như "Tên" Trong ví dụ tiếp theo này, tên hàm JavaScript xác minh được kích hoạt khi sự kiện "onclick" xảy ra
Vui lòng tham khảo phần trên để biết thêm thông tin về kịch bản và sự kiện Ví dụ sau đây cho thấy nội dung của tệp do người dùng chỉ định có thể được gửi bằng biểu mẫu như thế nào. Người dùng được nhắc nhập tên của họ và một danh sách các tên tệp có nội dung sẽ được gửi cùng với biểu mẫu. Bằng cách chỉ định giá trị của "multipart/form-data", nội dung của mỗi tệp sẽ được đóng gói để gửi trong một phần riêng biệt của tài liệu nhiều phần
thẻ bắt đầu. bắt buộc, Thẻ kết thúc. yêu cầu Các thuộc tính được xác định ở nơi khác Các nút được tạo bằng phần tử có chức năng giống như các nút được tạo bằng phần tử, nhưng chúng cung cấp khả năng hiển thị phong phú hơn. phần tử có thể có nội dung. Ví dụ: phần tử chứa hình ảnh có chức năng giống và có thể giống với phần tử được đặt thành "hình ảnh", nhưng loại phần tử cho phép nội dung Các tác nhân người dùng trực quan có thể hiển thị các nút có hình nổi và chuyển động lên/xuống khi được nhấp, trong khi chúng có thể hiển thị các nút dưới dạng hình ảnh "phẳng" Ví dụ sau mở rộng một ví dụ trước, nhưng tạo và các nút thay vì. Các nút chứa hình ảnh theo cách của phần tử
Nhớ lại rằng các tác giả phải cung cấp cho một yếu tố Việc liên kết bản đồ hình ảnh với bản đồ xuất hiện dưới dạng nội dung của một phần tử là bất hợp pháp VÍ DỤ BẤT HỢP PHÁP thẻ bắt đầu. bắt buộc, Thẻ kết thúc. yêu cầu CHỌN định nghĩa thuộc tính name = Thuộc tính này chỉ định kích thước = Nếu một phần tử được trình bày dưới dạng hộp danh sách cuộn, thuộc tính này chỉ định số lượng hàng trong danh sách sẽ hiển thị cùng một lúc. Các tác nhân người dùng trực quan không bắt buộc phải trình bày một phần tử dưới dạng hộp danh sách; . nhiều Nếu được đặt, thuộc tính boolean này cho phép nhiều lựa chọn. Nếu không được đặt, phần tử chỉ cho phép các lựa chọn đơn lẻCác thuộc tính được xác định ở nơi khác Phần tử tạo ra một. Mỗi lựa chọn được cung cấp bởi menu được đại diện bởi một yếu tố. Một phần tử phải chứa ít nhất một phần tử Phần tử cho phép tác giả nhóm các lựa chọn một cách hợp lý. Điều này đặc biệt hữu ích khi người dùng phải chọn từ một danh sách dài các tùy chọn; . Trong HTML 4, tất cả các phần tử phải được chỉ định trực tiếp trong một phần tử (i. e. , các nhóm có thể không được lồng vào nhau) Không hoặc nhiều lựa chọn có thể được chọn trước cho người dùng. Tác nhân người dùng nên xác định lựa chọn nào được chọn trước như sau
thẻ bắt đầu. bắt buộc, Thẻ kết thúc. yêu cầu Định nghĩa thuộc tính OPTGROUP nhãn = Thuộc tính này chỉ định nhãn cho nhóm tùy chọnCác thuộc tính được xác định ở nơi khác Ghi chú. Những người triển khai được khuyên rằng các phiên bản HTML trong tương lai có thể mở rộng cơ chế nhóm để cho phép các nhóm lồng nhau (i. e. , các phần tử có thể lồng vào nhau). Điều này sẽ cho phép các tác giả đại diện cho một hệ thống phân cấp lựa chọn phong phú hơn thẻ bắt đầu. bắt buộc, Thẻ kết thúc. không bắt buộc TÙY CHỌN Định nghĩa thuộc tính đã chọn Khi được đặt, thuộc tính boolean này chỉ định rằng tùy chọn này được chọn trước. giá trị = Thuộc tính này chỉ định điều khiển. Nếu thuộc tính này không được đặt, thuộc tính được đặt thành nội dung của phần tử. nhãn = Thuộc tính này cho phép tác giả chỉ định nhãn ngắn hơn cho một tùy chọn so với nội dung của phần tử. Khi được chỉ định, tác nhân người dùng nên sử dụng giá trị của thuộc tính này thay vì nội dung của phần tử làm nhãn tùy chọnCác thuộc tính được xác định ở nơi khác Khi hiển thị lựa chọn menu, tác nhân người dùng nên sử dụng giá trị thuộc tính của phần tử làm lựa chọn. Nếu thuộc tính này không được chỉ định, tác nhân người dùng nên sử dụng nội dung của phần tử Thuộc tính của phần tử chỉ định nhãn cho một nhóm các lựa chọn Trong ví dụ này, chúng tôi tạo một menu cho phép người dùng chọn cài đặt thành phần nào trong bảy thành phần phần mềm. Các thành phần thứ nhất và thứ hai được chọn trước nhưng người dùng có thể bỏ chọn. Các thành phần còn lại không được chọn trước. Thuộc tính nói rằng menu chỉ nên có 4 hàng mặc dù người dùng có thể chọn trong số 7 tùy chọn. Các tùy chọn khác sẽ được cung cấp thông qua cơ chế cuộn Tiếp theo là các nút gửi và đặt lại ________số 8_______Chỉ các tùy chọn được chọn sẽ được (sử dụng "chọn thành phần"). Khi không có tùy chọn nào được chọn, điều khiển không thành công và cả tên cũng như bất kỳ giá trị nào đều không được gửi tới máy chủ khi biểu mẫu được gửi. Lưu ý rằng nơi đặt thuộc tính, nó sẽ xác định điều khiển, nếu không thì đó là nội dung của phần tử Trong ví dụ này, chúng tôi sử dụng phần tử để nhóm các lựa chọn. Đánh dấu sau đại diện cho nhóm sau ...form contents...0 Tác nhân người dùng trực quan có thể cho phép người dùng chọn từ các nhóm tùy chọn thông qua menu phân cấp hoặc một số cơ chế khác phản ánh cấu trúc của các lựa chọn Tác nhân người dùng đồ họa có thể hiển thị điều này dưới dạng Hình ảnh này hiển thị một phần tử được hiển thị dưới dạng các menu xếp tầng. Nhãn trên cùng của menu hiển thị giá trị hiện được chọn (PortMaster 3, 3. 7. 1). Người dùng đã mở hai menu xếp tầng nhưng chưa chọn giá trị mới (PortMaster 2, 3. 7). Lưu ý rằng mỗi menu xếp tầng hiển thị nhãn của một phần tử hoặc thẻ bắt đầu. bắt buộc, Thẻ kết thúc. yêu cầu Định nghĩa thuộc tính tên = Thuộc tính này chỉ định các hàng = Thuộc tính này chỉ định số dòng văn bản hiển thị. Người dùng có thể nhập nhiều dòng hơn mức này, do đó, tác nhân người dùng nên cung cấp một số phương tiện để cuộn qua nội dung của điều khiển khi nội dung vượt ra ngoài vùng hiển thị. cols = Thuộc tính này chỉ định chiều rộng hiển thị theo chiều rộng ký tự trung bình. Người dùng có thể nhập các dòng dài hơn dòng này, do đó, tác nhân người dùng nên cung cấp một số phương tiện để cuộn qua nội dung của điều khiển khi nội dung vượt ra ngoài vùng hiển thị. Tác nhân người dùng có thể bọc các dòng văn bản có thể nhìn thấy để giữ cho các dòng dài có thể nhìn thấy mà không cần cuộnCác thuộc tính được xác định ở nơi khác Phần tử tạo điều khiển nhiều dòng. Tác nhân người dùng nên sử dụng nội dung của phần tử này làm điều khiển và sẽ hiển thị văn bản này ban đầu Ví dụ này tạo một điều khiển có 20 hàng x 80 cột và ban đầu chứa hai dòng văn bản. Tiếp theo là các nút gửi và đặt lại ...form contents...1 Đặt thuộc tính cho phép tác giả hiển thị văn bản không thể sửa đổi trong một. Điều này khác với việc sử dụng văn bản được đánh dấu tiêu chuẩn trong tài liệu vì giá trị của được gửi cùng với biểu mẫu ISINDEX bây giờ là. Phần tử này tạo điều khiển một dòng. Tác giả nên sử dụng phần tử để tạo điều khiển Xem định nghĩa chính thức Các thuộc tính được xác định ở nơi khác Phần tử tạo điều khiển một dòng cho phép bất kỳ số lượng ký tự nào. Tác nhân người dùng có thể sử dụng giá trị của thuộc tính làm tiêu đề cho lời nhắc Ngữ nghĩa của ISINDEX. Hiện tại, ngữ nghĩa của for chỉ được xác định rõ khi URI cơ sở cho tài liệu kèm theo là một URI HTTP. Trên thực tế, chuỗi đầu vào bị giới hạn ở Latin-1 vì không có cơ chế nào để URI chỉ định một bộ ký tự khác Một số điều khiển biểu mẫu tự động có nhãn được liên kết với chúng (nhấn nút) trong khi hầu hết thì không (trường văn bản, hộp kiểm và nút radio và menu) Đối với những điều khiển có nhãn ẩn, tác nhân người dùng nên sử dụng giá trị của thuộc tính giá trị làm chuỗi nhãn Phần tử được sử dụng để chỉ định nhãn cho các điều khiển không có nhãn ẩn, thẻ bắt đầu. bắt buộc, Thẻ kết thúc. yêu cầu Định nghĩa thuộc tính for = Thuộc tính này liên kết rõ ràng nhãn đang được xác định với một điều khiển khác. Khi xuất hiện, giá trị của thuộc tính này phải giống với giá trị của thuộc tính của một số điều khiển khác trong cùng một tài liệu. Khi vắng mặt, nhãn được xác định được liên kết với nội dung của phần tửCác thuộc tính được xác định ở nơi khác Phần tử có thể được sử dụng để đính kèm thông tin vào điều khiển. Mỗi phần tử được liên kết với chính xác một điều khiển biểu mẫu Thuộc tính liên kết nhãn với điều khiển khác một cách rõ ràng. giá trị của thuộc tính phải giống với giá trị của thuộc tính của phần tử điều khiển được liên kết. Nhiều hơn một có thể được liên kết với cùng một điều khiển bằng cách tạo nhiều tham chiếu thông qua thuộc tính Ví dụ này tạo một bảng được dùng để căn chỉnh hai điều khiển và các nhãn được liên kết của chúng. Mỗi nhãn được liên kết rõ ràng với một ...form contents...2 Ví dụ này mở rộng một mẫu ví dụ trước để bao gồm các yếu tố
Để liên kết ngầm một nhãn với một điều khiển khác, phần tử điều khiển phải nằm trong nội dung của phần tử. Trong trường hợp này, chỉ có thể chứa một phần tử điều khiển. Bản thân nhãn có thể được định vị trước hoặc sau điều khiển liên quan Trong ví dụ này, chúng tôi ngầm liên kết hai nhãn với hai điều khiển ...form contents...4 Lưu ý rằng kỹ thuật này không thể được sử dụng khi một bảng đang được sử dụng để bố trí, với nhãn trong một ô và điều khiển liên quan của nó trong một ô khác Khi một phần tử nhận , nó sẽ chuyển tiêu điểm đến điều khiển được liên kết của nó. Xem phần bên dưới để biết ví dụ Nhãn có thể được hiển thị bởi tác nhân người dùng theo một số cách (e. g. , trực quan, đọc bằng bộ tổng hợp giọng nói, v.v. ) thẻ bắt đầu. bắt buộc, Thẻ kết thúc. yêu cầu LEGEND Định nghĩa thuộc tính căn = hàng đầu. đáy. bên trái. right Thuộc tính này chỉ định vị trí của chú giải đối với bộ trường. Những giá trị khả thi
Các thuộc tính được xác định ở nơi khác Phần tử cho phép tác giả nhóm các điều khiển và nhãn liên quan theo chủ đề. Điều khiển nhóm giúp người dùng hiểu mục đích của họ dễ dàng hơn đồng thời hỗ trợ điều hướng theo tab cho tác nhân người dùng trực quan và điều hướng giọng nói cho tác nhân người dùng định hướng giọng nói. Việc sử dụng hợp lý phần tử này làm cho tài liệu dễ truy cập hơn Phần tử cho phép tác giả gán chú thích cho một. Chú giải cải thiện khả năng truy cập khi được hiển thị không trực quan Trong ví dụ này, chúng tôi tạo một biểu mẫu mà một người có thể điền tại văn phòng bác sĩ. Nó được chia thành ba phần. thông tin cá nhân, tiền sử bệnh và thuốc hiện tại. Mỗi phần chứa các điều khiển để nhập thông tin thích hợp ...form contents...5 Lưu ý rằng trong ví dụ này, chúng tôi có thể cải thiện cách trình bày trực quan của biểu mẫu bằng cách căn chỉnh các phần tử bên trong mỗi phần tử (với biểu định kiểu), thêm thông tin về màu sắc và phông chữ (với biểu định kiểu), thêm tập lệnh (ví dụ: chỉ mở "thuốc hiện tại" Trong tài liệu HTML, một phần tử phải nhận được tiêu điểm từ người dùng để hoạt động và thực hiện các tác vụ của nó. Ví dụ: người dùng phải kích hoạt một liên kết được chỉ định bởi phần tử để theo liên kết được chỉ định. Tương tự, người dùng phải đặt tiêu điểm để nhập văn bản vào đó Có một số cách để tập trung vào một phần tử
Định nghĩa thuộc tính tabindex = Thuộc tính này chỉ định vị trí của phần tử hiện tại theo thứ tự tab cho tài liệu hiện tại. Giá trị này phải là một số từ 0 đến 32767. Tác nhân người dùng nên bỏ qua các số 0 đứng đầuThứ tự tab xác định thứ tự các phần tử sẽ nhận được tiêu điểm khi người dùng điều hướng qua bàn phím. Thứ tự tab có thể bao gồm các phần tử được lồng trong các phần tử khác Các yếu tố có thể nhận tiêu điểm phải được điều hướng bởi tác nhân người dùng theo các quy tắc sau
Các phần tử sau hỗ trợ thuộc tính. , , , , , , và Trong ví dụ này, thứ tự tab sẽ là , các phần tử theo thứ tự (lưu ý rằng "field1" và nút chia sẻ cùng một chỉ mục tab, nhưng "field1" xuất hiện sau trong luồng ký tự) và cuối cùng là liên kết được tạo bởi phần tử ...form contents...6 phím tab. Chuỗi khóa thực tế gây ra điều hướng tab hoặc kích hoạt phần tử phụ thuộc vào cấu hình của tác nhân người dùng (e. g. , phím "tab" được sử dụng để điều hướng và phím "enter" được sử dụng để kích hoạt phần tử đã chọn) Tác nhân người dùng cũng có thể xác định trình tự khóa để điều hướng thứ tự tab ngược lại. Khi đạt đến điểm cuối (hoặc điểm bắt đầu) của thứ tự gắn thẻ, tác nhân người dùng có thể quay lại điểm đầu (hoặc điểm cuối) Định nghĩa thuộc tính accesskey = Thuộc tính này gán khóa truy cập cho một phần tử. Khóa truy cập là một ký tự đơn trong bộ ký tự tài liệu. Ghi chú. Tác giả nên xem xét phương thức nhập liệu của người đọc dự kiến khi chỉ định khóa truy cậpNhấn một phím truy cập được gán cho một phần tử sẽ đặt tiêu điểm cho phần tử đó. Hành động xảy ra khi một phần tử nhận tiêu điểm phụ thuộc vào phần tử. Ví dụ: khi người dùng kích hoạt một liên kết được xác định bởi phần tử, tác nhân người dùng thường đi theo liên kết. Khi người dùng kích hoạt nút radio, tác nhân người dùng sẽ thay đổi giá trị của nút radio. Khi người dùng kích hoạt một trường văn bản, nó sẽ cho phép nhập liệu, v.v. Các phần tử sau hỗ trợ thuộc tính. , , , , , và và Ví dụ này gán khóa truy cập "U" cho nhãn được liên kết với điều khiển. Nhập phím truy cập sẽ đặt tiêu điểm vào nhãn, từ đó đưa nhãn đó đến điều khiển được liên kết. Người dùng sau đó có thể nhập văn bản vào khu vực ...form contents...7 Trong ví dụ này, chúng tôi gán một khóa truy cập cho một liên kết được xác định bởi phần tử. Nhập khóa truy cập này sẽ đưa người dùng đến một tài liệu khác, trong trường hợp này là mục lục ...form contents...8 Việc gọi các khóa truy cập phụ thuộc vào hệ thống cơ bản. Chẳng hạn, trên các máy chạy MS Windows, người ta thường phải nhấn phím "alt" ngoài phím truy cập. Trên các hệ thống của Apple, người ta thường phải nhấn phím "cmd" ngoài phím truy cập Việc hiển thị các khóa truy cập phụ thuộc vào tác nhân người dùng. Chúng tôi khuyên các tác giả nên bao gồm khóa truy cập trong văn bản nhãn hoặc bất cứ nơi nào áp dụng khóa truy cập. Tác nhân người dùng phải hiển thị giá trị của khóa truy cập theo cách để nhấn mạnh vai trò của nó và để phân biệt nó với các ký tự khác (e. g. , bằng cách gạch dưới nó) Trong các ngữ cảnh mà đầu vào của người dùng là không mong muốn hoặc không liên quan, điều quan trọng là có thể vô hiệu hóa một điều khiển hoặc hiển thị nó ở chế độ chỉ đọc. Ví dụ: một người có thể muốn tắt nút gửi của biểu mẫu cho đến khi người dùng nhập một số dữ liệu bắt buộc. Tương tự, một tác giả có thể muốn bao gồm một đoạn văn bản chỉ đọc phải được gửi dưới dạng một giá trị cùng với biểu mẫu. Các phần sau mô tả các điều khiển bị vô hiệu hóa và chỉ đọc Định nghĩa thuộc tính Khi được đặt, thuộc tính có các tác dụng sau đối với một phần tử Các phần tử sau hỗ trợ thuộc tính. , , , , , và Thuộc tính này được kế thừa nhưng các khai báo cục bộ sẽ ghi đè giá trị được kế thừa Cách các phần tử bị vô hiệu hóa được hiển thị tùy thuộc vào tác nhân người dùng. Ví dụ: một số tác nhân người dùng đã vô hiệu hóa các mục menu, nhãn nút, v.v. Trong ví dụ này, phần tử bị vô hiệu hóa. Do đó, nó không thể nhận đầu vào của người dùng cũng như giá trị của nó sẽ không được gửi cùng với biểu mẫu ...form contents...9 Ghi chú. Cách duy nhất để sửa đổi động giá trị của thuộc tính là thông qua tập lệnh Định nghĩa thuộc tính chỉ đọc Khi được đặt cho điều khiển biểu mẫu, thuộc tính boolean này cấm thay đổi điều khiểnThuộc tính chỉ định liệu người dùng có thể sửa đổi điều khiển hay không Khi được đặt, thuộc tính có các tác dụng sau đối với một phần tử Các phần tử sau hỗ trợ thuộc tính. và Cách hiển thị các phần tử chỉ đọc tùy thuộc vào tác nhân người dùng Ghi chú. Cách duy nhất để sửa đổi động giá trị của thuộc tính là thông qua tập lệnh Các phần sau đây giải thích cách tác nhân người dùng gửi dữ liệu biểu mẫu để tạo thành tác nhân xử lý Thuộc tính của phần tử chỉ định phương thức HTTP được sử dụng để gửi biểu mẫu tới tác nhân xử lý. Thuộc tính này có thể nhận hai giá trị
Phương thức "get" nên được sử dụng khi biểu mẫu không có giá trị (i. e. , không gây tác dụng phụ). Nhiều tìm kiếm cơ sở dữ liệu không có tác dụng phụ có thể nhìn thấy và tạo ra các ứng dụng lý tưởng cho phương thức "lấy" Nếu dịch vụ liên quan đến việc xử lý biểu mẫu gây ra tác dụng phụ (ví dụ: nếu biểu mẫu sửa đổi cơ sở dữ liệu hoặc đăng ký dịch vụ), nên sử dụng phương pháp "đăng" Ghi chú. Phương thức "get" giới hạn các giá trị thành các ký tự ASCII. Chỉ phương thức "đăng" (với ="multipart/form-data") được chỉ định để bao gồm toàn bộ bộ ký tự Kiểm soát thành công là "hợp lệ" để gửi. Mọi điều khiển thành công đều được ghép nối với nó như một phần của quy trình đã gửi. Một điều khiển thành công phải được xác định trong một phần tử và phải có một Tuy nhiên
Nếu một điều khiển không có biểu mẫu khi được gửi, tác nhân người dùng không bắt buộc phải coi đó là một điều khiển thành công Hơn nữa, các tác nhân người dùng không nên coi các điều khiển sau đây là thành công và các điều khiển không được hiển thị do cài đặt biểu định kiểu vẫn có thể thành công. Ví dụ INPUT - O EMPTY -- form control --> %attrs; -- %coreattrs, %i18n, %events -- type %InputType; TEXT -- what kind of widget is needed -- name CDATA #IMPLIED -- submit as part of form -- value CDATA #IMPLIED -- Specify for radio buttons and checkboxes -- checked (checked) #IMPLIED -- for radio buttons and check boxes -- disabled (disabled) #IMPLIED -- unavailable in this context -- readonly (readonly) #IMPLIED -- for text and passwd -- size CDATA #IMPLIED -- specific to each type of field -- maxlength NUMBER #IMPLIED -- max chars for text fields -- src %URI; #IMPLIED -- for fields with images -- alt CDATA #IMPLIED -- short description -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- tabindex NUMBER #IMPLIED -- position in tabbing order -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onselect %Script; #IMPLIED -- some text was selected -- onchange %Script; #IMPLIED -- the element value was changed -- accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- >0 vẫn sẽ khiến một giá trị được ghép nối với tên "mật khẩu vô hình" và được gửi cùng với biểu mẫu Khi người dùng gửi một biểu mẫu (e. g. , bằng cách kích hoạt a ), tác nhân người dùng xử lý nó như sau Bước một. Xác địnhBước hai. Xây dựng tập dữ liệu biểu mẫuTập dữ liệu biểu mẫu là một chuỗi / cặp được tạo từ Bước thứ ba. Mã hóa tập dữ liệu biểu mẫuTập dữ liệu biểu mẫu sau đó được mã hóa theo quy định bởi thuộc tính của phần tử Bước bốn. Gửi bộ dữ liệu biểu mẫu được mã hóaCuối cùng, dữ liệu được mã hóa được gửi đến tác nhân xử lý được chỉ định bởi thuộc tính bằng cách sử dụng giao thức được chỉ định bởi thuộc tính Thông số kỹ thuật này không chỉ định tất cả các phương thức gửi hợp lệ hoặc có thể được sử dụng với các biểu mẫu. Tuy nhiên, tác nhân người dùng HTML 4 phải hỗ trợ các quy ước đã thiết lập trong các trường hợp sau
Đối với bất kỳ giá trị nào khác của or , hành vi không được chỉ định Tác nhân người dùng sẽ hiển thị phản hồi từ các giao dịch HTTP "get" và "post" Thuộc tính của phần tử chỉ định được sử dụng để mã hóa để gửi đến máy chủ. Tác nhân người dùng phải hỗ trợ các loại nội dung được liệt kê bên dưới. Hành vi cho các loại nội dung khác là không xác định Xin vui lòng cũng tham khảo phần trên ứng dụng/x-www-form-urlencodedĐây là loại nội dung mặc định. Các biểu mẫu được gửi với loại nội dung này phải được mã hóa như sau
nhiều phần/biểu mẫu dữ liệuGhi chú. Vui lòng tham khảo để biết thêm thông tin về tệp tải lên, bao gồm các vấn đề về khả năng tương thích ngược, mối quan hệ giữa "nhiều phần/biểu mẫu dữ liệu" và các loại nội dung khác, các vấn đề về hiệu suất, v.v. Vui lòng tham khảo phụ lục để biết thông tin về Loại nội dung "application/x-www-form-urlencoded" không hiệu quả để gửi số lượng lớn dữ liệu nhị phân hoặc văn bản chứa các ký tự không phải ASCII. Loại nội dung "multipart/form-data" nên được sử dụng để gửi biểu mẫu chứa tệp, dữ liệu không phải ASCII và dữ liệu nhị phân Nội dung "multipart/form-data" tuân theo các quy tắc của tất cả các luồng dữ liệu MIME nhiều phần như được nêu trong. Định nghĩa "multipart/form-data" có tại cơ quan đăng ký Thông báo "nhiều phần/biểu mẫu dữ liệu" chứa một loạt các phần, mỗi phần đại diện cho một. Các bộ phận được gửi đến tác nhân xử lý theo cùng thứ tự các điều khiển tương ứng xuất hiện trong luồng tài liệu. Ranh giới một phần không được xuất hiện trong bất kỳ dữ liệu nào; Như với tất cả các loại MIME nhiều phần, mỗi phần có tiêu đề "Kiểu nội dung" tùy chọn mặc định là "văn bản/đơn giản". Tác nhân người dùng phải cung cấp tiêu đề "Loại nội dung", kèm theo tham số "bộ ký tự" Mỗi phần dự kiến sẽ chứa
Do đó, ví dụ, đối với điều khiển có tên "mycontrol", phần tương ứng sẽ được chỉ định INPUT - O EMPTY -- form control --> %attrs; -- %coreattrs, %i18n, %events -- type %InputType; TEXT -- what kind of widget is needed -- name CDATA #IMPLIED -- submit as part of form -- value CDATA #IMPLIED -- Specify for radio buttons and checkboxes -- checked (checked) #IMPLIED -- for radio buttons and check boxes -- disabled (disabled) #IMPLIED -- unavailable in this context -- readonly (readonly) #IMPLIED -- for text and passwd -- size CDATA #IMPLIED -- specific to each type of field -- maxlength NUMBER #IMPLIED -- max chars for text fields -- src %URI; #IMPLIED -- for fields with images -- alt CDATA #IMPLIED -- short description -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- tabindex NUMBER #IMPLIED -- position in tabbing order -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onselect %Script; #IMPLIED -- some text was selected -- onchange %Script; #IMPLIED -- the element value was changed -- accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- >1 Như với tất cả các lần truyền MIME, "CR LF" (i. e. , `%0D%0A') được sử dụng để phân tách các dòng dữ liệu Mỗi phần có thể được mã hóa và tiêu đề "Mã hóa truyền nội dung" được cung cấp nếu giá trị của phần đó không tuân theo mã hóa (7BIT) mặc định (xem phần 6) Nếu nội dung của một tệp được gửi cùng với một biểu mẫu, tệp đầu vào phải được xác định bởi (e. g. , "application/octet-stream"). Nếu nhiều tệp được trả về do kết quả của một mục nhập biểu mẫu, chúng sẽ được trả về dưới dạng "nhiều phần/hỗn hợp" được nhúng trong "nhiều phần/dữ liệu biểu mẫu" Tác nhân người dùng nên cố gắng cung cấp tên tệp cho mỗi tệp đã gửi. Tên tệp có thể được chỉ định bằng tham số "tên tệp" của 'Bố trí nội dung. tiêu đề dữ liệu biểu mẫu' hoặc, trong trường hợp có nhiều tệp, trong phần 'Bố trí nội dung. file' tiêu đề của subpart. Nếu tên tệp của hệ điều hành của máy khách không ở dạng US-ASCII, thì tên tệp có thể được ước lượng hoặc mã hóa bằng phương pháp. Điều này thuận tiện cho những trường hợp, chẳng hạn như các tệp đã tải lên có thể chứa các tham chiếu đến nhau (e. g. , tệp TeX và tệp ". sty" mô tả phong cách phụ trợ) Ví dụ sau minh họa mã hóa "multipart/form-data". Giả sử chúng ta có dạng sau INPUT - O EMPTY -- form control --> %attrs; -- %coreattrs, %i18n, %events -- type %InputType; TEXT -- what kind of widget is needed -- name CDATA #IMPLIED -- submit as part of form -- value CDATA #IMPLIED -- Specify for radio buttons and checkboxes -- checked (checked) #IMPLIED -- for radio buttons and check boxes -- disabled (disabled) #IMPLIED -- unavailable in this context -- readonly (readonly) #IMPLIED -- for text and passwd -- size CDATA #IMPLIED -- specific to each type of field -- maxlength NUMBER #IMPLIED -- max chars for text fields -- src %URI; #IMPLIED -- for fields with images -- alt CDATA #IMPLIED -- short description -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- tabindex NUMBER #IMPLIED -- position in tabbing order -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onselect %Script; #IMPLIED -- some text was selected -- onchange %Script; #IMPLIED -- the element value was changed -- accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- >2 Nếu người dùng nhập "Larry" trong kiểu nhập văn bản và chọn tệp văn bản "file1. txt", tác nhân người dùng có thể gửi lại dữ liệu sau INPUT - O EMPTY -- form control --> %attrs; -- %coreattrs, %i18n, %events -- type %InputType; TEXT -- what kind of widget is needed -- name CDATA #IMPLIED -- submit as part of form -- value CDATA #IMPLIED -- Specify for radio buttons and checkboxes -- checked (checked) #IMPLIED -- for radio buttons and check boxes -- disabled (disabled) #IMPLIED -- unavailable in this context -- readonly (readonly) #IMPLIED -- for text and passwd -- size CDATA #IMPLIED -- specific to each type of field -- maxlength NUMBER #IMPLIED -- max chars for text fields -- src %URI; #IMPLIED -- for fields with images -- alt CDATA #IMPLIED -- short description -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- tabindex NUMBER #IMPLIED -- position in tabbing order -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onselect %Script; #IMPLIED -- some text was selected -- onchange %Script; #IMPLIED -- the element value was changed -- accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- >3 Nếu người dùng đã chọn tệp (hình ảnh) thứ hai "file2. gif", tác nhân người dùng có thể xây dựng các phần như sau FormData có thể được sử dụng như thế nào?Đối tượng FormData cho phép bạn biên dịch một tập hợp các cặp khóa/giá trị để gửi bằng XMLHttpRequest . Nó chủ yếu được sử dụng để gửi dữ liệu biểu mẫu, nhưng có thể được sử dụng độc lập với biểu mẫu để truyền dữ liệu có khóa.
Làm cách nào để hiển thị FormData trong HTML?Thuộc tính formtarget chỉ định tên hoặc từ khóa cho biết vị trí hiển thị phản hồi nhận được sau khi gửi biểu mẫu . Thuộc tính formtarget ghi đè thuộc tính target của phần tử
Làm cách nào để lưu trữ dữ liệu từ một biểu mẫu trong HTML?Lưu trữ web HTML cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách. . cửa sổ. localStorage - lưu trữ dữ liệu không có ngày hết hạn cửa sổ. sessionStorage - lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi đóng tab trình duyệt) FormData trong HTML là gì?Giao diện FormData cung cấp một cách để dễ dàng xây dựng một tập hợp các cặp khóa/giá trị đại diện cho các trường biểu mẫu và giá trị của chúng , sau đó có thể . phương thức gửi(). Nó sử dụng cùng một định dạng mà một biểu mẫu sẽ sử dụng nếu loại mã hóa được đặt thành "multipart/form-data". |
