Buttons in Zurb einreichen: Benutzt du ein <a> oder? - zurb-foundation, zurb-foundation-5

Ich verstehe nicht wirklich die Logik hinter dem Überfluss von <a>s im Code bei http://foundation.zurb.com/docs/components/buttons.html; und der Mangel an Repräsentation für die anderen Elemente.

Knapp an ein erwähnen, und eine Zeile, beide unter der Accessibility Abschnitt wird kein anderes Element erwähnt (warum nicht <button>, oder <input> beispielsweise?). Es scheint fast so, als würde die Dokumentation (aufgrund der überwältigenden Überrepräsentation) sagen: "Wir haben das wirklich für <a>s "Ist das wirklich der Fall?

(Nebenbei bemerkt: die Zeile, die andere Elemente erwähnt, habe ich ein Problem mit: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. Wenn eine Schaltfläche fokussierbar ist, erwarte ich, dass sie mit der Leertaste ausgelöst werden kann. Leider, wenn Sie ein Div oder eine Spanne haben, können Sie nicht. Ist das wirklich nützlich oder sogar konstruktiv?

Ich verstehe das du benutzen kannst <a>s für Fälle, in denen keine Formulare involviert sind, aber was ist mit Ihrem Standard-Button "Senden", wenn ein Formular involviert ist? Würde nicht a <button> Lösen Sie alle Probleme, die Sie mit einem verwenden würden <a>? 1. Es ist fokussierbar. 2. Wenn es fokussiert ist, können Sie es mit der Leertaste auslösen. 3. Sie können bequem drücken <Enter> das Formular absenden. Was benutzen andere Leute für deine Submit-Buttons?

Antworten:

0 für die Antwort № 1

Die Buttons Tags sind in Foundation 5 verwendbar. Es gibt nicht viel Dokumentation, aber (und ich habe es getestet, um sicherzustellen, dass ich richtig war) <button> tag funktioniert wie gewohnt.

Das <a> Das Tag wird in der Beispielwebsite sicher verwendet, aber das beschränkt seine Verwendung nicht, wenn damit gearbeitet wird.

Du solltest immer noch benutzen <button> mit Formen und Verwendung <a> für Links.

Wenn Sie sich adioso.com anschauen (sie benutzen Foundation) und ihre Formulare überprüfen, verwenden sie Schaltflächen für funktionale Verwendungen außerhalb von Links.

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

Überprüfen Sie den obigen Code. Die Beispielwebsite ist keine sehr solide Darstellung dessen, was Foundation tun kann, sondern spielt ein bisschen mit ihr, und Sie werden einen sehr soliden Rahmen sehen.


Am beliebtesten