Mẫu tài khoản người dùng css html. Gửi dữ liệu biểu mẫu
Đây là một ví dụ về mẫu đăng ký sử dụng HTML. Tại đây, lập trình viên có thể hiển thị bao nhiêu "Trường văn bản" tùy thích. Tên ở phía trước Trường văn bản được gọi là "Nhãn". Tại kết thúc của mẫu đăng ký có nút "THÊM" phía sau mà bất kỳ liên kết mong muốn nào cũng có thể được sử dụng. Sau khi nhấp vào nó sẽ chuyển hướng đến đích cụ thể đó.
Đây là một ví dụ về mẫu đăng ký sử dụng HTML. Tại đây, người lập trình có thể hiển thị bao nhiêu "Trường văn bản" tùy thích. Tên ở phía trước Trường văn bản được gọi là "Nhãn". Ở cuối biểu mẫu đăng ký, phía sau có nút "THÊM" mà bất kỳ liên kết mong muốn nào cũng có thể được sử dụng. Sau khi nhấp vào nó sẽ chuyển hướng đến đích cụ thể đó.Mã HTML cho mẫu đăng ký
Đây là một ví dụ về mẫu đăng ký sử dụng HTML. Tại đây, lập trình viên có thể hiển thị bao nhiêu "Trường văn bản" tùy thích. Tên ở phía trước Trường văn bản được gọi là "Nhãn". Ở cuối biểu mẫu đăng ký, phía sau có nút "THÊM" mà bất kỳ liên kết mong muốn nào cũng có thể được sử dụng. Sau khi nhấp vào nó sẽ chuyển hướng đến đích cụ thể đó.
Trong ví dụ này chúng tôi đã hiển thị 9 "Trường văn bản". Kích thước của Text Box cũng có thể được thay đổi theo yêu cầu.
đăng ký.html
Mẫu đăng ký
Các biểu mẫu được thiết kế để gửi dữ liệu từ người dùng đến máy chủ web. Các biểu mẫu trong HTML có thể bao gồm các trường văn bản và vùng văn bản, hộp kiểm và nút radio cũng như danh sách thả xuống. Tất cả những điều này là những yếu tố của hình thức. Mỗi phần tử phục vụ để truyền đạt một số ý nghĩa cho trang web.
Về cốt lõi, biểu mẫu HTML là một trang web nơi bạn thấy các khu vực để nhập thông tin của mình. Sau khi bạn điền vào biểu mẫu và nhấp vào gửi, thông tin từ biểu mẫu sẽ được đóng gói và gửi đến máy chủ web để xử lý bằng tập lệnh phía máy chủ (tệp xử lý). Sau khi xử lý, một trang web khác sẽ được trả lại cho bạn dưới dạng phản hồi. Hình dưới đây minh họa rõ ràng cách thức hoạt động của biểu mẫu:
Không có gì khó khăn khi tạo biểu mẫu HTML. Cách dễ nhất để có ý tưởng về biểu mẫu là phân tích một đoạn mã HTML nhỏ và sau đó xem nó hoạt động như thế nào. Ví dụ sau đây cho thấy cú pháp để tạo một biểu mẫu HTML đơn giản:
Ví dụ: Biểu mẫu HTML đơn giản
- Hãy tự mình thử xem"
Hình thức đầu tiên của tôi:
Tên:
Họ:
Yếu tố
Các biểu mẫu được chèn vào trang web bằng phần tử . Nó cung cấp một vùng chứa cho tất cả nội dung của biểu mẫu, bao gồm các thành phần như trường văn bản và nút, cũng như bất kỳ thẻ nào khác ngôn ngữ HTML. Tuy nhiên, nó không thể chứa phần tử khác
.
Để gửi biểu mẫu đến máy chủ, hãy sử dụng nút “Gửi”, bạn sẽ nhận được kết quả tương tự nếu bạn nhấn phím “Enter” trong biểu mẫu. Nếu nút "Gửi" không xuất hiện trên biểu mẫu, phím "Enter" có thể được sử dụng để gửi.
Hầu hết các thuộc tính phần tử ảnh hưởng đến việc xử lý biểu mẫu chứ không phải thiết kế của nó. Trong đó phổ biến nhất là hoạt động Và phương pháp. Thuộc tính hoạt động chứa URL mà thông tin trong biểu mẫu sẽ được gửi đến để máy chủ xử lý. Thuộc tính phương pháp là Phương thức HTTP, trình duyệt nào phải sử dụng để gửi dữ liệu biểu mẫu.
Yếu tố
Hầu hết tất cả các trường biểu mẫu đều được tạo bằng phần tử (từ đầu vào tiếng Anh - input). Vẻ bề ngoài yếu tố thay đổi tùy theo giá trị thuộc tính của nó kiểu:
Dưới đây là một số giá trị thuộc tính kiểu:
Nhập văn bản và mật khẩu
Một trong những điều nhất các loại đơn giản phần tử biểu mẫu là trường văn bản được thiết kế để nhập văn bản từ một dòng. Loại này kiểu nhập văn bản được đặt theo mặc định và do đó, trường một dòng sẽ được hiển thị nếu bạn quên chỉ định thuộc tính kiểu. Để thêm trường nhập văn bản một dòng vào biểu mẫu, bạn nên đặt bên trong phần tử đăng ký thuộc tính kiểu với giá trị văn bản:
Trường nhập mật khẩu là loại thông thường trương Văn bản. Nó hỗ trợ các thuộc tính giống như trường văn bản một dòng. Thuộc tính tênđặt tên của trường nhập mật khẩu sẽ được gửi đến máy chủ cùng với mật khẩu do người dùng nhập. Để tạo trường mật khẩu, bạn cần đặt thuộc tính mật khẩu thành kiểu(password (tiếng Anh) - mật khẩu):
Ví dụ về tạo biểu mẫu có trường mật khẩu:
Ví dụ: Trường mật khẩu
- Hãy tự mình thử xem"
Đăng nhập của bạn:
Mật khẩu:
Bạn có thể sử dụng thuộc tính kết hợp với thuộc tính này chiều dài tối đa, giá trị của nó xác định số tiền tối đa những ký tự có thể nhập vào đường thẳng này. Bạn cũng có thể đặt độ dài của trường đầu vào bằng thuộc tính kích cỡ. Theo mặc định, hầu hết các trình duyệt giới hạn độ rộng của trường văn bản ở mức 20 ký tự. Để kiểm soát độ rộng của các thành phần biểu mẫu mới, thay vì thuộc tính kích cỡ, nên sử dụng phương tiện bảng xếp tầng phong cách (CSS).
Thuộc tính giá trị chỉ định giá trị được hiển thị theo mặc định trong trường văn bản khi biểu mẫu được tải. Bằng cách nhập giá trị mặc định vào trường, bạn có thể giải thích cho người dùng chính xác dữ liệu nào và định dạng nào bạn muốn người dùng nhập vào đây. Đây giống như một mẫu, vì sẽ thuận tiện hơn nhiều cho người dùng khi điền vào biểu mẫu bằng cách xem một ví dụ trước mặt.
Công tắc (radio)
Yếu tố kiểu Đài tạo các công tắc sử dụng nguyên tắc logic "HOẶC", cho phép bạn chỉ chọn một trong nhiều giá trị: nếu bạn chọn một vị trí thì tất cả các vị trí khác sẽ không hoạt động. Cú pháp cơ bản của phần tử chuyển đổi là:
Thuộc tính tênđối với công tắc là bắt buộc và phát vai trò quan trọng trong việc kết hợp một số phần tử nút radio thành một nhóm. Để kết hợp các switch thành một nhóm, bạn phải đặt cùng giá trị thuộc tính tên Và ý nghĩa khác nhau thuộc tính giá trị. Thuộc tính giá trịđặt giá trị của nút radio đã chọn sẽ được gửi đến máy chủ. Giá trị của mỗi phần tử nút radio phải là duy nhất trong nhóm để máy chủ biết người dùng đã chọn tùy chọn phản hồi nào.
Sự hiện diện thuộc tính đã kiểm tra(từ tiếng Anh - đã cài đặt) tại phần tử chuyển đổi cho biết tùy chọn đề xuất nào sẽ được chọn theo mặc định khi tải trang, nếu cần. Thuộc tính này chỉ có thể được đặt cho một thành phần nút radio trong nhóm:
- Hãy tự mình thử xem"
Bạn bao nhiêu tuổi?
- dưới 18
- từ 18 đến 24
- từ 25 đến 35
- hơn 35
thuộc tính hành động.
Chính cho phần tử là một thuộc tính hoạt động, trong đó chỉ định trình xử lý dữ liệu cho biểu mẫu. Trình xử lý dữ liệu là một tệp mô tả những việc cần làm với dữ liệu biểu mẫu. Kết quả của quá trình xử lý này là một trang HTML mới được trả về trình duyệt. Nói cách khác, trong thuộc tính hoạt động chỉ định đường dẫn URL tới tệp xử lý trên máy chủ (đôi khi được gọi là trang tập lệnh) để xử lý biểu mẫu. Cú pháp như sau:
Tệp xử lý được đặt trên máy chủ mytestserver.com trong thư mục thư mục tên và tên của tập lệnh máy chủ sẽ xử lý dữ liệu - obrabotchik.php. Tất cả dữ liệu bạn đã nhập vào biểu mẫu trên trang web sẽ được chuyển cho anh ấy. Phần mở rộng .php chỉ ra rằng biểu mẫu đã chỉ định được xử lý bằng một tập lệnh viết bằng PHP. Bản thân trình xử lý có thể được viết bằng ngôn ngữ khác, ví dụ nó có thể là ngôn ngữ kịch bản Python, Ruby, v.v.
Nên luôn đặt giá trị thuộc tính hoạt động. Nếu biểu mẫu phải chuyển các giá trị đến cùng một trang chứa nó, hãy cung cấp một chuỗi trống làm giá trị của thuộc tính hành động: action="".
thuộc tính phương thức
Thuộc tính phương pháp chỉ định cách thông tin sẽ được chuyển đến máy chủ. Phương thức gửi biểu mẫu bạn chọn tùy thuộc vào dữ liệu bạn muốn gửi cùng với biểu mẫu. Khối lượng của dữ liệu này đóng một vai trò quan trọng ở đây. Phổ biến nhất là hai phương pháp chuyển dữ liệu nguồn biểu mẫu của bạn từ trình duyệt sang máy chủ: LẤY Và BƯU KIỆN. Phương thức này có thể được đặt thành bất kỳ phương thức nào bạn chọn và nếu bạn không chỉ định nó, phương thức mặc định sẽ được sử dụng LẤY. Chúng ta hãy xem xét việc sử dụng từng người trong số họ.
phương thức ĐĂNG
Phương pháp BƯU KIỆN các gói tạo thành dữ liệu và gửi nó đến máy chủ mà người dùng không nhận thấy, vì dữ liệu được chứa trong nội dung thư. Trình duyệt web, khi sử dụng phương pháp BƯU KIỆN gửi yêu cầu đến máy chủ bao gồm các tiêu đề đặc biệt theo sau là dữ liệu biểu mẫu. Vì nội dung của yêu cầu này chỉ có sẵn đối với máy chủ nên phương thức BƯU KIỆNđược sử dụng để truyền dữ liệu bí mật như mật khẩu, chi tiết thẻ ngân hàng và thông tin cá nhân khác của người dùng. Phương pháp BƯU KIỆN cũng thích hợp để gửi khối lượng lớn thông tin, vì không giống như phương pháp LẤY, nó không có hạn chế về số lượng ký tự được truyền.
phương thức NHẬN
Như các bạn đã biết, công việc chính của trình duyệt là nhận các trang web từ máy chủ. Vì vậy khi sử dụng phương pháp LẤY, trình duyệt của bạn chỉ cần truy xuất trang web như mọi khi. Phương pháp LẤY cũng bao bọc dữ liệu biểu mẫu nhưng nối nó vào cuối URL trước khi gửi yêu cầu đến máy chủ. Để hiểu cách thức hoạt động của phương pháp LẤY, hãy xem nó hoạt động. Mở ví dụ đầu tiên từ bài học này (Ví dụ: Simple HTML Form) trong Notepad (ví dụ Notepad++) và thực hiện một thay đổi nhỏ đối với mã HTML:
Đăng nhập
Chúng tôi xác minh tên người dùng và mật khẩu chúng tôi nhận được, sau đó tra cứu chúng trong cơ sở dữ liệu. Đây là mã:
function Đăng nhập() ( if(empty($_POST["username"])) ( $this->HandleError("UserName trống!"); return false; ) if(empty($_POST["password"])) ( $this->HandleError("Mật khẩu trống!"); return false; ) $username = Trim($_POST["username"]); >CheckLoginInDB($username,$password)) ( return false; ) session_start(); $_SESSION[$this->GetLoginSessionVar()] = $username;
Để xác định người dùng là được ủy quyền, chúng tôi sẽ kiểm tra cơ sở dữ liệu để tìm kết hợp tên người dùng/mật khẩu của anh ấy và nếu kết hợp chính xác được nhập, chúng tôi sẽ đặt một biến phiên.
Đây là đoạn mã để tra cứu tên người dùng và mật khẩu.
hàm CheckLoginInDB($username,$password) ( if(!$this->DBLogin()) ( $this->HandleError("Database login failed!"); return false; ) $username = $this->SanitizeForSQL($ tên người dùng); $pwdmd5 = md5($password); $qry = "Chọn tên, email từ $this->tablename ". " trong đó tên người dùng="$username" và mật khẩu="$pwdmd5" y" $; kết quả = mysql_query($qry,$this->connection); if(!$result || mysql_num_rows($result)<= 0) { $this->HandleError("Lỗi đăng nhập." "Tên người dùng hoặc mật khẩu không khớp"); trả về sai; ) trả về giá trị đúng; )
Xin lưu ý rằng chúng ta phải so sánh giá trị của mật khẩu từ cơ sở dữ liệu với Giá trị mã hóa MD5 của mật khẩu do người dùng nhập vào. Nếu truy vấn trả về một kết quả, chúng tôi sẽ đặt biến phiên "được ủy quyền" và sau đó chuyển hướng đến nội dung được bảo vệ. Nếu không có hàng nào chứa dữ liệu đã nhập, chúng tôi chỉ chuyển hướng người dùng đến biểu mẫu đăng nhập một lần nữa.
Truy cập các trang được kiểm soát
Đối với những trang mà chỉ thành viên đã đăng ký mới có thể truy cập được, chúng ta cần đánh dấu vào đầu trang.
Lưu ý rằng chúng tôi đang đặt biến phiên "được ủy quyền" trong mã đăng nhập ở trên. Trên đầu các trang mà chúng tôi muốn bảo vệ, chúng tôi kiểm tra biến phiên đó. Nếu người dùng được ủy quyền, chúng tôi sẽ hiển thị cho anh ấy nội dung được bảo vệ, nếu không, chúng tôi sẽ hướng anh ấy đến biểu mẫu đăng nhập.
Đưa đoạn mã mẫu này lên đầu các trang được bảo vệ của bạn:
CheckLogin()) ( $fgmembersite->RedirectToURL("login.php"); exit; ) ?>
Xem tập tin: kiểm soát truy cập.php trong mã được tải xuống làm ví dụ.
Đây là mã hàm CheckLogin().
hàm CheckLogin() ( session_start(); $sessionvar = $this->GetLoginSessionVar(); if(empty($_SESSION[$sessionvar])) ( return false; ) return true; )
Đây là những điều cơ bản của việc tạo ra một trang web thành viên. Bây giờ bạn đã có kiến thức cơ bản, bạn có thể thử nghiệm nó và thêm các tính năng mới, chẳng hạn như trang “Quên mật khẩu” để cho phép người dùng lấy lại hoặc thay đổi mật khẩu nếu quên.
Cập nhật
Ngày 9 tháng 1 năm 2012
Tính năng Đặt lại mật khẩu/Thay đổi mật khẩu được thêm vào.
Mã hiện được chia sẻ tại GitHub.
Giấy phép
Mã được chia sẻ theo giấy phép LGPL. Bạn có thể tự do sử dụng nó trên các trang web thương mại hoặc phi thương mại.
Không có bài viết liên quan.
Bình luận về cụm từ này được đóng.
