Skip to content

Instantly share code, notes, and snippets.

@kresnasatya

kresnasatya/form-a11y-alternative-2.html

Created January 23, 2018 14:25
Show Gist options
  • Save kresnasatya/ade7196d5e45df61c14670c14a122361 to your computer and use it in GitHub Desktop.
Save kresnasatya/ade7196d5e45df61c14670c14a122361 to your computer and use it in GitHub Desktop.
Download ZIP
A11y form alternative 2
Raw
form-a11y-alternative-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form with a11y - Alternative 2</title>
</head>
<body>
<form action="#">
<label>
Email<br>
<input type="email" name="email"><br><br>
</label>
<label for="username">Username</label><br>
<input id="username" type="text" name="username"><br><br>
<label for="password">Password</label><br>
<input id="password" type="password" name="password" required><br><br>
<label for="nama">Nama</label><br>
<input id="nama" type="text" name="nama"><br><br>
<label for="alamat">Alamat</label><br>
<textarea id="alamat" name="alamat" cols="30" rows="10"></textarea><br><br>
<label id="jenisKelamin">Jenis kelamin</label><br>
<input id="laki-laki" type="radio" name="jenis_kelamin" value="laki-laki" aria-labelledby="jenisKelamin laki-laki">
<label for="laki-laki">Laki-laki</label><br>
<input id="perempuan" type="radio" name="jenis_kelamin" value="perempuan" aria-labelledby="jenisKelamin perempuan" checked>
<label for="perempuan">Perempuan</label><br><br>
<label id="hobi">Hobi</label><br>
<input id="ngoding" type="checkbox" name="hobi" value="Ngoding" aria-labelledby="hobi ngoding">
<label for="ngoding">Ngoding</label><br>
<input id="tidur" type="checkbox" name="hobi" value="Tidur" aria-labelledby="hobi tidur">
<label for="tidur">Tidur</label><br>
<input id="makan" type="checkbox" name="hobi" value="Makan" aria-labelledby="hobi makan">
<label for="makan">Makan</label><br><br>
<label for="asalKota">Asal kota</label><br>
<select id="asalKota" name="asal_kota">
<option value="aceh">Aceh</option>
<option value="jakarta">Jakarta</option>
<option value="yogyakarta">Yogyakarta</option>
<option value="denpasar">Denpasar</option>
<option value="medan">Medan</option>
<option value="makassar">Makassar</option>
<option value="surabaya">Surabaya</option>
<option value="bandung">Bandung</option>
<option value="merauke">Merauke</option>
</select><br><br>
<input type="submit" value="Simpan">
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment