programming python

Biểu mẫu python và html

Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "chộp lấy" một đối tượng và kéo nó đến một vị trí khác

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ Kéo và Thả đầy đủ

APIDrag và Drop4. 09. 03. 56. 012. 0

Ví dụ Kéo và Thả HTML

Ví dụ dưới đây là một ví dụ kéo và thả đơn giản

Thí dụ

Tự mình thử »

Nó có vẻ phức tạp, nhưng chúng ta hãy đi qua tất cả các phần khác nhau của sự kiện kéo và thả

Tạo một phần tử có thể kéo được

Đầu tiên. Để làm cho một phần tử có thể kéo được, hãy đặt thuộc tính draggable thành true

Kéo cái gì - ondragstart và setData[]

Sau đó, chỉ định điều gì sẽ xảy ra khi phần tử được kéo

Trong ví dụ trên, thuộc tính ondragstart gọi một hàm, kéo[sự kiện], chỉ định dữ liệu nào sẽ được kéo

Phương thức dataTransfer.setData[] đặt kiểu dữ liệu và giá trị của dữ liệu được kéo

chức năng kéo [ev] {
ev. truyền dữ liệu. setData["văn bản", ev. Mục tiêu. Tôi];
}

Trong trường hợp này, kiểu dữ liệu là "văn bản" và giá trị là id của phần tử có thể kéo được ["drag1"]

Thả ở đâu - ondragover

Sự kiện ondragover chỉ định nơi dữ liệu được kéo có thể bị xóa

Theo mặc định, không thể bỏ dữ liệu/phần tử vào các phần tử khác. Để cho phép giảm, chúng ta phải ngăn việc xử lý phần tử mặc định

Tìm hiểu từ hơn 300 ví dụ. Với trình chỉnh sửa của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả

Chuyển đến ví dụ về CSS

Sử dụng thực đơn

Chúng tôi khuyên bạn nên đọc hướng dẫn này, theo trình tự được liệt kê trong menu

Nếu bạn có màn hình lớn, menu sẽ luôn ở bên trái

Nếu bạn có màn hình nhỏ, hãy mở menu bằng cách nhấp vào ký hiệu menu trên cùng ☰

Mẫu CSS

Chúng tôi đã tạo một số W3 đáp ứng. Các mẫu CSS để bạn sử dụng

Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng chúng trong tất cả các dự án của mình

Mẫu CSS miễn phí

bài tập css

Kiểm tra bản thân với các bài tập

Câu đố về CSS

Kiểm tra kỹ năng CSS của bạn bằng một bài kiểm tra

Bắt đầu bài kiểm tra CSS

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning

Tài liệu tham khảo CSS

Tại W3Schools, bạn sẽ tìm thấy các tham chiếu CSS hoàn chỉnh của tất cả các thuộc tính và bộ chọn với cú pháp, ví dụ, hỗ trợ trình duyệt, v.v.

Trong phần này, chúng ta sẽ cùng tìm hiểu về khái niệm Web Form và cách sử dụng Web Form trong Flask

Để giúp các bạn dễ theo dõi, sau đây là danh sách các bài viết trong chuỗi bài hướng dẫn này

Phần 1. Chào thế giới
Phần 2. Tìm hiểu về mẫu
Phần 3. Tìm hiểu về Web Forms [bài viết này]
Phần 4. Sử dụng cơ sở dữ liệu
Phần 5. Xử lý đăng nhập
Phần 6. Hồ sơ cá nhân và ảnh đại diện
Phần 7. Xử lý lỗi
Phần 8. Tạo chức năng theo dõi
Phần 9. Partition
Phần 10. email hỗ trợ
Phần 11. Nâng cấp giao diện
Phần 12. Xử lý thời gian
Phần 13. Hỗ trợ đa ngôn ngữ
Phần 14. Sử dụng Ajax
Phần 15. Tinh chỉnh cấu trúc ứng dụng
Phần 16. Hỗ trợ tìm kiếm hỗ trợ
Phần 17. Triển khai ứng dụng trên Linux
Phần 18. Triển khai ứng dụng với Heroku
Phần 19. Triển khai ứng dụng với Docker
Phần 20. JavaScript nâng cao
Phần 21. Thông báo cho người sử dụng
Phần 22. Tìm hiểu về nhiệm vụ nền
Phần 23. Xây dựng API

Bạn có thể truy cập mã nguồn cho phần này tại GitHub

Trong Phần 2, chúng tôi đã tạo ra một mẫu đơn giản cho trang chủ của ứng dụng và sử dụng các đối tượng giả lập cho các thành phần mà chúng tôi chưa xây dựng như đối tượng người dùng, bài viết. Trong chương trình này, chúng ta sẽ tìm hiểu kỹ hơn về các điểm yếu của ứng dụng cho đến thời điểm này, đặt biệt là vấn đề tiếp nhận và xử lý các yêu cầu của người sử dụng xử lý thông tin qua biểu mẫu Web

Một cách tổng hợp, Web form [đừng nhầm lẫn với khái niệm Web form trong các ứng dụng ASP/ASP. NET truyền thống nhé, chúng không liên quan gì đến nhau mặc dù có cùng tên gọi] là một trong những thành phần cơ bản của bất kỳ ứng dụng Web nào. Chúng ta sẽ sử dụng biểu mẫu Web để người sử dụng có thể gửi dữ liệu như bài viết, thông tin đăng nhập từ trình duyệt đến ứng dụng của chúng ta

Trước khi bắt đầu phần mới, hãy đảm bảo rằng ứng dụng myblog mà chúng tôi đã xây dựng đã được thiết lập và chạy thành công

Flask-WTF giới thiệu

Để xử lý Web form trong ứng dụng, chúng ta sẽ sử dụng thư viện mở rộng [extension] Flask-WTF. Đây là một giao diện cho gói WTForms được tích hợp với Flask. Đây là thư viện mở rộng đầu tiên mà chúng tôi sử dụng, nhưng sẽ không phải là cuối cùng. Các thư viện mở rộng là một thành phần quan trọng trong hệ sinh thái của Flask bởi vì họ cung cấp các giải pháp mà Flask không có [dù là cố tình hay vô ý]

Các thư viện mở rộng của Flask là các gói thư viện Python tiêu chuẩn được cài đặt bằng cách sử dụng pip. Bạn có thể cài đặt Flask-WTF trong môi trường ảo của bạn như sau

[myenv] $ pip3 install flask-wtf

Config setting

Cho đến thời điểm này, ứng dụng của chúng ta vẫn còn rất sơ khai, và do đó, chúng ta không cần phải đề cập đến nhiều vấn đề về cấu hình [configuration]. Nhưng đối với bất kỳ ứng dụng nào ngoại trừ các ứng dụng rất đơn giản, chúng ta sẽ thấy rằng Flask [và có thể bao gồm các thư viện mở rộng của Flask mà bạn sử dụng] cho phép chúng ta tự làm trong quá trình thực hiện . Và khi bạn cần quyết định bất kỳ điều gì đó, bạn sẽ cho Flask biết thông qua một danh sách các tham số cấu hình

Có một số định dạng khác nhau trong việc cung cấp cấu hình cho ứng dụng. Giải pháp cơ bản nhất là định nghĩa các tham số cấu hình của bạn thông qua các từ khóa [key] trong tệp app.config. Tệp này sử dụng kiểu từ điển để mô tả các tham số. Ví dụ như sau

app = Flask[__name__]

ứng dụng. config['SECRET_KEY'] = 'khong-doan-noi-dau'

.. . c á c th ô ng số cần thiết khác

Dù cấu trúc trên đây là đầy đủ việc định nghĩa cấu hình cho Flask, chúng ta vẫn phải tuân theo nguyên tắc phân chia các mối quan tâm [tách các mối quan tâm]. Cụ thể hơn, thay vì đặt tất cả các thông số cấu hình vào mã khởi động của ứng dụng, chúng ta sẽ đặt nó vào một tệp cấu hình riêng rẽ

Trong khuôn khổ của loạt bài này, chúng ta sẽ tuân theo quy ước là sử dụng một lớp để chứa tất cả các thông số cấu hình của ứng dụng. Để giữ cho cấu trúc chung của ứng dụng được gọn gàng, chúng ta sẽ tạo ra các lớp cấu hình trong một mô-đun Python riêng biệt. Sau đây là các khai báo trong lớp cấu hình cho ứng dụng trong tệp cấu hình. py mà chúng ta sẽ lưu ở thư mục bên ngoài cùng của ứng dụng

cấu hình. py. Configure to key code

nhập os

lớp Cấu hình[đối tượng]:

SECRET_KEY = os. môi trường. lấy['SECRET_KEY'] or 'khong-doan-noi-dau'

Rất đơn giản phải không? . Nếu chúng ta cần khai báo các tham số mới, chúng ta sẽ thêm các biến mới vào lớp này. Thậm chí nếu sau này chúng ta cần nhiều bộ tham số, chúng ta có thể tạo ra các lớp con của lớp này. Nhưng bây giờ tạm thời chúng ta không cần đi sâu

Tham số cấu hình SECRET_KEY trong lớp Config là một phần rất quan trọng trong các ứng dụng Flask. Flask và một số thư viện mở rộng thư viện sử dụng giá trị của biến này với vai trò là khóa mã hóa để tạo ra các ký tự hoặc mã thông báo bảo mật. Thư viện mở rộng Flask-WTF sử dụng khóa này để bảo vệ biểu mẫu Web khỏi một hình thức tấn công phổ biến là Cross-Site Request Forgery hoặc là CRSF. Dễ thấy từ tên gọi của tham số này, nó phải là một khóa bí mật do đã quyết định mức độ quan trọng của các chữ ký và mã thông báo bảo mật để bảo vệ cho ứng dụng

Giá trị của khóa bí mật này là một biểu thức với hai mệnh đề được ghép lại với nhau thông qua toán tử HOẶC. Mệnh đề thức nhất sẽ tìm ra giá trị của một biến môi trường còn được gọi là SECRET_KEY. Mệnh đề thứ hai là một chuỗi được xác định sẵn. Chúng ta sẽ sử dụng cách này thường xuyên để thiết lập các tham số cấu hình xuyên suốt chuỗi bài này. Lý do là nó cho phép chúng ta có thể sử dụng giá trị của khóa từ biến môi trường hoặc chuỗi định sẵn một cách linh hoạt. Trong môi trường phát triển, ít có nguy cơ bảo mật thì chúng ta không thể khai báo biến môi trường và làm như vậy, ứng dụng sẽ sử dụng giá trị của chuỗi định sẵn. Tuy nhiên, khi sử dụng chính thức, chúng ta sẽ thiết lập một giá trị riêng cho khóa này trong môi trường biến. Giá trị này là duy nhất và khó có thể đoán được bởi các phần mềm hack, vì thế chúng ta có thể chắc chắn rằng những dữ liệu nhạy cảm không bị lộ

Sau khi đã có file cấu hình, chúng ta cần chọn Flask know to get information from that and used for application. Chúng ta làm điều này bằng cách cập nhật tệp __init__. py và thêm một dòng lệnh sử dụng hàm app.config.from_object[] như sau

ứng dụng/__init__. py. cấu hình Flask

từ bình nhập Bình

từ config nhập Cấu hình

app = Flask[__name__]

ứng dụng. config. from_object[Cấu hình]

từ ứng dụng nhập tuyến đường

T liếc nhìn thì cách tham chiếu đến lớp Config có vẻ hơi khó hiểu. Nhưng nếu bạn quan sát kỹ thì nó cũng tương tự như cách chúng ta khai báo tham chiếu đến thực thể flask trong thư viện Flask mà chúng ta đã làm qua trước đây [Xin lưu ý sự khác nhau giữa chữ “f” thường và chữ “ . Ở đây, tên “config” [chữ thường] là tên của module config. py, còn tên “Config” là tên của cấu hình lớp trong cấu hình mô-đun. py

Như đã nói ở trên, các tham số cấu hình sẽ được truy cập thông qua từ điển trong app.config. Dưới đây là một ví dụ để lấy giá trị của khóa bí mật bằng trình biên dịch Python

>>> từ blog của tôi nhập ứng dụngnhậpứng dụngnhậpứng dụng

>>> ứng dụng. config['SECRET_KEY']

'khong-doan-noi-dau'

Form đăng nhập [form đăng nhập]

Thư viện mở rộng [Flask-WTF] sử dụng các lớp trong Python để đại diện cho các biểu mẫu Web. Các lớp này – gọi tắt là lớp biểu mẫu] sẽ định nghĩa các trường [trường] có trên biểu mẫu thông qua các biến thành viên

Theo đúng nguyên tắc phân chia các mối quan tâm đã được đề cập ở trên, chúng ta sẽ tạo ra một mô-đun mới trong thư mục ứng dụng có tên là biểu mẫu. py để chứa các thông tin về form đăng nhập của chúng tôi. Chúng ta bắt đầu với một biểu mẫu đơn giản bao gồm hai khung nhập văn bản [hộp văn bản] để người dùng có thể nhập tên người dùng và mật khẩu [tên người dùng và mật khẩu]. Biểu mẫu này cũng có thêm một dấu đánh dấu [hộp kiểm] có tên là “Ghi nhớ tôi” và một lần nhấn nút để gửi thông tin đăng nhập từ trình duyệt của người sử dụng về ứng dụng trên máy chủ [nút gửi]

ứng dụng/biểu mẫu. py. đăng nhập mẫu

từ flask_wtf nhập FlaskForm

từ wtforms nhập StringField, PasswordField, BooleanField, SubmitField

từ wtforms. trình xác thực nhập Dữ liệu bắt buộc

class LoginForm[FlaskForm]:

tên người dùng = StringField['Username', validators=[DataRequired[]]]

mật khẩu = Trường mật khẩu['Password', validators=[DataRequired[]]]

remember_me = BooleanField['Remember me']

gửi = Trường gửi['Sign In']

Đa số thư viện mở rộng của Flask sử dụng quy ước app.config0 để nhận định dạng các tham chiếu đến chúng. Flask-WTF cũng không ngoại lệ và sử dụng tên tham chiếu là app.config1. Để sử dụng mô-đun app.config2 từ thư viện Flask-WTF, chúng tôi khai báo như ở đầu tệp ứng dụng/biểu mẫu. py

Ứng dụng của chúng tôi cũng sử dụng bốn lớp khác nhau từ gói WTForms để đại diện cho các trường nhập dữ liệu tương ứng. Mỗi trường sẽ được đại diện bởi một biến trong lớp app.config3. Tham số đầu tiên khi khởi tạo mỗi trường sẽ là mô tả hoặc nhãn của chúng. Tham số tùy chọn app.config4 khi khởi tạo trường tên người dùng và mật khẩu cho phép chúng tôi kiểm tra dữ liệu đầu vào. Biến kiểm tra [validator] app.config5 là một biến được định nghĩa bởi Flask-WTF cho phép ứng dụng kiểm tra và phát thông báo lỗi nếu không có dữ liệu nhập vào trường tương ứng. Có nhiều kiểu biến kiểm tra khác nhau mà chúng ta sẽ tìm hiểu về sau

Mẫu cho Biểu mẫu

Bước tiếp theo là tạo một mẫu HTML sử dụng biểu mẫu của chúng tôi. Việc tạo mẫu này không quá phức tạp vì các trường được định nghĩa trong Lớp LoginForm biết cách tạo mã HTML cho chính chúng. Sau đây là đoạn mã để tạo mẫu đăng nhập, chúng ta sẽ đặt mã này vào tệp app/templates/login. html

ứng dụng/mẫu/đăng nhập. html. mẫu cho mẫu đăng nhập

{% mở rộng "cơ sở. html" %}

{% chặn nội dung %}

Đăng nhập

{% chặn kết thúc %}

Trong mẫu này, chúng tôi sẽ sử dụng lại cơ sở mẫu. html được giới thiệu trong Phần 2 bằng cách sử dụng lệnh app.config6 để kế thừa mẫu. Chúng ta sẽ sử dụng cấu trúc này cho tất cả các mẫu mới để đảm bảo chắc chắn rằng tất cả các trang trong ứng dụng của chúng ta đều có cấu trúc [bố cục] giống nhau với thanh định hướng ở đầu trang

Mẫu này cần có một tham số là một thực thể đã được khởi tạo của lớp app.config3 được đại diện bởi biểu mẫu thẻ trong đoạn mã ở trên. Tham số này cần được truyền từ hàm hiển thị đăng nhập mà chúng ta vẫn chưa tạo ra

Thẻ HTML app.config8 trong đoạn mã trên thực tế không phải chỉ là một thẻ HTML, nó là một vật chứa [vùng chứa] cho biểu mẫu web. Thuộc tính app.config9 của biểu mẫu dùng để thông báo cho trình duyệt biết rằng nó sẽ yêu cầu gửi dữ liệu do người dùng nhập vào địa chỉ [URL] nào. Nếu chúng ta gán một chuỗi trống cho thuộc tính này thì theo mặc định, nó sẽ gửi tất cả dữ liệu đến địa chỉ hành động hiện hành – URL mà chúng ta đã thấy trên thanh địa chỉ của trình duyệt khi truy cập trang Web này. Thuộc tính Config0 báo cho trình duyệt phải sử dụng phương thức nào để gửi dữ liệu trong giao thức HTTP. Phương thức mặc định là gửi yêu cầu theo dạng Config1, tuy nhiên, trong phần lớn trường hợp chúng ta nên sử dụng Config2 để gửi dữ liệu vì Config2 có nhiều ưu điểm hơn cho tác vụ này, ví dụ như nó có thể gửi các dữ liệu . Thuộc tính Config5 dùng để thông báo với trình duyệt không kiểm tra dữ liệu của các trường trong biểu mẫu – do công việc kiểm tra dữ liệu sẽ thực hiện Flask kiểm tra thông tin qua mã mà chúng tôi đã viết trong biểu mẫu tệp. py. Việc sử dụng thuộc tính Config5 là tùy chọn, tuy nhiên đối với biểu mẫu đăng nhập của chúng ta thì chúng ta cần sử dụng nó vì nó cho phép chúng ta kiểm tra việc xác nhận dữ liệu ở máy chủ [xác thực phía máy chủ] mà chúng ta sẽ

Tham số Config7 sẽ tạo ra một trường ẩn [hidden field] để chứa một mã thông báo được sử dụng để bảo vệ biểu mẫu khỏi các cuộc tấn công CSRF mà chúng tôi đã đề cập ở trên. Tất cả những gì chúng ta phải làm để ngăn chặn các cuộc tấn công này là thêm một trường ẩn vào biểu mẫu và định nghĩa biến SECRET_KEY trong tệp cấu hình Flask. Nếu chúng ta thực hiện đủ các điều kiện này, Flask-WTF có đủ thông tin để thực hiện phần còn lại

Nếu bạn đã từng viết biểu mẫu Web HTML, có thể bạn sẽ thấy lạ vì không có thẻ HTML nào trong mẫu này. Lý do là vì đối tượng biểu mẫu mà chúng ta khai báo trong biểu mẫu. py biết cách tạo mã HTML cho các trường tương ứng. Việc chúng ta cần làm là đặt tuyên bố Config9 tại nhãn của trường và SECRET_KEY0 tại vị trí của trường đó. Nếu có trường nào cần thêm nhãn thuộc tính khác bên ngoài, chúng ta có thể thêm tham số tương ứng khi khởi tạo đối tượng cho trường đó trong Lớp app.config3[trong các biểu mẫu mô-đun. py]. Ví dụ như khi bạn khởi tạo tên người dùng và mật khẩu của các đối tượng, bạn có thể thêm tham số SECRET_KEY2 để chỉ định độ dài cho thẻ HTML SECRET_KEY3 để các đối tượng này sinh ra. Đây cũng là cách để bạn có thể chỉ định các thuộc tính CSS và mã xác định [ID] cho các trường trong biểu mẫu

Hiển thị biểu mẫu

Chúng ta đã làm hầu hết các bước để tạo ra biểu mẫu đăng nhập [đăng nhập]. Tuy nhiên, để hiển thị biểu mẫu này trong trình duyệt, chúng ta cần tạo ra hàm hiển thị tương ứng và ánh xạ hàm này vào một URL – cụ thể là SECRET_KEY4. Khi người sử dụng nhập URL này vào trình duyệt [_______7_______5] thì ứng dụng sẽ tạo ra biểu mẫu đăng nhập và truyền nó vào mẫu tương ứng để xuất ra. Chúng ta sẽ viết mã cho chức năng hiển thị mới này trong ứng dụng/tuyến mô-đun. py which they ta made ra in the previous section

ứng dụng/tuyến đường. py. Hàm hiển thị cho form Đăng nhập

từ flask nhập render_template

từ ứng dụng nhập ứng dụng

từ ứng dụng. biểu mẫu nhập LoginForm

.. .

@ứng dụng. tuyến đường['/đăng nhập']

def đăng nhập[].

biểu mẫu = Biểu mẫu đăng nhập[]

return render_template['đăng nhập. html', tiêu đề='Đăng nhập', form=form]

Ở đây, chúng ta thêm tham chiếu đến lớp app.config3 từ các biểu mẫu mô-đun. py, khởi tạo một đối tượng từ lớp này và truyền đối tượng này vào đăng nhập mẫu. html by way call function SECRET_KEY7. Đừng ngạc nhiên với các tham số cuối cùng khi gọi hàm [_______7_______8], thực ra nó chỉ đơn giản là truyền đối tượng SECRET_KEY9 mà chúng ta tạo ra từ lớp app.config3 trong dòng mã ở trên và truyền nó vào một biểu mẫu web có tên là SECRET_KEY9 . html]. Tất cả chỉ có vậy, chúng ta đã thành công trong công việc liên kết biểu mẫu mà chúng ta tạo ra bằng mã Python với mẫu theo định dạng của Jinja2. Flask sẽ làm lại phần còn lại

Để giúp việc truy cập biểu mẫu Đăng nhập dễ dàng hơn, chúng ta sẽ thay đổi một chút thanh định hướng ở cơ sở mẫu. html

ứng dụng/mẫu/cơ sở. html. Liên kết đến trang Đăng nhập trong thanh định hướng

Blog của tôi

Và cuối cùng là hàm hiển thị login[] sử dụng hàm url_for

ứng dụng/tuyến đường. py. Sử dụng hàm Flask3 để tạo các liên kết

từ flask nhập render_template, flash, redirect, url_for

@ứng dụng. tuyến đường['/đăng nhập', methods=['GET', 'POST']]

def đăng nhập[].

biểu mẫu = Biểu mẫu đăng nhập[]

nếu biểu mẫu. validate_on_submit[].

. . .

trả lại chuyển hướng[url_for['index']]