Soumettre des boutons dans Zurb: utilisez-vous un <a> ou un? - zurb-foundation, zurb-foundation-5

Je ne comprends pas vraiment la raison d'être de la surabondance de <a>s dans le code à http://foundation.zurb.com/docs/components/buttons.html; et le manque de représentation des autres éléments.

À court de un mentionnez, et une ligne, à la fois sous le Accessibility section, aucune mention n'est faite d'un autre élément (pourquoi pas <button>, ou <input> par exemple?). Il semble presque (en raison de la surreprésentation écrasante) que la documentation disait "nous avons vraiment conçu cela pour <a>s ". Est-ce vraiment le cas?

(Petit côté: la ligne qui mentionne l’utilisation d’autres éléments, j’ai un problème avec: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. Si un bouton est focalisable, je pense pouvoir le déclencher avec la barre d'espace. Malheureusement, quand vous avez un div ou un span, vous pouvez t. Alors, est-ce vraiment utile ou même constructif?)

Je comprends que vous pouvez utiliser <a>s pour les cas où aucun formulaire n'est impliqué, mais qu'en est-il de votre bouton "soumettre" standard lorsqu'un formulaire est impliqué? N'utiliserait pas un <button> résoudre tous les problèmes que vous auriez à l'aide d'un <a>? 1. Il est focalisable. 2. Une fois focalisé, vous pouvez le déclencher avec la barre d’espace. 3. Vous pouvez appuyer sur <Enter> soumettre le formulaire. Qu'est-ce que les autres utilisent pour votre / vos bouton (s) d'envoi?

Réponses:

0 pour la réponse № 1

Les balises de boutons sont utilisables dans la fondation 5. Il n'y a pas beaucoup de documentation là-dessus mais (et je l'ai testé pour m'assurer que j'étais correct) <button> tag fonctionne normalement.

le <a> tag est utilisé sur le site exemple, mais cela ne limite pas son utilisation lorsque vous travaillez avec.

Vous devriez toujours utiliser <button> avec des formes et une utilisation <a> pour les liens.

Si vous consultez adioso.com (ils utilisent foundation) et inspectez leurs formulaires, ils utilisent des boutons pour des utilisations fonctionnelles en dehors des liens.

<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>

<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>

Vérifiez le code ci-dessus. L'exemple de site Web n'est pas une représentation très solide de ce que les fondations peuvent faire mais joue un peu avec et vous verrez qu'il s'agit d'un cadre très solide.


Le plus populaire