Xu Hướng 1/2023 # Tạo Form Đăng Nhập Bằng Ngôn Ngữ Html # Top 1 View | Rafs.edu.vn

Xu Hướng 1/2023 # Tạo Form Đăng Nhập Bằng Ngôn Ngữ Html # Top 1 View

Bạn đang xem bài viết Tạo Form Đăng Nhập Bằng Ngôn Ngữ Html được cập nhật mới nhất trên website Rafs.edu.vn. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất.

Bài tiếp theo trong Serie học HTML căn bản hôm nay, mình sẽ hướng dẫn các bạn cách tạo form đăng nhập bằng ngôn ngữ HTML . Trong bố cục của một website hiện nay việc tạo một form đăng nhập cho người dùng khi vào websie dường như rất phổ biến, nhất là những website dạng bán hàng hay diễn đàn để có thể quản lý thành viên dễ dàng hơn.

Tạo form đăng nhập bằng ngôn ngữ HTML như thế nào?

Để đơn giản hóa vấn đề cũng như mang lại tính thẩm mỹ hơn, chúng ta sẽ tạo form dựa trên bố cục của một Table.

Chức năng của form đăng nhập như sau:

Từ bố cục trên, chúng ta sẽ tạo 1 Table gồm 4 dòng và 2 cột. Sử dụng thuộc tính colspan cho dòng 1 và dòng 4.

 

Bạn nên xem

:  Các thẻ HTML định dạng Table

Code xử lý như sau:

Trong đó :

Thuộc tính

action

dùng để link đến một trang web khác khi người dùng nhập vào username + password và nhấp

OK

 ở ví dụ trên là

xulyform.html

.

Method = “post”

là thuộc tính thông thường được sử dụng trong một form. Ngoài ra có thêm một số thuộc tính khác như

Method=”get”.

Placeholder

là đoạn text sẽ hiện ra trong ô nhập user và password nhằm mục đích hướng dẫn người dùng.

Button

Reset

có type là

reset

nhằm khôi phục lại giá trị ban đầu.

Button

Ok

có type là

submit

có ý nghĩa là gửi đi.

Những bài bạn nên xem:

3.3

/

5

(

3

bình chọn

)

Form Đăng Nhập Bằng Ajax, Chi Tiết Cách Tạo Form Đăng Nhập Ajax

Trước đây, mình có hướng dẫn các bạn cách tạo form đăng nhập bằng PHP thông qua phương thức submit form. Đây là phương pháp tạo form cơ bản và làm load lại trang. Trong bài viết ngày hôm nay, mình sẽ hướng dẫn các bạn tạo form đăng nhập bằng ajax với thư viện jquery mới nhất.

Tạo form đăng ký bằng PHP Tạo form đăng nhập bằng PHP

Ajax, hay còn gọi là bất đồng bộ javascript, đây là một kỹ thuật rất hay, giúp cho ứng dụng web của bạn chạy nhanh hơn, trải nghiệm người dùng tốt hơn, nhiều tương tác hơn, xử lý được nhiều thành phần trên website mà không làm reload lại trang.

Đối với một ứng dụng web truyền thống không sử dụng kỹ thuật ajax thì khi chúng ta ấn submit form, yêu cầu sẽ được gửi đi đồng bộ, chuyển hướng website của bạn tới một trang mới hoặc làm reload lại page, lúc này dữ liêu mới được trả về. Còn đối với Ajax, khi bạn tạo ra một yêu cầu, yêu cầu sẽ được gửi đi về server xử lý một cách bất đồng bộ, dữ liệu sau đó sẽ được trả về mà không làm cho trang hiện hành reload lại, khiến bạn có cảm giác ứng dụng web chạy rất mượt mà.

2. Tạo form đăng nhập bằng ajax

Tại thư mục gốc của website, các bạn tạo 2 file và đặt tên lần lượt là dang_nhap_ajax.php và check_dang_nhap.php

File dang_nhap_ajax.php sẽ hiển thị form đăng nhập, và thực hiện việc gửi thông tin tên đăng nhập và mật khẩu từ form về cho file server check_dang_nhap.php xử lý.

File check_dang_nhap.php sẽ chịu trách nhiệm lấy thông tin được gửi vào từ fie dang_nhap_ajax.php và kiểm tra thông tin đăng nhập hợp lệ không

b. Tạo form đăng nhập bằng ajax

var username = $(“#username”).val(); var password = $(“#password”).val(); var error = $(“#error”); var ok = $(“#ok”);

error.html(“”); ok.html(“”);

if (username == “”) { error.html(“Tên đăng nhập không được để trống”); return false; } if (password == “”) { error.html(“Mật khẩu không được để trống”); return false; }

$.ajax({ url: “check_dang_nhap.php”, method: “POST”, data: { username : username, password : password }, success : function(response){ if (response == “1”) { ok.html(“Đăng nhập thành công”); }else{ error.html(“Tên đăng nhập hoặc mật khẩu không chính xác !”); } } });

});

Chạy thử trang này chúng ta sẽ được giao diện như sau :

Mỗi giá trị input trong form mình đều gắn cho nó thuộc tính id. Chẳng hạn Tên đăng nhập sẽ có id là “username”, mật khẩu sẽ có id là “password”.

Ở đoạn code sau, các bạn nhìn lại một lần nữa rồi mình giải thích luôn

var username = $(“#username”).val(); var password = $(“#password”).val(); var error = $(“#error”); var ok = $(“#ok”);

error.html(“”); ok.html(“”);

if (username == “”) { error.html(“Tên đăng nhập không được để trống”); return false; } if (password == “”) { error.html(“Mật khẩu không được để trống”); return false; }

$.ajax({ url: “check_dang_nhap.php”, method: “POST”, data: { username : username, password : password }, success : function(response){ if (response == “1”) { ok.html(“Đăng nhập thành công”); }else{ error.html(“Tên đăng nhập hoặc mật khẩu không chính xác !”); } } });

});

Đây là đoạn code jquery dùng để lấy thông tin đăng nhập là username và password từ form.

Trước tiên mình sẽ thực hiện việc kiểm tra thông tin người dùng nhập vào 2 ô này, nếu một trong hai ô mà để trống thì thực hiện việc thông báo lỗi ra bên ngoài và yêu cầu người dùng điền thông tin đầy đủ vào, và dừng thực thi bằng cách trả về false.

if (username == "") { error.html("Tên đăng nhập không được để trống"); return false; } if (password == "") { error.html("Mật khẩu không được để trống"); return false; }

Sau đó nếu thông tin người dùng đã điền đầy đủ, chúng ta sẽ thực thi ajax và gửi thông tin người dùng về file xử lý phía server là check_dang_nhap.php

$.ajax({ url: "check_dang_nhap.php", method: "POST", data: { username : username, password : password }, success : function(response){ if (response == "1") { ok.html("Đăng nhập thành công"); }else{ error.html("Tên đăng nhập hoặc mật khẩu không chính xác !"); } } });

Ở đoạn code trên, để có thể sử dụng ajax các bạn gõ theo cú pháp $.ajax({}). Bên trong sẽ truyền vào các tham số, bạn nhìn tên của tham số cũng rất dễ hiểu đúng không, nhưng mình cũng giải thích luôn từng tham số như sau

url : Chính là đường dẫn tới file server check_dang_nhap.php, nói với ajax rằng hãy gửi dữ liệu đến trang này và xử lý

method : phương thức dữ liệu được gửi đi là GET hay POST, trong trường hợp này là POST

data : chính là dữ liệu gửi đi, trong trường hợp này là thông tin username và password được lấy từ form

success : chính là funtion nhận dữ liệu trả về từ file server check_dang_nhap.php Nếu dữ liệu trả về là 1 thì tức là đăng nhập thành công, ngược lại bằng 0 thì không thành công

3. Code xử lý cho file check_dang_nhap.php

Các bạn mở file check_dang_nhap.php và copy toàn bộ đoạn code sau và save lại:

<?php $username_db = "kungfuphp"; $password_db = "123456"; $username = $_POST["username"]; $password = $_POST["password"];

if ($username == $username_db && $password == $password_db) { echo 1; exit(); }

echo 0; exit();

Đoạn code này rất đơn giản và dễ hiểu. Đầu tiên các bạn nhìn vào 2 biến $db_username và $db_password. Đây là 2 biến giả lập của mình, tượng trưng cho thông tin username và password có trong cơ sở dữ liệu, sau này các bạn có kết nối thật với database thì tương tự cách xử lý là như vậy.

Tiếp đến mình sẽ tiến hành lấy username và password được gửi từ ajax, thực hiện so sánh và kiểm với thông tin giả lập, nếu trùng khớp, tức thành công mình sẽ trả ra giá trị là 1, ngược lại thất bại mình sẽ trả ra giá trị là 0.

Để trống một hoặc hai ô nhập thông tin username và password rồi ấn nút Đăng nhập

Điền đầy đủ thông tin như sau Tên đăng nhập là "aaa", Mât khẩu là "bbb". Rồi ấn nút Đăng nhập

Điền đầy đủ thông tin Tên đăng nhập là "kungfuphp", Mật khẩu là "123456". Rồi ấn nút Đăng nhập

Thân !

Nguồn : kungufphp.com

Thực Hành Tạo Form Đăng Ký Đẹp Bằng Html Và Css

Ngay sau đây, chúng ta sẽ đi vào chi tiết bài thực hành hôm nay. Mình xin phân tích về các thành phần cơ bản của form đăng ký mà chúng ta sẽ làm gồm:

Tiêu đề form đăng ký

Ô nhập dữ liệu cho tài khoản đăng nhập, mật khẩu, giới tính, ngày sinh, sở thích, giới thiệu bản thân

Nút nhấn gửi dữ liệu, nút nhấn reset form.

Kết quả và yêu cầu cho form đăng ký bằng html và css

(Ảnh chụp màn hình sau khi form đăng ký hoàn thiện.)

Yêu cầu: form đăng ký có khả năng cho phép người dùng nhập dữ liệu, có thể hiển thị tốt trên nhiều thiết bị, bao gồm điện thoại di động, laptop, máy tính bảng.

Cấu trúc file và thư mục

Bắt đầu viết mã html cho form đăng ký

Các bạn mở file chúng tôi bằng phần mềm soạn thảo mã nguồn bất kỳ, và dán nội dung như sau, sau đó các bạn lưu file.

Định dạng form đăng ký bằng css

Các bạn mở file chúng tôi bằng phần mềm soạn thảo mã nguồn bất kỳ, và dán nội dung như sau, sau đó các bạn lưu file.

*{ padding: 0px; margin: 0px; font-family: sans-serif; box-sizing: border-box; } .container{ width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } .col-6{ float: left; width: 50%; } .margin_b{ margin-bottom: 7.5px; } .clear{ clear: both; } header{ background-color: #cccccc; min-height: 70px; padding: 15px; } main{ background-color: #dddddd; min-height: 300px; padding: 7.5px 15px; } footer{ background-color: #cccccc; min-height: 70px; padding: 15px; } h1{ color: #009999; font-size: 20px; margin-bottom: 30px; } .register-form{ width: 100%; max-width: 400px; margin: 20px auto; background-color: #ffffff; padding: 15px; border: 2px dotted #cccccc; border-radius: 10px; } .input-box{ margin-bottom: 10px; } .input-box input[type='text'], .input-box input[type='password'], .input-box input[type='date']{ padding: 7.5px 15px; width: 100%; border: 1px solid #cccccc; outline: none; font-size: 16px; display: inline-block; height: 40px; color: #666666; } .input-box select{ padding: 7.5px 15px; width: 100%; border: 1px solid #cccccc; outline: none; font-size: 16px; display: inline-block; height: 40px; color: #666666; } .input-box option{ font-size: 16px; } .input-box input[type='checkbox']{ height: 1.5em; width: 1.5em; vertical-align: middle; line-height: 2em; } .input-box textarea{ padding: 7.5px 15px; width: 100%; border: 1px solid #cccccc; outline: none; font-size: 16px; min-height: 120px; color: #666666; } .btn-box{ text-align: right; margin-top: 30px; } .btn-box button{ padding: 7.5px 15px; border-radius: 2px; background-color: #009999; color: #ffffff; border: none; outline: none; }

Xem kết quả form đăng ký trên trình duyệt

Như vậy là đã hoàn tất, các bạn có thể xem trực tiếp kết quả trên trình duyệt bằng cách nhấn chuột phải vào file chúng tôi và chọn “open with”, tiếp đến chọn trình duyệt mà bạn muốn xem kết quả.

Lưu ý khi thực hành viết html và css

Trước tiên, chúng ta sẽ tiến hành viết html đơn giản, sau đó tiến hành thêm các thuộc tính nhận dạng cho các thẻ html. Tiếp đến, tạo và liên kết file css. Viết mã nguồn css theo nguyên tắc định dạng cho cái tổng quát trước, cái chi tiết sau.

Tải code tạo form đăng ký bằng html và css

Cách Tạo Một Trang Web WordPress Đa Ngôn Ngữ Bằng Polylang

Ra mắt một trang web WordPress đa ngôn ngữ nghe có vẻ khó khăn, nhưng nó cũng nằm trong tầm tay của bạn. Trên thực tế, một plugin duy nhất có thể là giúp bạn bằng cách dịch mọi thứ từ bảng điều khiển của bạn sang các trang web của bạn.

Tại sao trang web của bạn nên đa ngôn ngữ

Khi chúng tôi nói về một trang web WordPress đa ngôn ngữ, chúng tôi đang đề cập đến các trang web cung cấp nội dung của họ bằng nhiều ngôn ngữ. Khi ở trong trang web, bạn có thể chọn trong số danh sách các ngôn ngữ..

Đó là một khái niệm đơn giản và rất có thể bạn đã thấy nó hoạt động nhiều lần. Các trang web WordPress đa ngôn ngữ có nhiều điều thú vị, gồm các cài đặt hai ngôn ngữ đơn giản như Cơ quan lựa chọn.

Bạn có quyền truy cập vào một đối tượng quốc tế.

Mở rộng khả năng tiếp cận khách hàng từ đó có thể làm tăng lợi nhuận của bạn.

Bạn sẽ tạo ấn tượng tốt với khách truy cập của bạn

Trước khi quyết định tạo trang web này bạn cần xem xét một số yếu tố. Trước hết, bạn nên xác định ngôn ngữ nào sẽ có lợi cho bạn nhất. Thứ hai, bạn cần chắc chắn rằng bản dịch của bạn là tốt nhất. Mặc dù việc kích hoạt nhiều ngôn ngữ có thể giúp bạn nhiều thứ, nhưng việc dịch kém có thể khiến danh tiếng của bạn bị ảnh hưởng.

Các tính năng chính:

Hỗ trợ dịch thủ công và tự động.

Thêm một số lượng ngôn ngữ không giới hạn.

Tích hợp hệ thống quản lý dịch thuật cho phép bạn truy cập nhóm dịch giả chuyên nghiệp và giám sát công việc của họ.

Ưu và nhược điểm:

Polylang gói một wallop khi nói đến bản dịch. Nó bao gồm mọi cơ sở mà bạn có thể cần để biến trang web của mình thành trang đa ngôn ngữ.

Nhược điểm duy nhất là tất cả các tính năng này cũng gây thêm khó khăn cho việc sử dụng plugin.

Các tính năng chính:

Hỗ trợ dịch thủ công và tự động.

Bao gồm hỗ trợ cho hơn 40 ngôn ngữ.

Ưu và nhược điểm:

WPML rất giống với Polylang khi nói về ưu và nhược điểm của nó. Cả hai plugin đều cung cấp các hệ thống dịch mạnh hỗ trợ mọi thứ từ bản dịch tự động đến bản dịch chuyên nghiệp.

Cách tạo một trang web WordPress đa ngôn ngữ bằng Polylang

Chúng tôi vừa giới thiệu cho bạn hai plugin đa ngôn ngữ WordPress tuyệt vời – bây giờ là lúc chỉ cho bạn cách sử dụng chúng. Vì cả hai công cụ này rất giống nhau khi nói đến chức năng của chúng, chúng tôi quyết định sử dụng Polylang cho hướng dẫn này.

Cài đặt plugin Polylang .

Thêm một ngôn ngữ mới vào trang web của bạn.

Dịch thủ công bài viết và trang của bạn.

Kích hoạt tiện ích chuyển đổi ngôn ngữ Polylang .

Cập nhật thông tin chi tiết về Tạo Form Đăng Nhập Bằng Ngôn Ngữ Html trên website Rafs.edu.vn. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Chúc bạn một ngày tốt lành!