Formulaire avec CSS3

30 sept. 2010, 19:17

Bonjour a tous j'ai fait un formulaire en Xhtml et CSS3
pas grand chose un champs nom,pseudo,email et mot de passe.
Le but c'est quand la personne clic sur valider les données sont enregistrer puis le formulaire fait apparaitre un message ( inscription terminé )
Pour le moment le problème n'est pas la.

Voici mon formulaire

<form id="start" action="php/inscription.php">
			<h1>Création compte utilisateurs</h1>

			<p>
				<label for="nom">Nom complet</label>
				<input id="nom" type="text" />
			</p>
			<p>
				<label for="pseudo">Nom d'utilisateur</label>
				<input id="pseudo" type="text" />
			</p>
			<p>
				<label for="email">Email</label>
				<input id="email" type="text" />
			</p>			
			<p>
				<label for="password">Mot de passe</label>
				<input id="password" type="password" />
			</p>

            <P>
			  <label for="condition">Réglement</label>
              <TEXTAREA name="positive" rows=5 COLS=40> test
			  
			    </TEXTAREA> 
			
			</p>
			<p>	 	
			   En cliquant sur "Créer mon compte" ci-dessous, vous acceptez<br /> nos Conditions d'Utilisation ainsi que notre Politique de Confidentialité.
			<p>
				<a class="submit" href="#finish">Créer mon compte</a> ou <a href="index.php">annuler</a>
			</p>
				<div id="finish">
					<p>
						Inscription termin&eacute;e!
					</p>
				</div>
</form>

Le problème c'est que les champs ne se renvoie pas vers la page php

mais je souhaiterai garder le

<a class="submit" href="#finish">

Voici la partie CSS3 qui traite du <a class="submit" href="#finish">

Code : Tout sélectionner

input[type=submit]:hover,

}
input[type=submit]:active,
input[type=submit]:focus,
a.submit:active,
a.submit:focus{
    background:#ccc;
    background:-moz-linear-gradient(90deg, #0bcdff, #067cd3);
    background:-webkit-gradient(linear, left top, left bottom, from(#067cd3), to(#0bcdff));
    border-color:#093c75;
    outline:none;
}
#finish{
    background:rgba(65, 166, 42, 0.2);
    border:2px solid #41a62a;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    display:none;
    padding:5px 10px;
}
#finish:target{
    display:block;
}

Si je fait un test avec un fichier php ayant juste se code

<?php

$nom=$_POST['nom'];
echo $_POST['nom'];
?>

La valeur n'est pas envoyer en faisant l'action sur le bouton

mais si cependant je place un bouton basic du type

<input type="submit" value="Valider" />

Cela marche

merci pour votre aide

30 sept. 2010, 19:24

rien a voir avec le CSS ton problème

30 sept. 2010, 19:25

Salut,

Ton problème n'a rien avoir avec le css. Le bouton.

<input type="submit" value="Valider" />

Soumet ton formulaire, alors que

<a class="submit" href="#finish">

Ne le fait pas. Si tu veux garder le a href passe par javascript pour soumettre ton formulaire. Du genre

<a class="submit" href="#finish" onclick="document.start.submit();"></a>

Tu as besoin de rajouter l'attribut name="start" dans le tag form.

Voila.
Bonne chance

30 sept. 2010, 19:26

C'est tout à fait normal...
Il faut user d'un peu de javascript pour utiliser un lien à la place d'un input qui est originalement fait pour envoyer le formulaire.

<a href="#" onClick=nom_formulaire.submit()>LienL</a>

Edit: et un petit rapide avant moi

30 sept. 2010, 19:29

tous d'abord merci pour ta réponse donc si je comprend bien je doit faire comme cela

<form id="start" action="php/inscription.php">
			<h1>Création compte utilisateurs</h1>

			<p>
				<label for="nom">Nom complet</label>
				<input id="nom" type="text" />
			</p>
			<p>
				<label for="pseudo">Nom d'utilisateur</label>
				<input id="pseudo" type="text" />
			</p>
			<p>
				<label for="email">Email</label>
				<input id="email" type="text" />
			</p>			
			<p>
				<label for="password">Mot de passe</label>
				<input id="password" type="password" />
			</p>

            <P>
			  <label for="condition">Réglement</label>
              <TEXTAREA name="positive" rows=5 COLS=40>test
 </TEXTAREA> 
			
			</p>
			<p>	 	
			   En cliquant sur "Créer mon compte" ci-dessous, vous acceptez<br /> nos Conditions d'Utilisation ainsi que notre Politique de Confidentialité.
			<p>
				<a class="submit" href="#finish" onclick="document.start.submit();"></a>Créer mon compte</a> ou <a href="index.php">annuler</a>
			</p>
				<div id="finish">
					<p>
						Inscription termin&eacute;e!
					</p>
				</div>
</form>

Mais cela me revoie dans ma page PHP

[php]Notice: Undefined index: nom in C:\Program Files\EasyPHP-5.3.3\www\php\inscription.php on line 3

Notice: Undefined index: nom in C:\Program Files\EasyPHP-5.3.3\www\php\inscription.php on line 4[/php]

30 sept. 2010, 19:32

Ces notices n'ont rien à voir avec le html, c'est du PHP...
Tu utilises des variables qui n'existent pas, utilises la fonction isSet() pour vérifier la validité avant tout usage de variable.

30 sept. 2010, 19:35

Ces notices n'ont rien à voir avec le html, c'est du PHP...
Tu utilises des variables qui n'existent pas, utilises la fonction isSet() pour vérifier la validité avant tout usage de variable.

Ben justement comme je disait si je rajoute un bouton basique cela renvoie bien les données

30 sept. 2010, 19:36

Tu as simplement lu nos réponses en diagonales.

Tu as besoin de rajouter l'attribut name="start" dans le tag form.

30 sept. 2010, 19:39

arfff désolé je croyais l'avoir mit

Donc je les bien rajouté

le bouton est tout réduit et kan je clic dessus j'ai le message

Request-URI Too Large

The requested URL's length exceeds the capacity limit for this server.

30 sept. 2010, 19:42

Tu n'aurais pas dérangé quelque chose qui fait qu'une quote soit mal fermée et que ton code tout entier se retrouver dans l'attribut action ?

30 sept. 2010, 19:44

non non j'ai rien dérangé

30 sept. 2010, 19:50

Dans le tag de ta form ajoute

method="post"

30 sept. 2010, 20:14

donc cela donne

<form id="start"  action="start" method="post" action="php/inscription.php">
            <h1>Création compte utilisateurs</h1>

            <p>
                <label for="nom">Nom complet</label>
                <input id="nom" type="text" />
            </p>
            <p>
                <label for="pseudo">Nom d'utilisateur</label>
                <input id="pseudo" type="text" />
            </p>
            <p>
                <label for="email">Email</label>
                <input id="email" type="text" />
            </p>            
            <p>
                <label for="password">Mot de passe</label>
                <input id="password" type="password" />
            </p>

            <P>
              <label for="condition">Réglement</label>
              <TEXTAREA name="positive" rows=5 COLS=40>
 </TEXTAREA> 
			
			</p>
			<p>	 	
			   En cliquant sur "Créer mon compte" ci-dessous, vous acceptez<br /> nos Conditions d'Utilisation ainsi que notre Politique de Confidentialité.
			<p>
				<a class="submit" href="#finish" onclick="document.start.submit();"></a>Créer mon compte</a> ou <a href="index.php">annuler</a>
			</p>
				<div id="finish">
					<p>
						Inscription termin&eacute;e!
					</p>
				</div>
</form>

Le problème est toujours présent et quand je passe la souris sur le bouton le chemin est http://127.0.0.1/inscription#finish

du coup le message terminé apparait bien mais j'ai essayer un enregistrement dans la base cela ne passe pas

je viens d'essayer avec un formulaire basic cela marche

voici mon php d'enregistrement

<?php

mysql_connect("127.0.0.1", "mic", "mic");
mysql_select_db("mickael"); 

$nom=$_POST['nom'];

$sql2 = "INSERT INTO utilisateurs (nom) VALUES ('$nom')";
        $req = mysql_query($sql2)or die(mysql_error());
?>

30 sept. 2010, 20:25

name= et pas action= pour la valeur start...

30 sept. 2010, 20:32

+1 pour xTG,

de plus ici tu fermes mal ton tag a href

<a class="submit" href="#finish" onclick="document.start.submit();"></a>Créer mon compte</a> ou <a href="index.php">annuler</a>

a la place

<a class="submit" href="#finish" onclick="document.start.submit();">Créer mon compte</a> ou <a href="index.php">annuler</a>

Formulaire avec CSS3

Qui est en ligne