How to Build HTML Forms Right: Semantics

Start With A Form

const jsFormSubmit = event => {
event.preventDefault()

fetch(targetUrl, {
method: "POST",
body: new FormData(event.target)
})
}
form.addEventListener('submit', jsFormSubmit)

Use The Correct Inputs

Every Input Gets a Name and a Label

<template>
<form @submit="onSubmit">
<input v-model="dataKey">
</form>
</template>

<script>
export default {
data: () => ({
dataKey: ''
}),
methods: {
onSubmit() {
console.log(this.dataKey)
}
}
}
</script>

Include A Submit Button

Closing Thoughts

<form>
<fieldset>
<legend>Operating System</legend>
<label>
<input type="radio" name="os" value="windows">
Windows
</label>
<label>
<input type="radio" name="os" value="mac">
Mac
</label>
<label>
<input type="radio" name="os" value="linux">
Linux
</label>
</fieldset>

<fieldset>
<legend>Favorite JS Frameworks</legend>
<label>
<input type="checkbox" name="ck-angular" value="angular">
Angular
</label>
<label>
<input type="checkbox" name="ck-react" value="react">
React
</label>
<label>
<input type="checkbox" name="ck-vue" value="vue">
Vue
</label>
<label>
<input type="checkbox" name="ck-svelte" value="svelte">
Svelte
</label>
</fieldset>

<label>
Position
<select name="position">
<option value="" selected></option>
<option value="fs">Full Stack</option>
<option value="fe">Front End</option>
<option value="be">Back End</option>
<option value="de">Designer</option>
<option value="pm">Project Manager</option>
<option value="ceo">CEO</option>
</select>
</label>

<label>
Years of Experience
<input name="exp" type="number">
</label>

<fieldset>
<label>
First Name
<input name="fname">
</label>
<label>
Last Name
<input name="lname">
</label>
</fieldset>

<label>
Email
<input name="email" type="email">
</label>

<label>
Comments
<textarea name="comments"></textarea>
</label>

<button type="submit">Submit</button>
</form>

Full Stack @Revealbio | Author of Vuetensils & Particles CSS | Panelist @ViewsOnVue | Board Member @sandiegojs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store