recherche

Maison >développement back-end >tutoriel php >Fonction d'implémentation du formulaire BootStrap d'enregistrement de connexion PHP

Fonction d'implémentation du formulaire BootStrap d'enregistrement de connexion PHP

PHPz
PHPzoriginal
2018-05-26 15:40:542721parcourir

La connexion et l'inscription sont les modules les plus couramment utilisés dans le développement Web, et ce sont également des fonctions avec lesquelles nous sommes souvent en contact dans notre vie quotidienne. A travers cet article, je partagerai avec vous la fonction de formulaire BootStrap d'enregistrement de connexion en PHP. Les amis qui en ont besoin peuvent s'y référer

Recommandations associées : "Tutoriel Bootstrap"

Avant-propos

Les articles précédents ont brièvement introduit quelques points de connaissances sur le front-end et PHP. Soumission de formulaire dans le front-end est un module très important. Dans cet article, je vais présenter quelques connaissances sur les formulaires. Si vous ne maîtrisez pas bien le contenu précédent et n'avez pas beaucoup pratiqué, je pense que vous feriez mieux d'écrire d'abord toutes les étiquettes.

Introduction au projet

La connexion et l'inscription sont les modules les plus courants que nous utilisons dans le développement Web, et ce sont aussi des Fonctions avec lesquelles nous sommes souvent en contact dans notre vie quotidienne. L'utilisateur remplit le contenu via la page du formulaire frontal et le soumet au backend via POST. Ensuite, une fois le contenu soumis traité par le code PHP, la logique de connexion ou d'enregistrement continue.

Schéma de connexion et d'inscription

Front-end BootStrap framework [ http://v3.bootcss.com/ ]

Bootstrap est le framework HTML, CSS et JS le plus populaire pour développer une mise en page réactive et des projets WEB axés sur les mobiles.

Comment utiliser BootStrap ? Nous pouvons télécharger son code source localement ou utiliser le service gratuit d'accélération CDN fourni par BootCDN.

Nous construisons d'abord le squelette de base de la page

<html>
<head>
  <meta charset="UTF-8">
  <title>Register</title>
</head>
<body>
</body>
</html>
Ensuite, nous cliquons sur Démarrer pour trouver le contenu suivant

Copiez le Fichier CSS dans le cercle rouge Allez sur notre page

<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 donne de nombreux cas, dont un cas de page de connexion http://v3.bootcss.com/examples/signin/

Let's imitez-le Cette page

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

Le c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 un sur Baidu, ou vous pouvez ne pas écrire CSS d'abord, puis ajouter du code CSS petit à petit pour voir l'effet. Analysons le formulaire en HTML.

•balise de formulaire ==> est utilisée pour envelopper le contenu du formulaire et est également la balise de début du formulaire.

•L'attribut action==>action="xxx" de la balise form est renseigné avec l'adresse du fichier où se trouve le code PHP pour le traitement du formulaire. Après avoir cliqué sur le bouton Soumettre, le formulaire sera affiché. envoyer les données à cette adresse.

•La méthode d'attribut de la balise form==> C'est un peu difficile à comprendre. N'oubliez pas de remplir post lors de la soumission du formulaire, method="post". sur Baidu.

•balise d'entrée ==> Les amis prudents peuvent voir que l'entrée existe seule. La balise d5fd7aea971a85678ba271703566ebfd spécifie le champ de saisie dans lequel l'utilisateur peut saisir des données. L'élément d5fd7aea971a85678ba271703566ebfd est utilisé dans l'élément ff9c23ada1bcecdd1a0fb5d5a0f18437 pour déclarer un contrôle de saisie qui permet aux utilisateurs de saisir des données.

Les champs de saisie peuvent être modifiés de différentes manières, en fonction de l'attribut type. Les attributs de type courants incluent le texte, l'e-mail, le mot de passe, la case à cocher, la radio, le bouton, la soumission, le masqué, etc. Vous pouvez essayer de modifier le type pour voir l'effet.

•Le nom d'attribut de la balise d'entrée ==> Cette valeur de nom est cruciale. La raison pour laquelle notre code PHP d'arrière-plan peut déterminer de quelle zone de saisie provient chaque valeur est basée sur name="xx "Pour juger.

•Attribut de balise d'entrée requis ==> Si l'utilisateur n'écrit rien, pouvons-nous lui permettre de soumettre le formulaire ? Évidemment non, nous devons donc laisser l'utilisateur remplir le contenu avant de le soumettre avec les moyens nécessaires. Si vous cliquez sur Soumettre sans remplir le contenu, le formulaire ne sera pas soumis.

Résumé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction détaillée aux hooks php et aux méthodes de distribution simplesArticle suivant：Introduction détaillée aux hooks php et aux méthodes de distribution simples

Articles Liés

Voir plus