Créer un formulaire d'inscription en HTML, CSS et PHP

Introduction

Apprendre à créer un formulaire d'inscription en HTML, CSS et PHP est une étape cruciale pour tout développeur web débutant ou confirmé. Que vous souhaitiez gérer l'enregistrement d'utilisateurs sur un site web, collecter des informations ou simplement renforcer vos compétences, ce tutoriel vous accompagnera étape par étape.

1. Pourquoi créer un formulaire d'inscription ?

Les formulaires d'inscription sont au cœur de nombreuses applications web. Ils permettent :

• De créer des comptes utilisateurs
• D'enregistrer des données personnelles
• D'assurer une sécurité par identifiants
• De gérer des sessions et des profils utilisateurs

2. Création du formulaire en HTML

Le HTML sert à structurer le formulaire. Voici un exemple de base :

<form action="inscription.php" method="post">
    <label>Nom d'utilisateur :</label><br>
    <input type="text" name="username" required><br>
    <label>Email :</label><br>
    <input type="email" name="email" required><br>
    <label>Mot de passe :</label><br>
    <input type="password" name="password" required><br>
    <input type="submit" value="S'inscrire">
</form>

3. Mise en forme avec CSS

Le CSS permet de rendre le formulaire attrayant et responsive :

form {
    width: 300px;
    margin: 0 auto;
    background: #eee;
    padding: 20px;
    border-radius: 10px;
}

input {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
}

L’objectif est de rendre le formulaire clair, lisible, et facile à utiliser sur tous les supports.

4. Traitement des données avec PHP

Une fois le formulaire soumis, les données sont traitées côté serveur avec PHP. Voici un exemple basique :

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = htmlspecialchars($_POST["username"]);
    $email = htmlspecialchars($_POST["email"]);
    $password = password_hash($_POST["password"], PASSWORD_DEFAULT);

    // Connexion à la base de données
    $conn = new mysqli("localhost", "root", "", "utilisateurs");
    if ($conn->connect_error) die("Erreur : " . $conn->connect_error);

    $sql = "INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')";
    if ($conn->query($sql)) echo "Inscription réussie !";
    else echo "Erreur : " . $conn->error;

    $conn->close();
}
?>

5. Sécurité et validation

Lorsqu'on souhaite créer un formulaire d'inscription en HTML, CSS et PHP, la sécurité est primordiale. Voici quelques bonnes pratiques :

• Utiliser htmlspecialchars() pour éviter les failles XSS
• Hash du mot de passe avec password_hash()
• Validation côté client et serveur
• Préparer les requêtes SQL avec mysqli_prepare() pour éviter les injections SQL

6. Enregistrement dans la base de données

Pour compléter le système, vous devez avoir une base de données. Voici une structure SQL de base :

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL,
    password VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Cette structure permet de stocker efficacement les données utilisateurs.

7. Conclusion

Savoir créer un formulaire d'inscription en HTML, CSS et PHP est une compétence essentielle pour tout développeur web. Ce processus combine la structuration avec HTML, l'esthétique avec CSS et le traitement des données avec PHP. En y ajoutant une base de données et des mesures de sécurité, vous aurez une base solide pour créer un système d'inscription fiable et fonctionnel.

Continuez à expérimenter, ajoutez des fonctionnalités comme la vérification par email, le captcha, ou la double authentification pour renforcer votre formulaire. Pour aller plus loin, vous pouvez aussi créer une interface de connexion sécurisée.