HTML, CSS, and jQuery: Build a beautiful login form

tag is used to display the title of the form. The

tag is used to wrap each input item and submit button of the form.

Used to organize labels and input boxes for each input item.

2. CSS Styles

Next, we need to add some CSS styles to the login form to make it look more beautiful and user-friendly. Here is a simple styling example:

.container { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #f2f2f2; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 10px; font-weight: bold; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } button[type="submit"] { display: block; width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: #428bca; color: #fff; font-size: 16px; cursor: pointer; } button[type="submit"]:hover { background-color: #357ebd; }

Copy after login

In the above code, we have used some common CSS properties to set the appearance of the login form. For example, themax-widthattribute makes the maximum width of the container 400 pixels, themarginattribute centers the container, and thepaddingattribute adds padding to the container,background-colorAttributes set the background color, etc.

3. jQuery interaction

Finally, we can use jQuery to add some interactive effects and validation functions. For example, we can verify that the username and password are empty when the user submits the form. The following is a simple interaction example:

$(document).ready(function() { $('#login-form').submit(function(e) { e.preventDefault(); // 阻止默认的表单提交行为 var username = $('#username').val(); var password = $('#password').val(); if (username === '' || password === '') { alert('用户名和密码不能为空'); } else { alert('登录成功'); // 这里可以添加具体的登录逻辑 } }); });

Copy after login

In the above code, we use the.submit()method to capture the form's submission event. Through thee.preventDefault()method, we can prevent the default form submission behavior. We then get the values for username and password and do a simple validation. If the username or password is empty, a warning window will pop up. If the verification is successful, we can add specific login logic in theelsestatement.

Summary:

In this article, we learned how to build a beautiful login form using HTML, CSS, and jQuery. Create the structure of the form through HTML, use CSS styles to make it more beautiful, and use jQuery to add interactive effects and validation functions. Of course, the above is just a simple example, you can customize and expand it more according to your needs and creativity. I hope this article helped you build a useful and attractive login form.

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful login form. For more information, please follow other related articles on the PHP Chinese website!