Enviar botones en Zurb: ¿usa un <a> o? - zurb-foundation, zurb-foundation-5

Realmente no entiendo la lógica detrás de la superabundancia de <a>s en el código en http://foundation.zurb.com/docs/components/buttons.html; y la falta de representación de los otros elementos.

Escaso de uno mención, y una línea, tanto debajo del Accessibility sección, no se menciona ningún otro elemento (por qué no <button>, o <input> ¿por ejemplo?). Casi parece como si (debido a la abrumadora sobrerrepresentación) la documentación dijera "realmente diseñamos esto para <a>s ". ¿Es realmente el caso?

(Pequeño aparte: la línea que menciona el uso de otros elementos, tengo un problema con: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. Si un botón es enfocable, espero poder activarlo con la barra espaciadora. Desafortunadamente, cuando tienes un div o un lapso, no puedes. Entonces, ¿esto es realmente útil, o incluso constructivo?

Entiendo que puedes usar <a>s para casos en los que no se incluyen formularios, pero ¿qué ocurre con el botón "enviar" estándar en el que está involucrado un formulario? No usaría un <button> resolver todos los problemas que tendrías al usar un <a>? 1. Es enfocable. 2. Cuando está enfocado, puede activarlo con la barra espaciadora. 3. Puede presionar convenientemente <Enter> para enviar el formulario ¿Qué usan otras personas para sus botones de envío?

Respuestas

0 para la respuesta № 1

Las etiquetas de los botones se pueden usar en la base 5. No hay mucha documentación sobre ella, pero (y la he probado para asegurarme de que era correcta). <button> la etiqueta funciona de forma normal

los <a> la etiqueta se usa en el sitio de ejemplo seguro, pero eso no limita su uso cuando se trabaja con ella.

Aún debes usar <button> con formas y uso <a> para enlaces.

Si miras a adioso.com (usan la base) e inspeccionan sus formularios, usan botones para usos funcionales fuera de los enlaces.

<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>

Verifica el código anterior. El sitio web de ejemplo no es una representación muy sólida de lo que puede hacer una fundación, pero juega un poco con ella y verá que es un marco muy sólido.


Más popular