41 lines
1.6 KiB
Vue
41 lines
1.6 KiB
Vue
<template>
|
|
<DocSectionText v-bind="$attrs">
|
|
<p>
|
|
Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used with
|
|
space key as well to trigger.
|
|
</p>
|
|
</DocSectionText>
|
|
<pre v-code><code>
|
|
<button @click="onButtonClick(event)">Click</button>
|
|
|
|
</code></pre>
|
|
|
|
<div class="doc-section-description">
|
|
<p>On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
|
|
</div>
|
|
<pre v-code><code>
|
|
<div class="fancy-button" @click="onButtonClick(event)">Click</div>
|
|
|
|
</code></pre>
|
|
|
|
<div class="doc-section-description">
|
|
<p>
|
|
<i>tabindex</i> is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form
|
|
controls should be preferred.
|
|
</p>
|
|
</div>
|
|
<pre v-code><code>
|
|
<div class="fancy-button" @click="onClick(event)" @keydown="onKeyDown(event)" tabindex="0">Click</div>
|
|
|
|
</code></pre>
|
|
|
|
<div class="doc-section-description">
|
|
<p>Form components must be related to another element that describes what the form element is used for. This is usually achieved with the <i>label</i> element.</p>
|
|
</div>
|
|
<pre v-code><code>
|
|
<label for="myinput">Username:</label>
|
|
<input id="myinput" type="text" name="username" />
|
|
|
|
</code></pre>
|
|
</template>
|