jQuery 개발 로그인 튜토리얼 레이아웃

먼저 새로운 form.html 파일을 만들어야 합니다.

렌더링은 다음과 같습니다.

前端布局.png

그런 다음 양식의 내용을 작성합니다. 이 섹션에서는 사용자 이름과 비밀번호가 하나만 있는 비교적 간단한 로그인 페이지를 설명합니다.

다음 코드를 살펴보세요.

<!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>

보기 위 코드에서는 div 레이아웃을 사용하고 있습니다. 양식 텍스트 상자, 비밀번호 상자, 범위 태그, 버튼을 살펴보겠습니다.

이러한 페이지는 매우 보기 흉하므로 다음 섹션에서는 앞으로 CSS 스타일 작업을 수행하겠습니다.

지속적인 학습

새로운 파일

<!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>

코드 재설정

자동운전

제출하다

시사 Clear