Différence entre <input type = 'submit' /> et <button type = 'submit'> text </ button>
Il y a beaucoup de légendes à leur sujet. Je veux connaître la vérité. Quelles sont les différences entre les deux exemples suivants?
<input type='submit' value='text' /><button type='submit'>text</button>
Vous ne savez pas d'où proviennent vos légendes mais:
Bouton Submit avec <button>
Comme avec:
<button type="submit">(html content)</button>
IE6 soumettra tout le texte pour ce bouton entre les balises, les autres navigateurs ne soumettront que la valeur. En utilisant <button> vous donne plus de liberté de mise en page par rapport à la conception du bouton. À première vue, il semblait excellent au début, mais il est parfois difficile d’utiliser certaines bizarreries de navigateur.
Dans votre exemple, IE6 enverra text au serveur, alors que la plupart des autres navigateurs n'enverront rien. Pour le rendre compatible avec tous les navigateurs, utilisez <button type="submit" value="text">text</button>. Mieux encore: n'utilisez pas la valeur, car si vous ajoutez du HTML, ce qui est reçu du côté du serveur devient plutôt délicat. Si vous devez envoyer une valeur supplémentaire, utilisez plutôt un champ masqué.
Bouton avec <input>
Comme avec:
<input type="button" />
Par défaut, cela ne fait presque rien. Il ne sera même pas soumettre votre formulaire. Vous pouvez uniquement placer du texte sur le bouton et lui attribuer une taille et une bordure au moyen de CSS. Son intention initiale (et actuelle) était d'exécuter un script sans avoir à soumettre le formulaire au serveur.
Bouton d'envoi normal avec <input>
Comme avec:
<input type="submit" />
Comme le premier, mais soumet en réalité la forme environnante.
Bouton d'envoi d'image avec <input>
Comme avec:
<input type="image" />
Comme l'ancien (submit), il va également soumettre un formulaire, mais vous pouvez utiliser n'importe quelle image. Auparavant, c'était le moyen privilégié d'utiliser des images en tant que boutons lorsqu'un formulaire devait être soumis. Pour plus de contrôle, <button> est maintenant utilisé. Cela peut également être utilisé pour cartes d'image côté serveur mais c'est une rareté de nos jours. Lorsque vous utilisez les attributs usemap- et (avec ou sans cet attribut), le navigateur envoie les coordonnées X/Y du pointeur de la souris au serveur (plus précisément l'emplacement du pointeur de la souris à l'intérieur du bouton de la souris). moment où vous cliquez dessus). Si vous ignorez simplement ces extras, il ne s’agit que d’un bouton de soumission déguisé en image.
Il existe quelques différences subtiles entre les navigateurs, mais tous soumettront l'attribut value, à l'exception du <button> tag comme expliqué ci-dessus.
Avec <button>, vous pouvez utiliser les balises img, etc., où le texte est
<button type='submit'> text -- can be img etc. </button>
avec <input> _ tapez, vous êtes limité au texte