이번 글에서는 PHP 로그인 템플릿에 대해 알아보겠습니다. 웹 애플리케이션에 대해 이야기하는 순간, 이에 액세스하려면 로그인 페이지가 필요합니다. 이는 로그인 페이지를 갖기 위한 기본 요구 사항 중 하나입니다. 로그인 페이지는 모든 웹 애플리케이션에서 액세스가 제한된 필수 페이지 중 하나입니다. 대부분의 로그인 페이지에는 두 개의 필드만 표시됩니다. 일반적으로 사용자 이름은 첫 번째 필드로 간주되고 두 번째 필드는 비밀번호 필드로 간주됩니다. 로그인 페이지 템플릿에는 정해진 의견이 없습니다. 비즈니스 요구 사항에 따라 모든 로그인 페이지 템플릿을 사용할 수 있습니다.
광고
이 카테고리에서 인기 있는 강좌
PHP 개발자 - 전문 분야 | 8개 코스 시리즈 | 3가지 모의고사
무료 소프트웨어 개발 과정 시작
웹 개발, 프로그래밍 언어, 소프트웨어 테스팅 등
구문:
로그인 페이지의 구문과 관련하여 로그인 페이지 디자인 작업 중에 따라야 할 일반적인 규칙은 없습니다. 이 기사에서는 로그인 템플릿의 몇 가지 예를 살펴보겠습니다. 5명에게 로그인 페이지 템플릿이나 디자인을 제안해 달라고 하면 모양과 느낌에 관한 업계 표준이 없기 때문에 그들은 5개의 다른 템플릿을 생각해 낼 수 있습니다. 따라서 다음 섹션에서는 로그인 페이지 템플릿의 점진적인 보기와 이 페이지를 만드는 방법도 살펴보겠습니다.
어떻게 작동하나요?
PHP만으로는 로그인 페이지를 사용할 수 없습니다. PHP 로그인 템플릿은 JavaScript, HTML, CSS, MySql 데이터베이스 등과 같은 다양한 기술을 결합합니다. 이제 각 엔터티의 역할을 하나씩 살펴보겠습니다.
HTML: HTML은 애플리케이션 웹페이지의 기본 구성 요소 중 하나입니다. 로그인 페이지의 필수 사항은 이 HTML로만 작성됩니다.
코드:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body style="margin-left: 20%; margin: 5%;">
<form method="post" action="" name="login_form">
<div class="form-element">
<label>Username</label>
<input type="text" name="username" id="username" required />
</div>
<br>
<div class="form-element">
<label>Password</label>
<input type="password" name="password" id="password" required />
</div>
<br>
<button type="submit" name="Login" value="Login">Login</button>
</form>
</body>
</html>
로그인 후 복사
출력:
우리가 볼 수 있듯이 이 페이지의 디자인과 UI는 계속 진행할 수 있을 만큼 전문적이지 않습니다.
-
CSS: CSS는 웹 애플리케이션에서 가장 기본적인 요구 사항입니다. 이 CSS를 사용하여 로그인 페이지를 아름답게 만들 수 있습니다. CSS에는 위의 로그인 페이지를 전문적으로 보이게 하는 데 사용할 수 있는 다양한 옵션이 있습니다. 양식의 배경색을 사용할 수 있습니다. 양식의 테두리 및 기타 다양한 관련 항목을 사용할 수 있습니다.
-
JavaScript/jQuery: JavaScript는 클라이언트 측 유효성 검사에 사용할 수 있는 스크립트 중 하나입니다. JavaScript를 사용하여 비즈니스 요구에 따라 오류 메시지를 표시할 수 있습니다. 예를 들어, 필드(사용자 이름, 비밀번호 또는 둘 다)가 채워지지 않은 경우 양식 제출을 중지할 수 있습니다. 로그인 페이지를 코딩하는 동안 JavaScript 또는 jQuery를 사용하면 이는 다시 부가 가치가 됩니다.
위에서 언급한 모든 사항은 로그인 페이지를 디자인하는 데 충분합니다. 그러나 완전한 로그인으로 처리하려면 PHP와 데이터베이스(MYSQL 또는 기타)도 필요합니다.
PHP 로그인 템플릿 구현 예
이제 다양한 로그인 페이지 예시를 살펴보겠습니다. 위에서 언급한 것과 동일한 HTML 코드를 사용하여 진행하고 있습니다. 위 코드를 사용하거나 위 코드를 약간 수정한 다양한 템플릿을 살펴보겠습니다.
예시 #1
코드:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form method="post" action="" name="login_form" id="login_form">
<div class="form-element">
<label class="head">Login </label>
</div>
<div class="form-element">
<label>Username</label>
<input type="text" name="username" id="username" required />
</div>
<div class="form-element">
<label>Password</label>
<input type="password" name="password" id="password" required />
</div>
<button type="submit" id="Login" name="Login" value="Login">Login</button>
</form>
</body>
<style>
body{margin-left: 30%; margin-top: 5%; max-width: 350px;}
.head {
margin-left: 98px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
}
#login_form{
color: blue;
font-size: larger;
border: 1px solid red;
padding: 7px;
}
.form-element{margin: 20px;}
#Login{
font-weight: 900;
background: red;
margin-left: 110px;
padding: 11px;
color: #fff;
}
label{font-weight: 900;}
</style>
</html>로그인 후 복사
출력:
예시 #2
이 로그인 페이지 템플릿에서는 이전 템플릿에 비해 더욱 상호작용적인 모습을 볼 수 있습니다. 우리는 좀 더 발전된 CSS를 사용할 것입니다.
코드:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h4>Welcome to the Website!</h4>
<form method="post" action="" name="login_form" id="login_form">
<div class="form-element">
<label class="head">Login </label>
</div>
<div class="form-element">
<label>Username</label>
<input type="text" name="username" id="username" required />
</div>
<div class="form-element">
<label>Password</label>
<input type="password" name="password" id="password" required />
</div>
<button type="submit" id="Login" name="Login" value="Login">Login</button>
</form>
</body>
<style>
body{
margin-left: 30%;
margin-top: 5%;
max-width: 350px;
background: #c0c078;
}
.head {
margin-left: 98px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
}
#login_form{
font-size: larger;
border: 1px dotted #3406ed;
padding: 10px;
}
.form-element{margin: 20px;}
#Login{
font-weight: 900;
margin-left: 132px;
padding: 7px;
color: red;
}
label{font-weight: 900;}
h4{text-align: center; text-decoration: underline;}
</style>
</html>로그인 후 복사
출력:
예시 #3
이 예에서는 위의 두 가지 로그인 페이지 레이아웃과 다른 것을 볼 수 있습니다.
코드:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form method="post" action="" name="login_form" id="login_form">
<div class="form-element">
<h2>Welcome </h2>
<input type="text" name="username" id="username" placeholder="Username" required />
<input type="password" name="password" id="password" placeholder="Password" required />
<input type="submit" id="submit" value="Let me in" />
</div>
</form>
</body>
<style>
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height:100%;
background: #465151;
}
h2{
color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,0.3);
letter-spacing: 1px;
text-align: center;
}
input {
width: 100%;
line-height: 4;
margin-bottom: 10px;
background: rgba(0,0,0,0.3);
border: none;
outline: none;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}
#submit{
background-color: #4a77d4;
padding: 25px 14px;
font-size: 15px;
line-height: normal
}
form#login_form {
width: 30%;
margin-left: 30%;
margin-top:100px;
}
::placeholder {
color:#fff;
font-size: 18px;
padding-left: 20px;
}
</style>
</html>로그인 후 복사
출력:
결론
PHP 로그인 페이지는 디지털 혁명 시대에 꼭 필요한 것 중 하나입니다. 로그인 페이지 템플릿을 만드는 표준이 없기 때문에 비즈니스 요구 사항에 따라 어떤 템플릿보다 앞서 나갈 수 있습니다. 로그인 페이지 요청을 서버에 게시하기 전에 항상 클라이언트측 유효성 검사를 사용하는 것이 좋습니다.
위 내용은 PHP 로그인 템플릿의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
