Page 1 sur 3

Formulaire avec CSS3

Posté : 30 sept. 2010, 19:17
par spidercrash
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

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:24
par stealth35
rien a voir avec le CSS ton problème

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:25
par damaskinos
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

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:26
par xTG
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 :)

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:29
par spidercrash
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]

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:32
par xTG
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.

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:35
par spidercrash
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

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:36
par xTG
Tu as simplement lu nos réponses en diagonales. ;)
Tu as besoin de rajouter l'attribut name="start" dans le tag form.

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:39
par spidercrash
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.

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:42
par xTG
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 ?

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:44
par spidercrash
non non j'ai rien dérangé :non:

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 19:50
par damaskinos
Dans le tag de ta form ajoute
method="post"

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 20:14
par spidercrash
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());
?>

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 20:25
par xTG
name= et pas action= pour la valeur start...

Re: Formulaire avec CSS3

Posté : 30 sept. 2010, 20:32
par damaskinos
+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>