[Résolu] Mise en place d'une balise INPUT

Bonjour à vous,

Je voulais savoir si la balise <input> devait obligatoirement se retrouver dans un <form> ou pas nécessairement ? Ou puis-je trouver cette information par moi-même ?

En d'autres mots, est-ce que cette écriture est correcte ou incorrecte ?

<a href="xxxxxx.htm"><input type="button" value="bla bla bla"></a>

Merci d'avance !

Bonjour,
pour la première question non mais c'est quand même fait pour ça à la base. Si c'est un bouton simple, il faut utiliser l'élément button et non un input.
2 : Oui mais dans ce cas, autant avoir un button seul avec un onclick.
Modifié par Hermann (25 Mar 2013 - 19:40)

Donc quelque chose dans ce style ?

<a href="xxxxxx.htm"><button type="button" class="yyyyyy">Bla bla bla</button></a>

Entourer le <button> d'un lien <a> est la bonne méthode ?

Alphonse a écrit :
Donc quelque chose dans ce style ?

<a href="xxxxxx.htm"><button type="button" class="yyyyyy">Bla bla bla</button></a>

Entourer le &lt;button&gt; d'un lien &lt;a&gt; est la bonne méthode ?

Le button seul devrait suffire sauf si c'est un lien de navigation. Les liens <a> doivent être utilisés pour la navigation et les buttons uniquement pour des actions (fermer, suivant, précédent...).
Modifié par Hermann (25 Mar 2013 - 19:41)

Si seul le bouton devrait suffire, alors je suis obligé d'utiliser du Javascript ? (puisque mon <button> n'est pas dans un <form>)

Il est censé faire quoi ton bouton ?

Ouvrir une popup ! Mais malheureusement, je ne peux pas styler un simple lien <a>

Si c'est une popup tu utiliseras JS donc a priori un élément button est approprié.

Par contre j'ai pas compris ta remarque sur le fait de ne pas pouvoir styler un élément a. Tu peux très bien donner à un lien l'apparence que tu veux.

Bonjour,

Si vous avez un lien en ligne on pourrait être sûr de ce que vous voulez.

a écrit :
Si c'est une popup tu utiliseras JS donc a priori un élément button est approprié.

Je voulais juste avoir confirmation que si seul <button> est utilisé alors il y a d'office et uniquement utilisation du Javascript. Pour ma part, je ne peux pas me permettre de me reposer uniquement sur une action Javascript pour ouvrir une popup d'où l'intérêt d'avoir toujours un lien <a> autour du <button>.

a écrit :
Par contre j'ai pas compris ta remarque sur le fait de ne pas pouvoir styler un élément a. Tu peux très bien donner à un lien l'apparence que tu veux.

Ce lien doit être placé à côté d'un bouton de formulaire qui est déjà stylé. Le problème est que si je reproduis ce style sur un lien <a> alors il y a des différences entre les navigateurs Web au niveau de l'affichage. Les deux boutons n'auront pas un affichage identique partout !

Du coup, ça explique ma toute première question : utilisation d'un <input> en dehors d'un <form> ?

Non, je n'ai pas d'exemple en ligne mais je peux poster le code si ça intéresse.

Alphonse a écrit :
je peux poster le code si ça intéresse.

Oui

Code HTML contenant du code CSS "inline" pour les tests :

<a id="azerty" href="popup/azerty.htm" onclick="openAzerty(this.href); return false;"><button type="button" style="background-color: #000; border: 1px solid #000; color: #ffffff; padding: 0.1em 0.4em;">Azerty</button></a>

Code CSS contenant un style générique (d'où le conflit pour "color") pour tous les <input> mais aussi les <button> :

input, button {
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: 1em;
	color: #000;
}

Et donc, sur la même ligne, j'ai un formulaire avec un vrai <input> qui contient le même style CSS que le "nouveau" <button>. L'avantage est que visuellement, ils sont tous les deux identiques sur tous les navigateurs Web !

Oui c'est vrai que pour l'accessibilité (si JS est désactivé), mieux vaut avoir un lien autour du bouton, donc ne tiens pas compte de ma remarque plus haut.
Concernant la présentation du lien, c'est un peu confus, il te suffit de styler uniquement le button et pas le lien; je vois pas trop où est la difficulté.
Modifié par Hermann (25 Mar 2013 - 16:27)

Aucune difficulté !

Je résume :
1. Je style le lien et je me rends compte que l'affichage n'est pas identique partout
2. Je conserve le lien mais j'y place un <input> à l'intérieur qui récupère le style
3. Je viens demander sur ce forum si je peux utiliser un <input> en dehors d'un <form>
4. On me dit "oui" mais qu'il est alors préférable d'utiliser la balise <button> à la place du <input>

Dans le code posté un peu plus haut, tu verras que c'est bien mon <button> (anciennement mon <input> que j'ai remplacé suite à ta remarque) qui possède le style ! Mon lien ne me permet que de cliquer sur le <button> afin d'ouvrir la popup !

Alphonse a écrit :
Mon lien ne me permet que de cliquer sur le &lt;button&gt; afin d'ouvrir la popup !

Et? C'est pas le but? Et pourquoi l'input récupère le syle du lien?
Tu as l'air de te compliquer pour pas grand chose.
Modifié par Hermann (25 Mar 2013 - 17:03)

???

Je ne comprends pas tes questions, ni ta dernière remarque.

Je n'ai plus d'<input> puisque je l'ai remplacé par un <button>.

Lorsque j'ai dit "récupère", il fallait comprendre "transféré" : le style était sur le lien et je l'ai transféré sur le <button>. Mon lien <a> ne possède plus de style CSS. Je pensais que c'était clair mais je peux comprendre qu'il pouvait y avoir un doute sur l'interprétation.

Dans mon code ci-dessus, qu'est-ce qui te semble compliqué ?

Le code n'est pas compliqué et correct mais je ne situe toujours pas ton problème.
Que les liens s'affichent différement selon le navigateur? Si c'est le cas tu ne nous dis pas ce qui cloche.
Modifié par Hermann (25 Mar 2013 - 20:07)

En réalité, il n'y a plus de problème depuis ta toute première réponse ! LOL
Si tu regardes ma deuxième réponse, il s'agit déjà de ma solution finale.

Ensuite, je demandais juste quelques précisions sur l'utilisation du <button>. Rien de plus.

Quoi qu'il arrive, merci pour ton aide puisque tu m'as permis de résoudre mon problème.

A mon avis, ce n'est pas très malin d'avoir <><input /></a> ou <a><button></button></a>, quand bien même c'est W3C valide.

Je ne sais pas comment les navigateurs ont résolu cette ambiguïté mais mieux vaut ne pas s'y fier: deux zones cliquables sont superposées, il pourrait arriver qu'une se déclenche mais pas l'autre... d'Oû un lien ou un bouton qui ne marcherait peut-être pas dans certaines configuration.

Pour la même raison, j'éviterais aussi <button><a></a></button>, ou pire, plusieurs liens dans le même bouton; juste pour éviter la confusion entre un clic sur le bouton ou sur le(s) lien(s) qui peuvent être traitées différemment.

Pour des questions d'accessibilité, de sémantique et de logique, hors formulaire, je pense qu'il serait plus juste de toujours utiliser des liens, quitte à les styler pour qu'ils aient l'apparence de boutons. Je réserverais les vrais boutons pour les actions liées aux formulaires, et inversément, je n'utiliserais pas de lien pour soumettre un formulaire (pratique courante mais fondamentalement illogique, les lecteurs d'écran proposent des racourcis pour sauter directement au bouton d'envoi, c'est embêtant de ne pas pouvoir les utiliser parce que le « bouton » est en fait un lien).
Après, on peut discuter sur les formulaires qui sont constitués uniquement de champs cachés en-dehors du bouton d'envoi... dans ce cas, un lien est presque plus logique puisque l'utilisateur ne voit même pas qu'il y a un formulaire derrière.