この記事では、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>
出力:
このページの外観と UI は、先に進むことができるほどプロフェッショナルではありません。
ログイン ページをデザインするには、上記のすべてで十分です。ただし、完全なログインで処理したい場合は、PHP とデータベース (MYSQL またはその他) も必要です。
ここで、さまざまなログイン ページの例を見てみましょう。上記と同じ HTML コードを使用して作業を進めます。上記のコードを使用するか、上記のコードに少し変更を加えたさまざまなテンプレートを見ていきます。
コード:
<!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>
出力:
このログイン ページ テンプレートでは、以前のものと比較してよりインタラクティブになっていることがわかります。より高度な 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>
出力:
この例では、上記の 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 ログイン ページは、デジタル革命のこの時代に必要なものの 1 つです。ログイン ページのテンプレートを作成するための標準がないため、ビジネス要件に応じて任意のテンプレートを先に進めることができます。ログイン ページ リクエストをサーバーに送信する前に、クライアント側の検証を使用することを常にお勧めします。
以上がPHP ログイン テンプレートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。