PHPログイン登録BootStrapフォーム実装関数-PHPチュートリアル-php.cn

PHPログイン登録BootStrapフォーム実装関数

PHPz

リリース： 2023-03-15 18:18:02

オリジナル

2699 人が閲覧しました

ログインと登録は、Web 開発で使用する最も一般的なモジュールであり、日常生活でよく触れる機能でもあります。この記事では、PHP でのログイン登録の BootStrap フォーム機能について説明します。必要な方は参考にしてください。前回の記事で簡単に紹介しましたが、フロントエンドと PHP に関するいくつかの知識が必要です。この記事では、前回の内容を十分に習得していない場合に備えて、フォームに関するいくつかの知識を紹介します。あまり練習したことがない場合は、最初にすべてのラベルを書き留めるのが最善です。

プロジェクトの紹介

ログインと登録は、Web開発で使用する最も一般的なモジュールであり、日常生活で頻繁に接触する機能でもあります。ユーザーはフロントエンドフォームページを通じてコンテンツを入力し、POST を通じてバックエンドに送信します。次に、送信されたコンテンツが PHP コードによって処理された後、ログインまたは登録ロジックが続行されます。

ログインと登録の図

BootStrap フロントエンドフレームワーク [ http://v3.bootcss.com/ ]

Bootstrap は、開発用の最も人気のある HTML、CSS、および JS フレームワークです。レスポンシブなレイアウト、モバイルファーストの WEB プロジェクト。ブートストラップの使用方法?ソースコードをローカルにダウンロードすることも、BootCDN が提供する無料の CDN アクセラレーションサービスを使用することもできます。まず、ページの基本的なスケルトンを構築します

<html>
<head>
  <meta charset="UTF-8">
  <title>Register</title>
</head>
<body>
</body>
</html>

ログイン後にコピー

次に、「開始」をクリックして次のコンテンツを見つけます

赤い円内の CSS ファイルをページにコピーします

<html>
<head>
  <meta charset="UTF-8">
  <title>Register</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
</body>
</html>

ログイン後にコピー

BootStrap では、次のような多くのケースが提供されています。ログインページのケース http://v3.bootcss.com/examples/signin/

このページを真似してみましょう

<html>
<head>
  <meta charset="UTF-8">
  <title>Register</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    body {
     padding-top: 40px;
     padding-bottom: 40px;
     background-color: #eee;
    }

    .form-signin {
     max-width: 330px;
     padding: 15px;
     margin: 0 auto;
    }
  </style>
</head>
<body>
    <p class="container">
   <form class="form-signin" action="" method="post">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <br>
    <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <br>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <br>
    <input type="submit" class="btn btn-lg btn-primary btn-block" type="submit" value="Sign in">
   </form>
  </p>
</body>
</html>

ログイン後にコピー

疑問がある場合は、は CSS でラップされています。 Baidu を 1 つずつ確認することも、最初に CSS を記述してから CSS コードを少しずつ追加して効果を確認することもできません。 HTMLのフォームを解析してみましょう。

•form タグ ==> は、フォームのコンテンツをラップするために使用され、フォームの開始タグでもあります。

•form タグの属性 action==>action="xxx" には、フォームを処理するための PHP コードが配置されているファイルアドレスが入力されます。送信ボタンをクリックすると、フォームはこのアドレスにデータを送信します。。

•formタグの属性メソッドは少しわかりにくいですが、フォームを送信するときにpostを忘れずに記入してください。興味がある場合は、Baiduで確認してください。

•Input タグ ==> 注意深い友人には、input タグが単独で存在することがわかります。ユーザーがデータを入力できる入力フィールドを指定します。要素は、ユーザーがデータを入力できるようにする入力コントロールを宣言するために

要素内で使用されます。

入力フィールドは、type 属性に応じてさまざまな方法で変更できます。一般的なタイプ属性には、テキスト、電子メール、パスワード、チェックボックス、ラジオ、ボタン、送信、非表示などが含まれます。タイプを変更して効果を確認してください。

•input タグの属性名==> この名前の値は、バックグラウンドの PHP コードが name="xx" に基づいて各値がどの入力ボックスから来たのかを判断できるため、非常に重要です。

•input タグの必須属性 ==> ユーザーが何も書かない場合、フォームの送信を許可できますか?明らかにそうではありません。そのため、必要な手段を送信する前にユーザーにコンテンツを入力させる必要があります。コンテンツを入力せずに送信をクリックすると、フォームは送信されません。

概要

以上がPHPログイン登録BootStrapフォーム実装関数の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。