Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • PHP5 avancé
  • Memento MySQL
  • Memento CSS 3
  • WordPress 3 100% pratique
  • Memento HTML5
Auteur
Killion
#
38 Posts
Bonjour a tous,
j'aimerai bien connaitre les differents types de form qui existent a ce jour, comme radio, text, hidden, submit, radio, checkbox, image ...

et particulierement s'il existait un type pour que l'input ressemble plus a un lien...
de sorte que sur la page affiché on est pas un bouton submit ou une image mais un texte comme ca: lien
et que je puisse recuperer la variable $_POST['abc']

j'espere que vous m'avez compris ^^ merci
Modifié par Killion (21 Aug 2007 - 16:23)

^
Krams
#
9 Posts
hello,
il ne s'agit pas de types de form, mais de type d'inputs dans un form.

radio: ben c'est les boutons qui permettent de choisir une valeur ou une autre, en général ronds.
checkbox: c'est les petits carrés que tu peux checker ou pas
hidden: valeur associé à un input non-ffiché mais postée.
text: textbox standard

tu récupères les valeurs de tous ces inputs dans la page où le formulaire est posté (form action="page.php")

et le submit permet de poster le formulaire. C'est en général un bouton mais j'imagine qu'en CSS tu peux changer ses propriétés pour le faire afficher comme tu veux (qu'il ressemble à un lien), en changeant ses borders.

tu peux aussi poster avec un <a> avec du javascript derrière, mais ce n'est alors plus très accessible ni standard...

^
Killion
#
38 Posts
mmm pourtant quand je fais un truc dans le genre:

<form action="test_form.php" method="post">
<input type="image" src="Killion.jpg" name="abc" value="abc" />
<input type="hidden" name="bbb" value="bbb"/>
</form>';
?>


et ba je peux recuperer la variable $_POST['abc'] et $_POST['bbb']...
donc la c'est pour une image, mais j'aimerai bien pouvoir remplacer l'image par juste un texte... comme un lien ^^ donc je sais pas quel type utiliser... ^^ merci

^
koala64
#
Modérateur
4162 Posts
Salut,

Ce genre de chose ne se fait pas en affectant un type spécial. Le bouton submit habituel est indispensable. Néanmoins, via JS, tu peux lui donner l'apparence d'un lien.

Exemple :
<?php

header('Content-type: text/html; charset=utf-8');

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta http-equiv="content-language" content="fr" />

		<title>Exemple</title>

		<script type="text/javascript"><!--

var oO =
{
	/**
	 * oO.connect(oElem, sEvType, fn, bCapture)
	 * Affecte un gestionnaire d'événement lors d'un événement sur un élément
	 */
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},
	
	/**
	 * oO.oId(sId)
	 * Retourne l'élément dont l'id est sId.
	 */
	oId: function(sId)
	{
		return document.getElementById(sId);
	},
	
	/**
	 * oO.aTag(oEl, sTag)
	 * Renvoie un tableau des éléments de tag sTag compris dans l'élément oEl
	 */
	aTag: function(oEl, sTag)
	{
		return oEl.getElementsByTagName(sTag);
	},
	
	/**
	 * oO.cancelClick(e)
	 * Stoppe la propagation d'un événement et annule l'action par défaut d'un élément
	 */
	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault) // Pour les navigateurs DOM compliant
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event) // Pour IE
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false; // Pour éviter le bug de Safari
	},
	
	/**
	 * oO.replaceSubmit(oEl, sIdForm)
	 * Remplace le bouton submit du formulaire par un lien
	 */
	replaceSubmit: function(oEl, sIdForm)
	{
		var oSubmit;
		
		oEl.parentNode.innerHTML = '<a href="#" id="' + oEl.id + '">' + oEl.value + '</a>';
		oSubmit = oO.oId(oEl.id);
		
		return oO.connect(
			oSubmit,
			'click',
			function(e)
			{
				var oForm;

				oForm = oO.oId(sIdForm);
				oForm.submit();
				
				return oO.cancelClick(e);
			},
			false
		);
	},

	/**
	 * oO.init(sClass, sIdForm)
	 * Chef d'orchestre du script
	 */
	init: function(sClass, sIdForm)
	{
		var aInputs, iInput;

		aInputs = oO.aTag(document, 'input');
		iInput = aInputs.length;
		
		do if(aInputs[--iInput].className === sClass)
			oO.replaceSubmit(aInputs[iInput], sIdForm);
		while(iInput > 0);
		
		return true;
	}
};

oO.connect(window, 'load', function() { oO.init('submit', 'monForm'); }, false);

		//--></script>
	</head>
	<body>

<form action="verif.php" method="post" id="monForm">
	<fieldset>
		<legend>Formulaire d'authentification</legend>
		<div>
			<label for="pseudo">Pseudo : </label>
			<input type="text" name="pseudo" id="pseudo" />
		</div>
		<div>
			<label for="mdp">Mot de passe : </label>
			<input type="password" name="mdp" id="mdp" />
		</div>
		<div>
			<input type="submit" name="submit" class="submit" id="submit" value="Envoyer" />
		</div>
	</fieldset>
</form>

	</body>
</html>


^
Changaco
#
951 Posts
J'ai pas envie de regarder le script en entier donc tu peux me dire ce que tu fais en Javascript que tu ne peux pas faire en CSS et as-tu la compatibilité Konqueror avec le JS ?

^
koala64
#
Modérateur
4162 Posts
Salut CNeo, Smiley smile

Ben je crée un lien qui remplace le bouton submit et je lui affecte l'action de soumission du formulaire... donc je ne comprend pas bien pourquoi tu fais référence à CSS car ce n'est vraiment pas son rôle. Smiley sweatdrop

A part ça, c'est bien compatible avec Konqueror, oui. Smiley cligne

^
Changaco
#
951 Posts
Autant pour moi j'avais pas regardé le script. Smiley confused
Je parle de CSS parce que à part sous Mozilla et IE ( pas sous Konqueror pour le moment et Opera je sais pas j'ai jamais testé ) on peut faire ressembler un bouton à un lien en changeant juste le style ...

^
Killion
#
38 Posts
merci bien pour ces reponses, et il s'avere qu'avec un peu de css ca passe tout seul... ^^

^
koala64
#
Modérateur
4162 Posts
Peux-tu montrer ce que tu as fait ? J'ai de gros doutes mais je me trompe peut-être. Smiley smile

^