jQuery development login tutorial layout
First we need to create a new form.html file.
The rendering is as follows:
Then write the content of the form. This section explains a relatively simple login page with only one user name and password
Look at the following code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录页面的验证</title> </head> <body> <div id="bdy"> <div id="dv"> <div id="con"> <form method="post" action="#"> 用户名：<input type="text" placeholder="请输入用户名" id="name"></br> <span id="sp1"></span></br></br> 密 码：<input type="password" placeholder="请输入密码" id="pwd"></br> <span id="sp2"></span></br></br> <input type="button" value="登 录" id="but"> </form> </div> </div> </div> </body> </html>
Look at the above code, we are using div layout, let’s take a look at the form text box, password box, span tag, and button inside it
Such a page is very unsightly, so in the next section, we will perform CSS style operations
new file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面的验证</title>
</head>
<body>
<div id="bdy">
<div id="dv">
<div id="con">
<form method="post" action="#">
用户名：<input type="text" placeholder="请输入用户名" id="name"></br>
<span id="sp1"></span></br></br>
密 码：<input type="password" placeholder="请输入密码" id="pwd"></br>
<span id="sp2"></span></br></br>
<input type="button" value="登 录" id="but">
</form>
</div>
</div>
</div>
</body>
</html>
Preview
Clear
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)