JeuWeb - Crée ton jeu par navigateur
[ Discussion ] Sémantique CSS, XHTML : Formulaires - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [ Discussion ] Sémantique CSS, XHTML : Formulaires (/showthread.php?tid=2246)

Pages : 1 2 3

[ Discussion ] Sémantique CSS, XHTML : Formulaires - Sephi-Chan - 05-01-2008

Discution divisée de son topic original [ bug connexion bdd ]. Lex.

Voilà donc un petit conseil pour ton formulaire concernant son apparence et son ergonomie) :
Code PHP :
<?php 

<form action="traitement_inscription.php" method="post">

    <div>

        <label><span>Nom :</span><input type="text" name="pseudo" maxlength="50" /></label>

        <label><span>Email :</span><input type="text" name="email" maxlength="50" /></label>

        <p>Votre mot de passe sera généré automatiquement et vous sera envoyé par email.</p>

        <input type="submit" value="Créer le compte" />

    </div>

</form>

Avec pour CSS :
Code :
form label {
    display: block;
    margin: 10px 0;
}

form label span {
    display: block;
    width: 100px;
    float: left;
}

form label input {
    padding: 1px;
}

form input {
    padding: 2px 5px;
    border: 1px solid #666;
    background: #f2f2f2;
}

Ce sera bien plus joli et bien plus pratique d'utilisation. Smile

Pour ton script de connexion, je te conseille cette alternative, sécurisée (la tienne ne l'est pas du tout ! :O) et plus pratique. Il te faudra peut-être modifier quelques choses, comme les noms des champs de la base, même si j'ai essayé de faire correspondre avec ton script/

Code PHP :
<?php 

session_start();



if(!empty($_POST['pseudo']) && !empty($_POST['password'])){

    

    include 'includes/mysql_connect.php';

    

    $query = sprintf("SELECT * FROM users WHERE pseudo = '%s' AND password = '%s';", 

        mysql_real_escape_string($_POST['pseudo']),

        md5($_POST['password']) /* Si ton mot de passe en base de donnée est hashé en MD5 */

    );

    $sql = mysql_query($query);

    

    if(mysql_num_rows($sql) == 1){ 

        $result = mysql_fetch_assoc($sql);

        $_SESSION['id'] = $result['id'];

        echo '<p>Vous êtes à présent connecté, '.$_POST['pseudo'].'.</p>';

    }

    else {

        echo '<p>Aucun compte ne correspond à ces identifiants.</p>';

    }

    

}

else {

    echo "<p>Tout les champs n'ont pas été remplis.</p>"; }



}

Voilà, Smile

Sephi-Chan

RE: Bug connection bdd - Anthor - 05-01-2008

Sephi-Chan a écrit :
Code PHP :
<?php 

<form action="traitement_inscription.php" method="post">

    <div>

        <label><span>Nom :</span><input type="text" name="pseudo" maxlength="50" /></label>

        <label><span>Email :</span><input type="text" name="email" maxlength="50" /></label>

        <p>Votre mot de passe sera généré automatiquement et vous sera envoyé par email.</p>

        <input type="submit" value="Créer le compte" />

    </div>

</form>

Avec pour CSS :
Code :
form label {
    display: block;
    margin: 10px 0;
}

form label span {
    display: block;
    width: 100px;
    float: left;
}

form label input {
    padding: 1px;
}

form input {
    padding: 2px 5px;
    border: 1px solid #666;
    background: #f2f2f2;
}

Je ne suis pas d'accord avec toi sur l'imbrication des balises du formulaire. La sémantique voudrait plutôt que l'on utilise un code de cette forme :
Code PHP :
<?php 

<style type="text/css">

.cssForm p{

width: 250px;

clear: left;

margin: 0;

padding: 5px 0 8px 0;

padding-left: 255px; /* Largeur de l'élément contentant le label */

height: 1%;

}



.cssForm p.nolabel{

    width: 505px; /* Largeur totale */

    padding-left: 0px;

}



.cssForm label{

font-weight: bold;

float: left;

margin-left: -255px; /* Largeur de l'élément contentant le label */

width: 250px; /* Largeur des labels */

}

</style>



<form action="traitement_inscription.php" method="post" class="cssForm">

    <div>

        <p>

            <label for="pseudo">Nom :</label>

            <input type="text" id="pseudo" name="pseudo" maxlength="50" />

        </p>

        <p>

            <label for="email">Email :</label>

            <input type="text" id="email" name="email" maxlength="50" />

        </p>

        <p class="nolabel">Votre mot de passe sera généré automatiquement et vous sera envoyé par email.</p>

        <p><input type="submit" value="Créer le compte" /></p>

    </div>

</form>

Les champs se retrouvent dans le conteneur et les labels ne contiennent que le label du champs, de plus au click sur le label, on focus le champs.

RE: Bug connection bdd - Plume - 05-01-2008

Regarde Sephi, un monsieur qui fait comme moi. Il a mit plein de id et de for ..

Tu le tapes ? Big Grin

Malako, oui c'est normal. Tes données en entêtes ne sont pas bonnes. Je te renverrais vers la doc PHP -> mail() ;]

Lex.

RE: Bug connection bdd - Anthor - 05-01-2008

LexLxUs a écrit :Regarde Sephi, un monsieur qui fait comme moi. Il a mit plein de id et de for ..

Tu le tapes ? Big Grin

C'est le minimum pour éffectuer les vérifications JS au niveau des champs, et avoir le focus, c'est pour l'accessibilité ^^

Malako a écrit :c'est normal après si ma boite de réception n'exécute pas le html ?

Essayes comme cela :
Code PHP :
<?php 

mail($destinataire,

     $objet,

     $message,

     "From: $from\r\nReply-To: $from\r\nContent-Type: text/html; charset=\"iso-8859-1\"\r\n");


RE: Bug connection bdd - Plume - 05-01-2008

Je fais comme toi pour l'utilisation des label Smile

Sephi, il nous a lourdé tous les deux Confusediffle:

Lex.

RE: Bug connection bdd - Sephi-Chan - 05-01-2008

Je suis d'accord, ma solution est moins correcte sur la sémantique. Mais alors, le <input /> a-t-il réellement sa place dans une balise de paragraphe ? Des balises <div /> seraient plus appropriés, si l'on veut être pointilleux sur la sémantique.

Même si ajouter des for et des id partout ne me plaît pas, mais je dois reconnaître que que c'est plus sémantique. Je pense adopter cette solution. Merci pour la participation, Anthor. Smile


Sephi-Chan, mais le CSS est vraiment bizarre ! :O

RE: Bug connection bdd - Plume - 05-01-2008

Pour ma part, je reposte ce que j'avais mis histoire d'avoir un avis Smile

Code :
<form action="traitement_inscription.php" method="post">
    <div>
        <p>
            <label for="pseudo">Nom :</label><input type="text" id="pseudo" name="pseudo" maxlength="50" /><br />
            <label for="email">Email :</label><input type="text" id="email" name="email" maxlength="50" /><br />
            Votre mot de passe sera généré automatiquement et vous sera envoyé par email.<br />
            <input type="submit" value="Créer le compte" />
        </p>
    </div>
</form>

J'vois pas l'utilité de la multitude de <p></p> dont tu fais usage :]
Ensuite, si j'veux mettre un style sur la phrase qui n'est pas en label, j'utilise <span></span> :]

J'vous fait grâce du code CSS ;]

Lex.

[EDIT] Edition du code, j'm'était planté dans le copié collé de Sephi Confusediffle:

RE: Bug connection bdd - Anthor - 05-01-2008

L'interet de ce CSS et des multiples paragraphes, c'est d'avoir une présentation tabulaire. C'est totalement valide et compatible tout navigateur

Le mieux c'est de le voir :

[Image: cssform.jpg]

RE: Bug connection bdd - Plume - 05-01-2008

Attend. P'tite précision. J'utilise le CSS sur mes label pour aligner mes formulaires. Avec un BR, l'espace entre les lignes est moindre. Je trouve que là, c'est trop éclaté.

RE: Bug connection bdd - Anthor - 05-01-2008

L'espace se trouve ici :
Code :
padding: 5px 0 8px 0;

Je n'ai pas vu ton code CSS, alors je ne peux pas te dire ^^