Mẫu html không mang lại lợi nhuận. Biểu mẫu trong HTML
Chúc một ngày tốt lành, những người hâm mộ phát triển web và những người muốn tạo trang web của riêng mình. Trước đó, tất cả các ấn phẩm của tôi đều dành cho những yếu tố cơ bản của ngôn ngữ, phương pháp sáng tạo các đồ vật khác nhau nội dung, định dạng, cấu trúc của chúng, v.v. Nắm vững các chủ đề trước, bạn đã có thể tạo một trang web khá tốt. Tuy nhiên, nó sẽ không đầy đủ nếu không có chủ đề hôm nay: “Tạo biểu mẫu trong html”.
Phần ngôn ngữ này rất quan trọng. Vì vậy hãy dành thời gian để nghiên cứu nó. Đặc biệt chú ý, nếu không tài nguyên web bạn đã tạo sẽ không được đưa vào sản xuất. Vì vậy, sau khi đọc bài viết, bạn sẽ biết bạn cần sử dụng biểu mẫu để làm gì, chúng được sử dụng để tạo những thẻ nào và bạn cũng có thể thử ví dụ cụ thể về thực hành. Bắt đầu nào!
Biểu mẫu là gì và nó hoạt động như thế nào?
Hình thức– đây là một trong những đối tượng quan trọng nhất, được thiết kế để trao đổi dữ liệu thông tin giữa máy chủ và người dùng.
Nói một cách đơn giản, nếu bạn muốn tạo một cửa hàng trực tuyến có khả năng đặt mua sản phẩm trên trang web, yêu cầu đăng ký trên tài nguyên web và làm việc với các tài khoản hoặc cung cấp cho khách hàng nhận xét với người quản lý công ty thì bạn không thể làm gì nếu không có biểu mẫu.
Biểu mẫu được chỉ định bằng cách sử dụng phần tử đặc biệt của ngôn ngữ html .
Lưu ý rằng tài liệu mã có thể chứa một số khai báo thẻ tuy nhiên, chỉ có thể gửi một yêu cầu đến máy chủ để xử lý dữ liệu. Đó là lý do tại sao thông tin mà người dùng nhập vào các trường được cung cấp cho việc này đề cập đến các hình thức khác nhau, không nên phụ thuộc. Ngoài ra, không được phép lồng các biểu mẫu này vào trong các biểu mẫu khác.
Đối với những người thiếu kiên nhẫn và mong muốn xem nhanh phần trình bày mã, tôi đã đính kèm một ví dụ đơn giản về cách sử dụng bảng có trường văn bản để lấy mật khẩu bằng một nút:
| 1 2 3 4 5 6 7 8 9 10 11 12 |
|
Hiện tại có thể vẫn chưa rõ cái gì và cách thức tương tác trong chương trình nhỏ này, nhưng tôi đảm bảo rằng sau khi đọc toàn bộ bài viết, bạn sẽ có thể tạo các ứng dụng phức tạp hơn nhiều.
Gửi dữ liệu đến phía máy chủ
Để gửi thông tin đã nhập (hoặc đã chọn) trong hộp thoại, bạn phải sử dụng cơ chế tiêu chuẩn - Nút gửi.
Mã cho một phương thức như vậy trông như thế này:
Khi bạn chạy dòng được trình bày, một nút sẽ xuất hiện với dòng chữ: “Gửi”.
Một cách khác để gửi dữ liệu đến phía máy chủ là nhấn phím Enter trong hộp thoại.
Sau khi xác nhận lô hàng thông tin quy định, nó không đến máy chủ ngay lập tức. Đầu tiên, nó được trình duyệt xử lý, dẫn đến dạng “name=value”.
Tham số thuộc tính chịu trách nhiệm về tên kiểu nhãn và đối với giá trị - dữ liệu do người dùng nhập. Tiếp theo, chuỗi đã chuyển đổi được chuyển đến trình xử lý, chuỗi này thường được chỉ định trong thuộc tính hoạt động yếu tố .
Bản thân tham số hành động là không bắt buộc và trong một số trường hợp, nó hoàn toàn không cần thiết. Ví dụ: nếu một trang web được viết bằng sử dụng php hoặc js thì quá trình xử lý sẽ diễn ra trên trang hiện tại và không cần liên kết.
Để hiểu rõ hơn về toàn cảnh hoạt động của trang web, tôi muốn nói thêm rằng trên máy chủ, dữ liệu được xử lý bằng các ngôn ngữ khác. Vì thế, ngôn ngữ phía máy chủđã xem xét: Python, php, các ngôn ngữ giống C (C#, C, v.v.), Java và các ngôn ngữ khác.
Bây giờ tôi xin dừng lại và nói thêm về nguyên tố . Nếu bạn giải thích bằng ngôn ngữ đơn giản, Cái đó cần thiết để tạo trường văn bản, nút radio, nút khác nhau, trường ẩn, hộp kiểm và các đối tượng khác.
Thẻ không cần phải được ghép nối với , tuy nhiên, nếu bạn cần xử lý hồ sơ người dùng hoặc nhập chúng, chẳng hạn như vào cơ sở dữ liệu, thì bạn không thể thực hiện nếu không có vùng chứa.
Các thuộc tính chính của thành phần ngôn ngữ này đánh dấu siêu văn bản là:
- Chữ– tạo một trường văn bản;
- Nộp– tạo nút để gửi dữ liệu đến máy chủ;
- Hình ảnh– chịu trách nhiệm về nút có hình ảnh;
- Cài lại– đặt nút để xóa biểu mẫu;
- Mật khẩu– đặt trường văn bản dành riêng cho mật khẩu;
- Hộp kiểm– chịu trách nhiệm về các trường có hộp kiểm;
- Đài– chịu trách nhiệm về các trường có lựa chọn một phần tử;
- Cái nút– tạo một nút;
- Ẩn giấu– được sử dụng cho các trường ẩn;
- Tài liệu– đặt trường chịu trách nhiệm gửi tập tin.
Phương thức truyền tải thông tin
Có 2 cách để chuyển dữ liệu người dùng về phía máy chủ: Lấy Và Bưu kiện. Các phương pháp này thực hiện cùng một hành động, nhưng chúng khác nhau đáng kể. Vì vậy, trước khi đề cập đến bất kỳ ai trong số họ, chúng ta hãy làm quen với các tính năng của chúng.
| Bưu kiện | Lấy | |
| Kích thước của tài liệu được truyền | Giới hạn ở phía máy chủ. | Tối đa – 4 KB. |
| Cách hiển thị thông tin đã gửi | Chỉ khả dụng khi được xem qua tiện ích mở rộng của trình duyệt hoặc các sản phẩm phần mềm đặc biệt khác. | Ngay lập tức có sẵn cho tất cả mọi người. |
| Sử dụng dấu trang | Không có cách nào để thêm vào dấu trang vì các yêu cầu không được lặp lại (tất cả các trang đều liên kết đến một địa chỉ). | Bất kỳ trang nào có yêu cầu đều có thể được lưu dưới dạng dấu trang và quay lại trang đó sau. |
| Bộ nhớ đệm | Dựa trên đoạn trước tất cả các yêu cầu trên một trang. | Mỗi trang có thể được lưu trữ riêng biệt. |
| Mục đích | Dùng để chuyển tiếp tập tin lớn(sách, hình ảnh, video, v.v.), tin nhắn, bình luận. | Tuyệt vời để tìm kiếm các giá trị được yêu cầu trên tài nguyên web hoặc để gửi tin nhắn văn bản ngắn. |
Để chỉ ra phương thức truyền dữ liệu nào trong hai phương thức truyền dữ liệu mà trình duyệt nên sử dụng, trong phần tử sử dụng tham số được cung cấp phương pháp(Ví dụ, phương thức="đăng").
Hãy xem ví dụ thứ hai. Hãy tạo một biểu mẫu trong đó bạn cần nhập dữ liệu cá nhân của mình (họ và tên, ngày sinh) và tạo mật khẩu. Sau đó, chúng tôi gửi tất cả những thứ này đến máy chủ bằng phương thức Bưu kiện.
Nhập thông tin cá nhân của bạn!
Ví dụ: để nhập ngày, có các công tắc cho số lượng của từng tham số (ngày, tháng và năm), cũng như bảng điều khiển thả xuống có lịch để thuận tiện.
Tạo bảng đăng ký
Các thẻ và thuộc tính cơ bản đã được đề cập. Đó là lý do tại sao đã đến lúc tạo một biểu mẫu đăng ký đầy đủ bằng phong cách đánh dấu css và kiểm tra dữ liệu đã nhập. Tất nhiên, chúng tôi sẽ không thể thấy máy chủ hoạt động với họ nhưng chúng tôi sẽ cung cấp thiết kế và các chi tiết quan trọng.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
Tôi khuyên bạn nên tiết kiệm mã này các chương trình trong tài liệu có phần mở rộng .html và mã hóa utf-8, đồng thời mở phần sau trong cửa sổ trình duyệt. Bạn sẽ thấy một bảng đăng ký lộng lẫy với các trường để nhập tên, họ, e-mail và mật khẩu lặp lại. Lưu ý rằng khi bạn khởi chạy trang, con trỏ sẽ được định vị ngay trong trường văn bản đầu tiên. Kỹ thuật này đạt được thông qua thuộc tính tự động lấy nét.
Bắt đầu điền vào các trường, giữ nguyên một trường và nhấp vào nút “Đăng ký”. Như bạn đã nhận thấy, biểu mẫu sẽ không được gửi vì mỗi phần tử < đầu vào> thuộc tính được chỉ định yêu cầu. Nó đặt các trường được đánh dấu là bắt buộc.
Một lần nữa điểm thú vị là một chỉ báo loại gõ="email", xuất hiện trong . Khi sử dụng loại trường này, thông tin đã nhập sẽ tự động được kiểm tra tính chính xác. Trong trường hợp có lỗi, biểu mẫu sẽ không được gửi đến máy chủ.
Vậy là việc xuất bản đã kết thúc. Trong đó tôi đã cố gắng thu thập số tiền tối đa kiến thức quan trọng và có liên quan về các hình thức. Tôi hy vọng nó hữu ích cho bạn! Tôi sẽ rất biết ơn nếu bạn gia nhập hàng ngũ những người đăng ký của tôi và kể cho bạn bè của bạn về blog.
Tạm biệt!
Trân trọng, Roman Chueshov
Đọc: 333 lần
Biểu mẫu HTML là một phần của tài liệu cho phép người dùng nhập thông tin quan tâm, sau đó có thể được chấp nhận và xử lý ở phía máy chủ. Nói cách khác, các biểu mẫu được sử dụng để thu thập thông tin do người dùng nhập vào.
Để xác định nhãn hiện tại thuộc về phần tử biểu mẫu nào, bạn phải sử dụng thuộc tính for của thẻ
Hãy xem một ví dụ về việc sử dụng:
Đúng
Trong ví dụ này, chúng tôi:
- Bên trong Đầu tiên các hình thức:
- Đã đăng hai nút radio ( ) để chọn một trong số lượng giới hạn tùy chọn. Một lần nữa lưu ý rằng đối với các nút radio có cùng dạng tên giống nhau phải được chỉ định, chúng tôi đã chỉ ra các giá trị khác nhau. Vì Đầu tiênđã kiểm tra, chỉ định rằng phần tử phải được chọn trước khi tải trang (trong trong trường hợp này nút radio có giá trị có ). Ngoài ra, chúng tôi đã chỉ định các thuộc tính chung cho các nút radio xác định định danh duy nhất cho phần tử.
- Đặt hai phần tử
- Bên trong thứ hai các hình thức:
- Đã đăng hai nút radio ( ) để chọn một trong số các tùy chọn có giới hạn. Vì thứ haiĐối với các nút radio, chúng tôi đã chỉ định thuộc tính đã kiểm tra, thuộc tính này cho biết rằng phần tử phải được chọn trước khi tải trang (trong trường hợp này là nút radio có giá trị no ). Ngoài ra, chúng tôi đã chỉ định các giá trị duy nhất cho các nút radio trong biểu mẫu và có cùng tên.
- Đặt hai phần tử
Trong trình duyệt, cả hai tùy chọn (phương pháp) để sử dụng nhãn văn bản đều giống nhau:
Chú giải công cụ cho các trường nhập
Hãy xem một ví dụ về việc sử dụng:
TRONG trong ví dụ này chúng tôi đã chỉ định cho phần tử với loại văn bản (trường văn bản một dòng) và loại mật khẩu (trường mật khẩu), lời nhắc văn bản cho người dùng (thuộc tính giữ chỗ) mô tả giá trị mong đợi cho đầu vào.
Kết quả của ví dụ của chúng tôi:
Câu hỏi và nhiệm vụ về chủ đề
Trước khi bạn bắt đầu học chủ đề tiếp theo thực hiện nhiệm vụ thực tế:
- Sử dụng kiến thức bạn đã thu được, hãy tạo mẫu đơn đặt hàng sau:
Lưu ý: trong các trường cần lựa chọn, bạn có thể chọn bằng cách nhấp vào văn bản chứ không chỉ vào chính phần tử đó.
Sau khi bạn hoàn thành bài tập, hãy kiểm tra mã trang bằng cách mở ví dụ trong một cửa sổ riêng để đảm bảo bạn đã làm đúng mọi thứ.
Nhãn (từ tiếng Anh hình thức- hình thức) cài đặt một biểu mẫu trên một trang web.
Biểu mẫu này nhằm mục đích trao đổi dữ liệu giữa người dùng và máy chủ. Phạm vi áp dụng của biểu mẫu không giới hạn trong việc gửi dữ liệu đến máy chủ; bằng cách sử dụng tập lệnh máy khách, bạn có thể truy cập bất kỳ thành phần nào của biểu mẫu, thay đổi và áp dụng nó theo ý mình.
Một tài liệu có thể chứa bất kỳ số lượng biểu mẫu nào, nhưng mỗi lần chỉ có thể gửi một biểu mẫu đến máy chủ. Vì lý do này, dữ liệu biểu mẫu phải độc lập với nhau.
Để gửi biểu mẫu đến máy chủ, hãy sử dụng nút Gửi, bạn có thể thực hiện điều tương tự bằng cách nhấn phím Enter trong biểu mẫu. Nếu nút Gửi bị thiếu trên biểu mẫu, Nhập phím bắt chước việc sử dụng nó.
Khi biểu mẫu được gửi đến máy chủ, việc kiểm soát dữ liệu sẽ được chuyển đến chương trình được chỉ định bởi thuộc tính yếu tố hành động
Thẻ đóng là bắt buộc.
WAI ARIA
Giá trị vai trò mặc định: hình thức
Giá trị vai trò hợp lệ:
- không có
- bài thuyết trình
- tìm kiếm
Thuộc tính
- Bộ ký tự chấp nhận - Đặt mã hóa trong đó máy chủ có thể chấp nhận và xử lý dữ liệu.
- hành động - Địa chỉ của chương trình hoặc tài liệu xử lý dữ liệu biểu mẫu.
- tự động hoàn thành - Cho phép tự động hoàn thành các trường biểu mẫu.
- enctype - Cách mã hóa dữ liệu biểu mẫu.
- phương thức - Phương thức giao thức HTTP.
- tên - Tên của biểu mẫu.
- novalidate - Hủy xác thực dữ liệu biểu mẫu tích hợp để đảm bảo tính chính xác của đầu vào.
- target - Tên của cửa sổ hoặc khung nơi trình xử lý sẽ tải kết quả trả về.
bộ ký tự chấp nhận
Đặt mã hóa trong đó máy chủ có thể chấp nhận và xử lý dữ liệu biểu mẫu.
Cú pháp
Giá trị
Tên mã hóa, ví dụ Windows-1251, UTF-8, v.v.
Giá trị mặc định
Bộ mã hóa cho trang.
hoạt động
Chỉ định trình xử lý mà dữ liệu biểu mẫu được truy cập khi nó được gửi đến máy chủ. Có thể đóng vai trò là người xử lý chương trình máy chủ hoặc một tài liệu HTML bao gồm các tập lệnh phía máy chủ (ví dụ: Trình phân tích cú pháp). Sau khi trình xử lý thực hiện các hành động trên dữ liệu biểu mẫu, nó sẽ trả về một tài liệu HTML mới.
Nếu như thuộc tính hành động vắng mặt, trang hiện tại tải lại, trả lại tất cả các thành phần của biểu mẫu về giá trị mặc định của chúng.
Cú pháp
Giá trị
Giá trị được lấy là đầy đủ hoặc đường dẫn tương đối vào tập tin máy chủ.
Giá trị mặc định
tự động hoàn thành
Kiểm soát việc tự động điền các trường biểu mẫu. Giá trị có thể được ghi đè bằng thuộc tính tự động hoàn thành trên các thành phần biểu mẫu cụ thể.
Tính năng tự động điền được thực hiện bởi trình duyệt, trình duyệt này sẽ ghi nhớ các giá trị được ghi vào lần đầu tiên bạn nhập và sau đó thay thế chúng khi bạn nhập lại vào các trường biểu mẫu. Trong trường hợp này, tính năng tự động hoàn thành có thể bị tắt trong cài đặt trình duyệt và không thể thay đổi trong trường hợp này bằng thuộc tính tự động hoàn thành.
Khi bạn nhập các chữ cái đầu tiên của văn bản, một danh sách các giá trị đã lưu trước đó sẽ hiển thị, từ đó bạn có thể chọn những gì mình cần.
Cú pháp
Giá trị
- bật - Bật tính năng tự động điền biểu mẫu.
- tắt - Tắt tính năng tự động điền. Giá trị này thường được sử dụng để ngăn trình duyệt lưu dữ liệu quan trọng (mật khẩu, số thẻ ngân hàng), cũng như dữ liệu hiếm khi được nhập hoặc dữ liệu duy nhất (hình ảnh xác thực).
Giá trị mặc định
kiểu mã hóa
Xác định cách mã hóa dữ liệu biểu mẫu khi nó được gửi đến máy chủ. Thông thường không cần thiết lập thuộc tính enctype, dữ liệu được hiểu khá chính xác ở phía máy chủ. Tuy nhiên, nếu bạn đang sử dụng trường gửi tệp (loại đầu vào="file"), bạn nên xác định thuộc tính enctype là multipart/form-data .
Cú pháp
Giá trị
- application/x-www-form-urlencoded - Thay vì dấu cách, hãy đặt + , các ký hiệu như chữ cái tiếng Nga được chúng mã hóa giá trị thập lục phân(ví dụ: %D0%90%D0%BD%D1%8F thay vì Anya).
- multipart/form-data - Dữ liệu không được mã hóa. Giá trị này được sử dụng khi gửi tập tin.
- text/plain - Dấu cách được thay thế bằng dấu +, các chữ cái và ký tự khác không được mã hóa.
Giá trị mặc định
ứng dụng/x-www-form-urlencoded
phương pháp
Thuộc tính phương thức cho máy chủ biết về phương thức yêu cầu.
Cú pháp
Giá trị
Giá trị của thuộc tính phương thức không phân biệt chữ hoa chữ thường. Có hai phương pháp - nhận và đăng.
- get - Phương pháp này là một trong những phương pháp phổ biến nhất và được thiết kế để lấy thông tin cần thiết và truyền dữ liệu tới thanh địa chỉ. Các cặp tên=giá trị sau đó được thêm vào địa chỉ sau dấu chấm hỏi và được phân tách bằng dấu và (ký hiệu). Sự tiện lợi của việc sử dụng phương thức get là địa chỉ có tất cả các tham số có thể được sử dụng nhiều lần, chẳng hạn như lưu nó vào dấu trang trình duyệt của bạn và bạn cũng có thể thay đổi các giá trị tham số trực tiếp trên thanh địa chỉ.
- post - Phương thức post gửi dữ liệu đến máy chủ theo yêu cầu của trình duyệt. Điều này cho phép bạn gửi số lượng lớn data hơn mức có sẵn cho phương thức get, vì bài đăng không có giới hạn 4 KB. Một lượng lớn dữ liệu được sử dụng trong các diễn đàn, dịch vụ thư, điền vào cơ sở dữ liệu, gửi tệp, v.v.
Giá trị mặc định
tên
Định nghĩa tên duy nhất các hình thức. Thông thường, tên của biểu mẫu được sử dụng để truy cập các phần tử của nó thông qua các tập lệnh.
Cú pháp
Giá trị
Tên là một tập hợp các ký tự bao gồm số và chữ cái. JavaScript phân biệt chữ hoa chữ thường, vì vậy khi truy cập biểu mẫu theo tên thông qua tập lệnh, hãy sử dụng cách viết giống như thuộc tính tên.
Giá trị mặc định
xác nhận mới
Hủy xác minh tính chính xác của dữ liệu được người dùng nhập vào biểu mẫu được tích hợp sẵn. Việc kiểm tra này được trình duyệt thực hiện tự động khi biểu mẫu được gửi đến máy chủ và xảy ra đối với các trường , , cũng như liệu có mẫu hoặc thuộc tính bắt buộc hay không.
Cú pháp
Giá trị
Giá trị mặc định
Theo mặc định thuộc tính này bị vô hiệu hóa.
mục tiêu
Sau khi trình xử lý biểu mẫu nhận được dữ liệu, nó sẽ trả về kết quả dưới dạng tài liệu HTML. Bạn có thể xác định khung mà trang web kết quả sẽ tải vào. Với mục đích này nó được sử dụng thuộc tính mục tiêu, giá trị của nó là tên của khung. Nếu mục tiêu không được đặt, kết quả trả về sẽ được hiển thị trong tab hiện tại.
Cú pháp
Giá trị
Giá trị là tên của khung được chỉ định bởi thuộc tính tên của phần tử