PHP ログインテンプレート-PHPチュートリアル-php.cn

PHP ログインテンプレート

王林

リリース： 2024-08-29 13:14:18

オリジナル

1118 人が閲覧しました

この記事では、PHP ログインテンプレートについて学びます。 Web アプリケーションについて話すとき、それにアクセスするためのログインページが必要になります。これは、ログインページを作成するための基本要件の 1 つです。ログインページは、Web アプリケーションでアクセスが制限されている必須ページの 1 つです。ほとんどのログインページには 2 つのフィールドのみが表示されます。通常、ユーザー名が最初のフィールドとみなされ、2 番目のフィールドがパスワードになります。ログインページのテンプレートには決まった意見はありません。ビジネス要件に応じて、任意のログインページテンプレートを使用できます。

広告このカテゴリーの人気コース PHP 開発者 - 専門分野 | 8コースシリーズ | 3 つの模擬テスト

無料ソフトウェア開発コースを始めましょう

Web 開発、プログラミング言語、ソフトウェアテスト、その他

構文:

ログインページの構文に関する限り、ログインページの設計作業中に従うべき経験則はありません。この記事では、ログインテンプレートの例をいくつか見ていきます。ログインページのテンプレートまたはデザインを考え出すように 5 人に依頼した場合、その外観と操作性に関する業界標準がないため、5 人が異なるものを思いつく可能性があります。したがって、次のセクションでは、ログインページテンプレートの段階的なビューと、このページの作成方法について説明します。

それはどのように機能しますか?

PHP のみを使用した場合、PHP のログインページは使用できません。 PHP ログインのテンプレートは、JavaScript、HTML、CSS、MySql データベースなどの他のさまざまなテクノロジーを組み合わせています。次に、各エンティティの役割を 1 つずつ見てみましょう。

HTML: HTML は、アプリケーションの Web ページの基本的な構成要素の 1 つです。ログインページの必須項目はこの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>

ログイン後にコピー

出力:

PHP ログインテンプレート

このページの外観と UI は、先に進むことができるほどプロフェッショナルではありません。

CSS: CSS は、やはり Web アプリケーションにおける非常に基本的なニーズです。この CSS を使用してログインページを美しくすることができます。 CSS には、上記のログインページをプロフェッショナルな外観にするために使用できるさまざまなオプションが用意されています。フォームの背景色を使用できます。フォームの境界線やその他の関連するものを使用できます。
JavaScript/jQuery: JavaScript は、クライアント側の検証に使用できるスクリプトの 1 つです。 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>

ログイン後にコピー

出力:

PHP ログインテンプレート

例 #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>

ログイン後にコピー

出力:

PHP ログインテンプレート

例 #3

この例では、上記の 2 つのログインページレイアウトとは異なります。

コード:

<!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 ログインページは、デジタル革命のこの時代に必要なものの 1 つです。ログインページのテンプレートを作成するための標準がないため、ビジネス要件に応じて任意のテンプレートを先に進めることができます。ログインページリクエストをサーバーに送信する前に、クライアント側の検証を使用することを常にお勧めします。

以上がPHP ログインテンプレートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。