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.
<button @click="onButtonClick(event)">Click</button>
On the other hand, a fancy css based button using a div has no keyboard or screen reader support.
<div class="fancy-button" @click="onButtonClick(event)">Click</div>
tabindex 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.
<div class="fancy-button" @click="onClick(event)" @keydown="onKeyDown(event)" tabindex="0">Click</div>
Form components must be related to another element that describes what the form element is used for. This is usually achieved with the label element.
<label for="myinput">Username:</label>
<input id="myinput" type="text" name="username" />