Hướng dẫn javascript code for login page with username and password - mã javascript cho trang đăng nhập với tên người dùng và mật khẩu
|
The beginning of the journey in (front-end) web development can be daunting. The markup is really weird at first. CSS some times makes your page beautiful, other times you have no idea why a single property turned your page into a mess. And in case this is your first time working with a programming language, JavaScript might be the most daunting of the three. Show But, when you finally have a grasp of HTML, CSS and JavaScript, what do you do with them? Practice. Think of something you want to do with your newfound knowledge, it doesn’t matter if it’s “useful”, it doesn’t matter how complex it is. Just do something that helps you get better at HTML, CSS and JavaScript. And please, never forget the value of building dumb sh*t :) Today, as you have already found out from the title, I will be walking you through the creation of a login page using HTML, CSS and JavaScript. But don’t worry. Again, as the title says, this is your first login page, which means the code is as simple as possible and there will be an explanation to accompany each piece of code. Before jumping to the code though, let me show you what we will be creating: Login pageSuccessful loginLogin with invalid credentialsAs you can see, the page contains a title, a login form (for username and password) and a login button that “submits” the input data. Note that I used quotation marks around the submission because there’s no actual submission. Neither the username nor the password are sent to a server to be validated. Instead, when the user clicks the login button we validate that the username is “user” and the password is “web_dev” using JavaScript. If they match, then an alert dialog is shown and the page is reloaded (for the sake of simplicity); otherwise, we display an error message. Now that you’re more familiar with the end result, let’s move on to the code. HTMLWe’ll start with the HTML, as it is the one responsible for the information displayed in the page. In other words, first we will write and structure all the information contained in the page without worrying for style (CSS) or interactivity (JavaScript). Analyse the complete HTML file for as long as you want and when you’re ready move on to the explanation. HTML fileAs usual in HTML files, we have two parts: the By the way, if you’re wondering why the Of course, we make plenty use of ids and classes to facilitate our work with CSS. The ids allow us to select HTML elements unambiguously, that is, each id represents a single element of our file. On the other hand, classes are used when we have a set of CSS styles that we want to repeat for multiple elements. We’ll see the practical use of these ids and classes next. CSSCSS fileNow we have the CSS, in other words, the style of our page. To modify each element in our HTML file, we can select them using ids, classes or the tag names themselves, though the last option is discouraged. You see, the styles of more specific CSS selectors overwrite the styles of less specific ones. For example, the styles of an id selector overwrite those of a class selector, and class selector styles overwrite those of a tag name selector. In other words, always make your CSS selectors as specific as possible to affect only the elements you want to be affected. And don’t forget, while tag name selectors just need the name of the tags, id selectors start with the pound sign ( With
that said, you can still use tag name selectors. For instance, look at the beginning of the code gist. The Still on the We’ll use only the most simple grid layout use cases, that is, to make an element use grid display and then position its contents accordingly, but I do recommend looking into the Grid Layout when you can. It’s a simple but powerful tool to position elements in your pages. For The
first row of the grid, the title, stays as is. The only modification it gets is being centered, as a consequence of the contents of The second row on the other hand does get some modifications (lines 26 through 49), as we need to modify both the row itself which contains the error message and then the error message itself. We use the grid layout once again to center the message inside the second row and make the For the error message, we just play around with its size and styles. Due note that initially its Bên trong chức năng, chúng tôi bắt đầu bằng cách ngăn chặn hành vi mặc định của việc nhấp vào nút Đăng nhập (đó là gửi dữ liệu biểu mẫu). Trong cuộc biểu tình này, chúng tôi không muốn gửi dữ liệu, chúng tôi chỉ muốn xác nhận nó bằng JavaScript, do đó Sau đó, chúng tôi lấy các giá trị đầu vào của người dùng trong các trường biểu mẫu Bây giờ kết thúc chạm vào. Bất cứ khi nào người dùng nhấp vào nút Đăng nhập, chúng tôi sẽ truy xuất bất kỳ giá trị nào đã được nhập vào các trường biểu mẫu. Nhưng chúng ta cần phải làm điều gì đó với những thông tin đó. Sau đó, chúng tôi sẽ viết một khối if/other để thực thi một đoạn mã nếu thông tin đăng nhập là hợp lệ hoặc một đoạn khác nếu chúng không hợp lệ. Chúng ta cũng cần một điều kiện, phải không? Hãy cùng làm cho điều kiện đó xác nhận thực tế của thông tin đăng nhập. Để đơn giản, xác thực đó sẽ kiểm tra xem tên người dùng được gõ có phải là người dùng hay không và mật khẩu là Web Web_Dev. Trong cú pháp JavaScript, điều này có nghĩa là Trong đó Nếu thông tin đăng nhập thực sự hợp lệ, thì chúng tôi sẽ hiển thị một hộp thoại cảnh báo với thông báo mà người dùng đã đăng nhập với Sucess và tiếp theo tải lại trang (một lần nữa, chỉ vì sự đơn giản). Nhưng nếu tên người dùng hoặc mật khẩu không hợp lệ, thì chúng tôi sẽ thay đổi thuộc tính |
