preface
This article will walk through the implementation of a simple login page, done using HTML, CSS, and JavaScript. The landing page features tab switching and form submission.
HTML Basics
First, let's take a look at the basic structure of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
In the above code, we use <!DOCTYPE>the declaration to specify the document type as HTML. Then, in <head>the tag, we set the title of the page and <link>introduce Bootstrap's CSS file through the tag to apply the style.
CSS styling and layout
Next, we set some styles and layouts for the login page, using a flex layout to achieve center alignment and other effects:
<style>
/* 设置body的样式 */
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
/* .container类的样式 */
.container {
/* 设置最大宽度、居中对齐、背景色和阴影 */
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* 其他样式... */
</style>
We define .containerthe style of the class, set its maximum width, center alignment, background color, padding, border rounded corners and shadows, etc.
JavaScript interaction
In order to realize the functions of tab switching and content display and hiding, we use JavaScript code:
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
// 隐藏所有tab-content
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// 移除所有tablinks的active类
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// 显示当前tab-content和添加active类到当前tablink
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
We define openTab()the function which onclickis called in the event of each login option's button. The function of this function is to switch and display different login options, add a class to the currently selected button active, and remove activethe classes of other buttons.
Form processing and submission
The login page contains three different login options, each with a form for entering username and password, and submitting a login request:
<!-- 学生登录选项 -->
<div id="student" class="tab-content" style="display: block;">
<form action="student-login" method="post">
<div class="form-group">
<label for="studentUsername">Username:</label>
<input type="text" id="studentUsername" name="username" required>
</div>
<!-- 其他表单元素... -->
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>
<!-- 其他登录选项... -->
The form for each login option uses <form>tags, pass actionand methodattributes to specify the processing URL and submission method of the form. The form contains a text box or a password box for entering the user name and password, and requiredthe attribute is set to indicate that the required items are required. Finally, submit the form through a submit button.
code display
All codes are as follows:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
.container {
max-width: 400px;
margin: 0 auto;
margin-top: 100px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.tab {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.tab button {
background-color: #f2f2f2;
border: none;
outline: none;
cursor: pointer;
padding: 10px 20px;
margin-right: 5px;
border-radius: 5px 5px 0 0;
font-weight: bold;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tab-content {
display: none;
background-color: #f9f9f9;
padding: 20px;
border-radius: 0 5px 5px 5px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 8px;
border-radius: 3px;
border: 1px solid #ccc;
}
.form-group button {
width: 100%;
padding: 8px;
border-radius: 3px;
background-color: #4267B2;
border: none;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-group button:hover {
background-color: #385898;
}
.form-group button:active {
background-color: #2d4771;
transform: translateY(2px);
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'student')">Student</button>
<button class="tablinks" onclick="openTab(event, 'teacher')">Teacher</button>
<button class="tablinks" onclick="openTab(event, 'admin')">Admin</button>
</div>
<div id="student" class="tab-content" style="display: block;">
<form action="student-login" method="post">
<div class="form-group">
<label for="studentUsername">Username:</label>
<input type="text" id="studentUsername" name="username" required>
</div>
<div class="form-group">
<label for="studentPassword">Password:</label>
<input type="password" id="studentPassword" name="password" required>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>
<div id="teacher" class="tab-content">
<form action="teacher-login" method="post">
<div class="form-group">
<label for="teacherUsername">Username:</label>
<input type="text" id="teacherUsername" name="username" required>
</div>
<div class="form-group">
<label for="teacherPassword">Password:</label>
<input type="password" id="teacherPassword" name="password" required>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>
<div id="admin" class="tab-content">
<form action="admin-login" method="post">
<div class="form-group">
<label for="adminUsername">Username:</label>
<input type="text" id="adminUsername" name="username" required>
</div>
<div class="form-group">
<label for="adminPassword">Password:</label>
<input type="password" id="adminPassword" name="password" required>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
This code is an implementation of a simple login page. The following is the idea of the code:
-
First, the necessary styles and dependencies are imported.
<link>The Bootstrap CSS file is introduced through the tag, so that the style of the page can use the style provided by the Bootstrap framework. -
In
<body>the tag, there is a.containerclass<div>element that is used to contain the content of the entire login page. This<div>has some styles like setting max width, center alignment, background color and shadow etc. -
The title of the page is a
<h2>label that reads "Login", center-aligned. -
In
.tabthe class<div>, there are three buttons for login options, corresponding to "Student", "Teacher" and "Admin". The buttons have a common.tablinksclass, and one of the buttons hasactivethe class by default. By clicking these buttons, you can toggle between displaying different login options. -
In
.tab-contentthe class<div>, there are forms for the three login options of "Student", "Teacher" and "Admin". These forms are hidden in the initial state, andopenTab()the display and hiding are controlled by JavaScript functions. -
The form for each login option contains a textbox for username and a passwordbox for password, and a "Login" button. Both the text box and the password box have an
requiredattribute that indicates a required field. -
The JavaScript section defines
openTab()functions. This function is called by the button event of each login optiononclick. The function of the function is to switch and display different login options, add a class to the currently selected buttonactive, and removeactivethe classes of other buttons.
Overall, this code implements a simple login page using HTML and CSS, and uses JavaScript to switch tabs and show and hide content. Users can choose different login options and fill in the corresponding user name and password to log in.
Show results
Summarize
Through the implementation of the above code, we have created a simple login page with tab switching and form submission functions. Using HTML, CSS and JavaScript, we are able to control the structure, style and interactive behavior of the page to provide users with a good login experience.
In the blog, you can further expand these knowledge points and provide more examples and explanations to enable readers to understand and apply these techniques in depth. At the same time, you can also discuss how to improve the login page, adding features such as validation and error handling to improve user experience and security.