Biểu mẫu HTML [Biểu mẫu web] cho phép người dùng web tương tác với máy chủ. Biểu mẫu HTML chứa các thành phần đầu vào [hoặc trường, điều khiển, tiện ích con], chẳng hạn như trường văn bản, hộp kiểm và nút. Các trường đầu vào này cho phép người dùng web cung cấp dữ liệu [được gọi là tham số yêu cầu hoặc chuỗi truy vấn] cho máy chủ web. Tại máy chủ web, chương trình phía máy chủ thu thập những dữ liệu này và trả về phản hồi động dựa trên thông tin đầu vào được gửi
Biểu mẫu HTML theo ví dụ
VÍ DỤ 1. Cấu trúc cơ bản
Basic HTML Form Structure
Username
Password
- Một biểu mẫu HTML được đính kèm trong các thẻ
Contact Details Name
2. Thuộc tính
Telephone
Email
Contact Details Name
3 cung cấp URL mà biểu mẫu này sẽ được gửi. Thuộc tính
Telephone
Email
Contact Details Name
4 chỉ định phương thức HTTP [GET hoặc POST] sẽ được sử dụng để gửi
Telephone
Email
- Có 2 yếu tố đầu vào trong mẫu này
Contact Details Name
5. một trường văn bản để người dùng nhập dữ liệu
Telephone
Email
Contact Details Name
5. để nhập mật khẩu - hiển thị dưới dạng * trên màn hình
Telephone
Email
Contact Details Name
5 để dán nhãn cho mỗi
Telephone
Email
Contact Details Name
5. Bạn có thể khớp thuộc tính
Telephone
Email
Contact Details Name
9 của
Telephone
Email
Contact Details Name
5 với thuộc tính
Telephone
Email
Contact Details Name
01 của phần tử
Telephone
Email
Contact Details Name
5 để được gắn nhãn [như trong
Telephone
Email
Contact Details Name
5 đầu tiên]; .
Telephone
Email
Contact Details Name
5 cải thiện khả năng sử dụng cho người dùng chuột. Khi bạn nhấp vào
Telephone
Email
Contact Details Name
5, phần tử có nhãn
Telephone
Email
Contact Details Name
5 được chọn
Telephone
Email
- Có 2 nút ở dạng này
Contact Details Name
5. Cái gọi là nút Gửi. Nhấp vào nút gửi sẽ gửi dữ liệu đến URL
Telephone
Email
Contact Details Name
3
Telephone
Email
Contact Details Name
5. Nút đặt lại, xóa tất cả các trường nhập
Telephone
Email
Contact Details Name
23 của nút xuất hiện dưới dạng nhãn của nút
Telephone
Email
- Khi người dùng gửi biểu mẫu, trình duyệt sẽ thu thập các tham số yêu cầu từ các phần tử đầu vào, dưới dạng các cặp
Contact Details Name
24.
Telephone
Email
Contact Details Name
25 tương ứng với thuộc tính
Telephone
Email
Contact Details Name
25 của các phần tử
Telephone
Email
Contact Details Name
5; . Trong ví dụ này, có hai bộ cặp
Telephone
Email
Contact Details Name
24 -
Telephone
Email
Contact Details Name
90 và
Telephone
Email
Contact Details Name
91. Các tham số yêu cầu được kết hợp với nhau thông qua dấu hiệu ________ 292, trong. e. ,
Telephone
Email
Contact Details Name
93, để tạo thành cái gọi là chuỗi truy vấn. Chuỗi truy vấn sau đó được thêm vào phía sau URL hành động thông qua ký hiệu
Telephone
Email
Contact Details Name
94, tôi. e. ,
Telephone
Email
Contact Details Name
95. Vì URL không chấp nhận các ký tự đặc biệt nên chúng được mã hóa dưới dạng
Telephone
Email
Contact Details Name
96 [được gọi là mã hóa URL], trong đó hh là mã ASCII ở dạng thập lục phân, e. g. ,
Telephone
Email
Contact Details Name
97 được mã hóa thành
Telephone
Email
Contact Details Name
98; . Không gian có thể được mã hóa thành
Telephone
Email
Contact Details Name
91 hoặc
Telephone
Email
Contact Details Name
92 để đơn giản
Telephone
Email
- Hãy thử gửi biểu mẫu. Quan sát các tham số yêu cầu trong URL đã gửi. Bạn sẽ gặp lỗi 404 vì bạn chưa viết chương trình xử lý phía máy chủ "
Contact Details Name
93"
Telephone
Email
- Chương trình phía máy chủ nhận chuỗi truy vấn; . g. , truy vấn cơ sở dữ liệu]. Sau đó, nó trả về một phản hồi thích hợp cho khách hàng. Tôi sẽ không đề cập đến lập trình phía máy chủ trong bài viết này. Đọc các kỹ thuật lập trình phía máy chủ tương ứng như PHP, Java Servlet, JSP, v.v.
VÍ DỤ 2. Nhiều điều khiển hơn và xác thực đầu vào
Contact Details Name3
Telephone
- Chúng tôi có thể nhóm một tập hợp các trường đầu vào có liên quan vào và cung cấp một
Contact Details Name
5 mô tả. Các trường nhập sẽ được đặt trong một hộp, với chú giải được hiển thị ở đường viền trên cùng.
Telephone
Email
- Trong
Contact Details Name
5 [Dòng 14], thuộc tính
Telephone
Email
Contact Details Name
96 được thêm vào để yêu cầu trình duyệt xác thực rằng trường này không trống. Trình duyệt sẽ hiển thị thông báo lỗi và sẽ không gửi biểu mẫu nếu trường này trống. Thuộc tính này
Telephone
Email
Contact Details Name
96 được gọi là thuộc tính boolean, vì nó không có giá trị
Telephone
Email
- Trong
Contact Details Name
5 [Dòng 16], ngoài thuộc tính
Telephone
Email
Contact Details Name
96, thuộc tính
Telephone
Email
Contact Details Name
00 yêu cầu trình duyệt thực hiện "So khớp mẫu biểu thức chính quy", trong trường hợp này là 4 ký tự trở lên
Telephone
Email
- Các nút radio [có thể chọn nhiều nhất một nút] được đánh dấu bằng
Contact Details Name
5's. Mỗi
Telephone
Email
Contact Details Name
5 có liên kết với nó
Telephone
Email
Contact Details Name
5. Chúng tôi thường sử dụng cùng một thuộc tính
Telephone
Email
Contact Details Name
25 cho tất cả các nút và chỉ định các
Telephone
Email
Contact Details Name
23 khác nhau cho mỗi nút. Bạn có thể đặt
Telephone
Email
Contact Details Name
96 trên bất kỳ nút nào để yêu cầu trình duyệt xác thực rằng nút đó đã được chọn
Telephone
Email
- Các hộp kiểm [có thể chọn 0 hoặc nhiều hộp] được đánh dấu bằng
Contact Details Name
5. Chúng tôi đã thêm thuộc tính
Telephone
Email
Contact Details Name
08 vào một trong các hộp để đặt trạng thái ban đầu của nó. Thuộc tính
Telephone
Email
Contact Details Name
08 được áp dụng cho các hộp kiểm, cũng như các nút radio
Telephone
Email
- Menu kéo xuống được xác định thông qua một
Contact Details Name
00, và một
Telephone
Email
Contact Details Name
23 khác trong
Telephone
Email
Contact Details Name
5. Chúng ta cũng có thể đánh dấu phần tử được chọn thông qua thuộc tính
Telephone
Email
Contact Details Name
03 trong
Telephone
Email
Contact Details Name
5
Telephone
Email
- Textarea [trường văn bản nhập nhiều dòng] được đánh dấu qua
Contact Details Name
5. Thuộc tính
Telephone
Email
Contact Details Name
06 được áp dụng cho tất cả các trường văn bản đầu vào, hiển thị gợi ý trong trường đầu vào trước khi người dùng nhập giá trị. Thuộc tính
Telephone
Email
Contact Details Name
07 yêu cầu trình duyệt giới hạn độ dài của đầu vào
Telephone
Email
- Hãy thử gửi biểu mẫu. Quan sát các tham số yêu cầu trong URL đã gửi
VÍ DỤ 3. Kiểm soát và xác thực đầu vào HTML5
Xem các ví dụ bên dưới
[TODO] ví dụ toàn diện
Cú pháp của biểu mẫu HTML
Phần tử và thuộc tínhContact Details Name3 của nó
Telephone
Một biểu mẫu HTML được bao quanh bởi một phần tử. Thuộc tính
Contact Details Name3 chỉ định URL mà biểu mẫu web này sẽ được gửi, mặc định là trang hiện tại. Thuộc tính
Telephone
Contact Details Name4 chỉ định phương thức HTTP được sử dụng để gửi, tôi. e. ,
Telephone
Contact Details Name301 hoặc
Telephone
Contact Details Name302 [với mặc định là
Telephone
Contact Details Name301]
Telephone
Contact Details Name4
Telephone
Các trường nhập [hoặc điều khiển, widget] được đặt bên trong
.Nhóm các trường đầu vào. Các yếu tố vàContact Details Name5
Telephone
Một biểu mẫu web được thiết kế tốt sẽ sử dụng
để nhóm các trường đầu vào thành các bộ, với mộtContact Details Name5 để cung cấp chú giải mô tả cho bộ trường. Ví dụ,
Telephone
Contact Details NameDán nhãn
Telephone
Contact Details Name5 trường. Phần tử
Telephone
Contact Details Name5
Telephone
Mỗi trường
Contact Details Name5 thường được liên kết với một
Telephone
Contact Details Name5 để gắn nhãn trường đầu vào. Bạn có thể liên kết phần tử
Telephone
Contact Details Name5 với nhãn bằng cách
Telephone
Contact Details Name
5 làm trình bao bọc. đặt phần tử
Telephone
Email
Contact Details Name
5 trong các thẻ
Telephone
Email
Contact Details Name
313
Telephone
Email
Contact Details Name
5 làm tài liệu tham khảo. khớp thuộc tính "_______19" của phần tử
Telephone
Email
Contact Details Name
5 với thuộc tính "
Telephone
Email
Contact Details Name
01" của phần tử đầu vào
Telephone
Email
Nhãn không có bất kỳ hiệu ứng hình ảnh nào. Nhưng nếu bạn nhấp vào nhãn, trường nhập liệu liên quan sẽ được chọn
Kiểm soát đầu vàoCác trường đầu vào được đánh dấu bằng
Contact Details Name5,
Telephone
Contact Details Name42
Telephone
Contact Details
Name
Telephone
Email
324
Telephone
Contact Details Name325,
Telephone
Contact Details Name326]. chỉ ra rằng giá trị này được chọn theo mặc định
Telephone
Contact Details Name327]. chỉ ra rằng đầu vào này không thể chỉnh sửa
Telephone
Contact Details Name327]. chỉ định số lượng ký tự để hiển thị
Telephone
Contact Details Name329,
Telephone
Contact Details Name330] [HTML5]. cho biết nhiều giá trị có thể được thông qua
Telephone
Contact Details Name327] [HTML5]. cung cấp gợi ý về những gì nên được nhập
Telephone
Contact Details Name327] [HTML5]. cho biết liệu trình duyệt có tự động hoàn thành trường này hay không
Telephone
Contact Details Name333,
Telephone
Contact Details Name323] [HTML5]
Telephone
Nhiều thuộc tính trên [chẳng hạn như
Contact Details Name335,
Telephone
Contact Details Name08,
Telephone
Contact Details Name337] được gọi là thuộc tính boolean. Tức là bạn không phải chỉ định giá trị của nó trong thẻ bắt đầu HTML. Sự hiện diện của thuộc tính boolean trên một phần tử đại diện cho giá trị thực
Telephone
Sự kiện HTML
Mô tả sự kiệnonsubmit, onresetBật khi biểu mẫu được gửi/đặt lại [thường thông qua các nút gửi/đặt lại]bật xanh, bật tiêu điểmBật khi phần tử mất/lấy tiêu điểminputMột phần tử nhận đầu vào của người dùngonchangeGiá trị của phần tử được thay đổioncontextmenuKhi menu ngữ cảnh được kích hoạtkhông hợp lệKhi một phần tử không hợp lệchọnKhi một số văn bản . onkeyup, onkeydown, onkeypressKhi một phím được nhấn lên, xuống hoặc nhấn [lên + xuống]Các tính năng mới của biểu mẫu web HTML5
Thêm gợi ý cho các trường văn bản đầu vào thông qua thuộc tínhContact Details Name06
Telephone
Bạn có thể sử dụng thuộc tính
Contact Details Name06 để cung cấp gợi ý cho đầu vào. Gợi ý này sẽ được hiển thị bằng hình mờ màu xám nhạt và biến mất khi người dùng nhấp vào trường. Ví dụ,
Telephone
Contact Details Name0
Telephone
Trình giữ chỗ nên được sử dụng để làm rõ sự mơ hồ bằng cách cung cấp các ví dụ, thay vì nhãn khác
Contact Details Name341
Telephone
Bạn có thể thêm thuộc tính
Contact Details Name341 [không có giá trị] vào phần tử được cho là nhận tiêu điểm khi tải trangXác thực đầu vào HTML5
Telephone
HTML5 đã triển khai xác thực phía máy khách trên các trường đầu vào
- bắt buộc, độ dài tối thiểu, độ dài tối đa. Bạn có thể thêm thuộc tính
Contact Details Name
96 [không có giá trị] để báo hiệu cho trình duyệt rằng trường đó bắt buộc phải nhập dữ liệu không trống. Trình duyệt sẽ bật lên thông báo lỗi nếu giá trị trống được gửi cho trường đó. Tương tự, bạn có thể sử dụng ________ 4344 và/hoặc ________ 607 để chỉ định số lượng ký tự tối thiểu và/hoặc tối đa được nhập vào
Telephone
Email
- novalidate, formnovalidate. Để tắt xác thực [e. g. , để kiểm tra xác thực phía máy chủ], hãy thêm thuộc tính
Contact Details Name
346 vào phần tử;
Telephone
Email
- mẫu = "regex". Bạn cũng có thể khớp giá trị đầu vào với biểu thức chính quy [regex] thông qua thuộc tính
Contact Details Name
348. Xem bài viết "Biểu thức chính quy" về cách sử dụng biểu thức chính quy để khớp
Telephone
Email
- gõ = "email. url" được xác thực. Nếu
Contact Details Name
96 không được đặt, đầu vào trống sẽ được chấp nhận
Telephone
Email
Ví dụ. Hãy thử các điều khiển đầu vào sau
Contact Details Name43
Telephone
Contact Details Name44
Telephone
Contact Details Name45
Telephone
Contact Details Name46
Telephone
Contact Details
Name
Telephone
Email
43CSS được tạo là
Contact Details
Name
Telephone
Email
44Trang HTML thử nghiệm là
Contact Details
Name
Telephone
Email
45Làm thế nào nó hoạt động?[LÀM]
ít cơ bản hơn
Contact Details
Name
Telephone
Email
450Bạn có thể sử dụng lệnh
Contact Details
Name
Telephone
Email
450 để bao gồm các tập lệnh hoặc tệp CSS khác ít hơnVí dụ: tệp less chính của Bootstrap "
Contact Details
Name
Telephone
Email
06" chỉ bao gồm các câu lệnh
Contact Details
Name
Telephone
Email
450, có thể dễ dàng tùy chỉnh để chọn các thành phần mong muốnBình luận.
Contact Details
Name
Telephone
Email
08 và
Contact Details
Name
Telephone
Email
09Ít hỗ trợ cả chú thích nhiều dòng
Contact Details
Name
Telephone
Email
08 và chú thích cuối dòng
Contact Details
Name
Telephone
Email
09. [CSS chỉ hỗ trợ chú thích nhiều dòng
Contact Details
Name
Telephone
Email
08, nhưng KHÔNG hỗ trợ chú thích cuối dòng
Contact Details
Name
Telephone
Email
09. ]Nhận xét nhiều dòng
Contact Details
Name
Telephone
Email
08 hiển thị trong CSS đã biên dịch;
Biến.
Contact Details
Name
Telephone
Email
492Một biến ít hơn có tiền tố là dấu hiệu
Contact Details
Name
Telephone
Email
491, ở dạng
Contact Details
Name
Telephone
Email
492Ví dụ: trong "
Contact Details
Name
Telephone
Email
19" và "
Contact Details
Name
Telephone
Email
20" của Bootstrapghi chú
- Bạn không thể gán lại giá trị cho một biến ít hơn. Một biến thực sự là một hằng số ít hơn và chỉ có thể được xác định một lần
- Các biến được tải chậm. Nghĩa là, bạn có thể đặt một khai báo biến sau khi nó được tham chiếu
- Bạn có thể sử dụng
Contact Details
Name
Telephone
Email
21, trong đó
Contact Details
Name
Telephone
Email
22 giữ một tên biến
các loạiBạn có thể sử dụng các hàm kiểu có sẵn để kiểm tra kiểu của một biến. Có
- isnumber[giá trị]. Trả về boolean
Contact Details
Name
Telephone
Email
23 hoặc
Contact Details
Name
Telephone
Email
24 - tỷ lệ phần trăm [giá trị]
- chuỗi [giá trị]
- iscolor[giá trị]
- isunit[giá trị, đơn vị]
- ispixel[giá trị]
- isem[giá trị]
- isurl[giá trị]
- isruleset[giá trị]
- iskeyword[giá trị]
Ví dụ như,
Contact Details
Name
Telephone
Email
46Một biến cũng có thể nhận một bộ quy tắc. Ví dụ,
Contact Details
Name
Telephone
Email
47Biến nội suy
Contact Details
Name
Telephone
Email
25Để sử dụng một biến trong bộ chọn hoặc tên thuộc tính [trên LHS], URL hoặc tên tệp @import [trong chuỗi được trích dẫn trên RHS], bạn cần nội suy biến ở dạng
Contact Details
Name
Telephone
Email
25. Ví dụ,Rõ ràng, dấu ngoặc nhọn
Contact Details
Name
Telephone
Email
27 là cần thiết làm dấu phân cách để nội suy bên trong chuỗi được trích dẫnhỗn hợpMixin là một cách bao gồm ["trộn lẫn"] một tập hợp các thuộc tính từ quy tắc này sang quy tắc khác
Ví dụ: trong "
Contact Details
Name
Telephone
Email
28" và "
Contact Details
Name
Telephone
Email
29" của Bootstrap- Mixins tương tự như các biến. Nhưng thay vì giữ một giá trị, nó giữ một tập hợp các thuộc tính
- Mixin có thể lấy đối số và hoạt động giống như hàm. Nhiều đối số được phân tách bằng dấu chấm phẩy hoặc dấu phẩy, nhưng nên dùng dấu chấm phẩy vì dấu phẩy có ý nghĩa khác [dấu tách danh sách CSS]
- Đối số của Mixin có thể nhận giá trị mặc định, ở dạng
Contact Details
Name
Telephone
Email
30 - Mixin kết thúc bằng dấu ngoặc đơn [e. g. ,
Contact Details
Name
Telephone
Email
31] sẽ không được xuất ra trong CSS - Khi gọi các mixin, dấu ngoặc đơn là tùy chọn nếu không có đối số được yêu cầu
- Khi gọi mixin, bạn cũng có thể truyền tham số theo tên, thay vì thông qua vị trí. Ví dụ,
Bạn cũng có thể kết hợp bộ chọn lớp thông thường và bộ chọn ID. Ví dụ,
Bộ chọn lồng nhauQuy tắc ít hơn có thể được lồng vào nhau;
Ví dụ, các quy tắc ít hơn sau đây
sẽ được mở thành các quy tắc CSS sau
Bên trong quy tắc less lồng nhau, bạn có thể sử dụng
Contact Details
Name
Telephone
Email
92 để chỉ cấp độ gốc. Bộ chọn cha mẹ
Contact Details
Name
Telephone
Email
92 thường được sử dụng với lớp giả, chẳng hạn như
Contact Details
Name
Telephone
Email
34 và
Contact Details
Name
Telephone
Email
35, như trong ví dụ trênCác bộ chọn lồng nhau phản ánh tốt hơn cấu trúc phân cấp của tài liệu HTML, do đó, chúng được khuyến nghị
Mixin với bộ chọnMixin có thể chứa các thuộc tính CSS [như trong các ví dụ trên]. Chúng cũng có thể chứa các bộ chọn lồng nhau. Ví dụ như,
sẽ được biên dịch thành CSS
Contact Details
Name
Telephone
Email
48không gian tênsẽ được tổng hợp thành
Contact Details
Name
Telephone
Email
49Bạn có thể sử dụng kỹ thuật trên để tạo không gian tên
Chỉ thị lồng nhauChỉ thị như
Contact Details
Name
Telephone
Email
451 cũng có thể được lồng vào nhau như bộ chọn. Không giống như bộ chọn thông thường, sẽ có bong bóng lên đến cấp cao nhất trong CSS được tạoVí dụ
Contact Details
Name
Telephone
Email
0sẽ được biên dịch thành CSS sau, trong đó chỉ thị
Contact Details
Name
Telephone
Email
451 đang nổi lên ở cấp cao nhất
Contact Details
Name
Telephone
Email
1Các phép tính toán họcBạn có thể áp dụng các toán tử số học, chẳng hạn như ________ 392, ________ 7496, ________ 7497 và ________ 7498 cho các số và phép đo số
Làm cách nào để nhắm mục tiêu văn bản loại đầu vào bằng CSS?
Nếu bạn chỉ muốn tạo kiểu cho một loại đầu vào cụ thể, bạn có thể sử dụng bộ chọn thuộc tính. . input[type=text] - sẽ chỉ chọn các trường văn bản input[type=password] - sẽ chỉ chọn các trường mật khẩu đầu vào [loại = số] - sẽ chỉ chọn các trường số
Văn bản kiểu đầu vào là gì?
The xác định trường văn bản một dòng . Chiều rộng mặc định của trường văn bản là 20 ký tự. Mẹo. Luôn thêm thẻ
Loại đầu vào trong CSS là gì?
Bộ chọn thuộc tính CSS chọn các loại đầu vào CSS cụ thể để tạo kiểu. input[type=text] - chọn các trường biểu mẫu chấp nhận văn bản . input[type=password] - chọn các trường biểu mẫu chấp nhận mật khẩu. đầu vào [loại = số] - chọn các trường biểu mẫu chấp nhận số. vân vân.
Giá trị văn bản loại đầu vào là gì?
Thuộc tính giá trị Văn bản đầu vào trong HTML DOM được sử dụng để đặt hoặc trả về giá trị của thuộc tính giá trị của trường nhập liệu. Thuộc tính value chỉ định giá trị ban đầu của Trường văn bản đầu vào . Nó chứa giá trị mặc định hoặc người dùng gõ.