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.
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.
HTML
We’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 and the . The former includes metainformation about our web page, like the character encoding used, the title of the page [the name you see in the tab of your browser] and references to the CSS and JavaScript files which this HTML file will make use of. Due note that there’s a defer
attribute in the tag so that the JavaScript script is only executed after the HTML is fully loaded.
In the Inside 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. Now 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 We also change the display of half of the text in the error message. If you
look back at the message element in the HTML, we have: Invalid username and/or password Notice that Now we only need to go through the
Then we style the form fields. Since we want both fields [username and password] to look the same, we create a single ruleset which selects the class given to both elements, For the style modifications, those were some slight
changes to make these two Cuối cùng, chúng tôi thay đổi kiểu của nút đăng nhập để làm cho nó trông đẹp hơn. Không có gì mới ở đây, ngoại trừ Được rồi, chúng tôi đã vượt qua HTML và chúng tôi vừa hoàn thành CSS. Bây giờ chúng tôi đang ở trong ngôi nhà kéo dài với JavaScript. Để bắt đầu, chúng tôi nhận được tất cả các yếu tố mà chúng tôi sẽ cần làm việc với việc sử dụng JavaScript: Mẫu đăng nhập, nút đăng nhập và thông báo lỗi đăng nhập. Chúng tôi làm điều đó bằng cách gọi phương thức Sau đó, chúng tôi tạo một trình nghe sự kiện cho nút đăng nhập, loại 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 Và đó là điều đó. Chúng tôi đã kết thúc giải thích này và bây giờ bạn có một trang đăng nhập đầy đủ chức năng được tạo bằng HTML, CSS và JavaScript. Tôi nghĩ rằng đây là một ý tưởng tuyệt vời cho các giai đoạn đầu của phát triển web mặt trước vì nó có thể dễ dàng được cải thiện bằng cách thêm hình ảnh động, thay đổi thiết kế của trang hoặc làm cho phía máy chủ xác thực khi bạn học ngôn ngữ back-end Giống như Node.js, Java, PHP, v.v. Tôi hy vọng bài viết này đã hữu ích cho bạn và bằng mọi cách, hãy cho tôi biết phản hồi của bạn :] Nếu bạn muốn chơi xung quanh với một bản demo trực tiếp, bạn có thể tìm thấy một bản phát hành ở đây và mã hoàn chỉnh trên GitHub tại đây., we include all the information that will be visible in our page. We use a element to wrap all the content of the page instead of a simple and the other semantic elements are functionally the same as element, that is, the white rectangle, we have all the information seen on the screen: the “Login” title as an 1 element, a 3] and lastly, the login form, 4. This form is made up of three 5 elements: a text field for the username, a password field
for the password and the respective form submission button. Using a 6 as the type of the second field is important so that when the user types its password it shows dots instead of the actual password. Also, note the 7 attribute. The value you give that attribute is then shown as, you guessed it, the placeholder text of your form fields.5 elements are not closed, it’s because they don’t need closing tags [9 or
something among those lines]. It’s what we call self-closing tags.CSS
CSS
file0] and class selectors start with a dot [1]. If an element has an id “test-id”, then it can be selected in the CSS by its id using 2. If an element has a class “test-class”, then it can be identified as 3.4 and the tag names were used as selectors. Though, don’t forget that there’s only one of each of these two elements in a HTML file… In this case, we’ve used those first two rulesets [selector plus everything inside the brackets] to make page-wide modifications. Setting the 4 and height to 100% makes the page use all of the screen and setting the
margin to 0 removes any vertical scroll that might appear because of default styles of this element., we make it use a grid display to center its contents vertically and horizontally [with defer0 and defer1, respectively]. In other words, it takes the contents of the , which are just the element, and positions and its contents in the dead center of the screen. This is called CSS grid layout and if you’re not familiar with it,
I’ve written a quick introductory article about it here in case you want to learn more., known by its id defer6 [line 15 of the above code gist], we adjust its size and play around with its style to make it stand out from the dark background. We also turn into a grid to facilitate the positioning of its contents which are just three elements: a 1, a 4. Thus, by default the CSS makes this a three-row grid, one for each of the elements. In other words, think of the white rectangle as a three-row grid.defer6 being centered.4 is set to 0, that is, it is not visible. This value will be changed using JavaScript when the user enters invalid credentials.5 element that wraps half of the text. 5 is quite useful when you want to style only part of the text in an element. Because we want the error message to be split in two lines of text, “Invalid username” and “and/or password”, we make the second half show as a new line of text by setting that 5‘s display to 8 [ 9].4’s rulesets, the third row of the grid, to wrap up the CSS [line 71 until the end]. We start by using the grid layout one last time to turn the 4 into a grid. Though, we also make use of another grid property in its ruleset, 3. Since the 4 is a grid item of the element grid container, we can tell it how that grid item should be positioned inside of its own row. Thus, we tell it to be vertically-aligned to the top of its row with
6. Nothing more, nothing less.7. Instead of selecting each individual element by its id only to repeat the CSS, we write the CSS once in a single class and then give that class to both elements.5 elements look better. To keep the placeholder text style in line with the 5s’ style, we also change the colors of those placeholders with the 0 pseudo-element. But, instead of making it general and writing 1, we specify that we only want to change the placeholders of elements that have the class 2 as such:
3. Again, try to make your CSS selectors as specific as possible.4 thay đổi con trỏ thành một con trỏ khi di chuột qua nút.JavaScript
Tệp JavaScript5, chuyển nó là ID của phần tử chúng tôi đang tìm kiếm. Ngoài ra, vì các giá trị của ba biến đó sẽ không thay đổi, nghĩa là, các biến sẽ luôn đề cập đến các yếu tố chính xác, thì chúng tôi khai báo cả ba là 6.7. Nói cách khác, mỗi lần nhấp vào nút đăng nhập, hàm được xác định sau khi 8 sẽ được thực thi. Hàm nhận được một tham số mà chúng tôi gọi là 9, đây là sự kiện chuột đại diện cho nút nhấp chuột [đặt tên cho nó 9 chỉ là một quy ước của các loại, hãy gọi nó là bất cứ điều gì bạn thích].6 tương ứng. Chúng tôi có thể tận dụng cú pháp JavaScript để chọn trường có mẫu 4 và ____78 của bạn là giá trị được trao cho thuộc tính 5 mà bạn đang tìm kiếm. Để có được giá trị của trường đã chọn, chỉ cần thêm 1. Ví dụ: nếu người dùng đã nhập vào User User01, trong trường 3. Khá gọn gàng, phải không?45 là và toán tử chỉ định chúng ta cần cả tên người dùng bằng người dùng của người dùng và mật khẩu bằng với Web Web_Dev.4 của thông báo lỗi đăng nhập [7] để hiển thị và cho người dùng biết thông tin đăng nhập của họ không hợp lệ. Chúng ta có thể thực hiện thay đổi CSS này trong JavaScript bằng cách truy cập 8 của 7 [4 [// kiểm tra trường mật khẩu trống ..
Làm cách nào để tạo thông tin đăng nhập và mật khẩu cho một trang web bằng HTML?
Làm cách nào để liên kết trang đăng nhập của tôi với trang chủ của tôi trong HTML?
Làm cách nào để xác nhận thông tin đăng nhập trong HTML?
Chủ Đề