Happy Forms!

<form>
	<label for="username">Username</label>
	<input id="username" type="email" name="username" placeholder="you@whatever.com" required>
	<small>this is the help text</small>

	<label for="password">Password</label>
	<input id="password" type="password" name="password" placeholder="hunter2" required>
	<small>this is the help text. <a href="http://bash.org/?244321">what</a></small>
	<br>
	<button type="submit" onclick="this.parentElement.classList.add('validating')">Log In</button>
	<a href="/funke">Cancel</a>
</form>

<form>
	<label for="text">text</label>
	<input id="text" type="text" name="text" required pattern="hello.+">
	<small>pattern: "hello.+"</small>

	<label for="email">email</label>
	<input id="email" type="email" name="email" required>
	<small>this is the help email</small>

	<label for="select">select</label>
	<select name="select" id="select">
		<option value="default">default value</option>
		<option value="other">other value</option>
	</select>
	<small>this is the help text</small>

	<label for="textarea">textarea</label>
	<textarea name="textarea" id="textarea"></textarea>
	<small>this is the help text</small>

	<label>Checkboxes</label>
	<input type="checkbox" id="checkbox1" name="checkbox1"><label for="checkbox1">Check it!</label>
	<small>this is the help text</small>

	<input type="checkbox" id="checkbox2" name="checkbox2"><label for="checkbox2">Check it!</label>
	<small>this is the help text</small>

	<input type="checkbox" id="checkbox3" name="checkbox3"><label for="checkbox3">Check it!</label>
	<small>this is the help text</small>

	<label>Radios</label>
	<input type="radio" id="radio1" name="radio"><label for="radio1">Check it!</label>
	<small>this is the help text</small>

	<input type="radio" id="radio2" name="radio"><label for="radio2">Check it!</label>
	<small>this is the help text</small>

	<input type="radio" id="radio3" name="radio"><label for="radio3">Check it!</label>
	<small>this is the help text</small>

	<br>
	<button type="submit" onclick="this.parentElement.classList.add('validating')">Log In</button>
	<button type="reset">Reset</button>
	<button type="button">Button</button>
	<a href="/funke">Cancel</a>

	<br>
	<br>

	<input type="submit" onclick="this.parentElement.classList.add('validating')" value="Log In">
	<input type="reset" value="Reset">
	<input type="button" value="Button">
</form>

<form>
	<label for="file">file</label>
	<input id="file" type="file" name="file" required>
	<small>this is the help file</small>

	<label for="number">number</label>
	<input id="number" type="number" name="number" required>
	<small>this is the help number</small>

	<label for="range">range</label>
	<input id="range" type="range" name="range" required>
	<small>this is the help range</small>

	<label for="search">search</label>
	<input id="search" type="search" name="search" required>
	<small>this is the help search</small>

	<label for="url">url</label>
	<input id="url" type="url" name="url" required>
	<small>this is the help url</small>

	<label for="color">color</label>
	<input id="color" type="color" name="color" required>
	<small>this is the help color</small>

	<button type="submit" onclick="this.parentElement.classList.add('validating')">Log In</button>
	<button type="reset">Reset</button>
	<button type="button">Button</button>
	<a href="/funke">Cancel</a>
</form>

<form>
	<label for="date">date</label>
	<input id="date" type="date" name="date" value="" required>
	<small>this is the help date</small>

	<label for="time">time</label>
	<input id="time" type="time" name="time" required>
	<small>this is the help time</small>

	<label for="datetime-local">datetime-local</label>
	<input id="datetime-local" type="datetime-local" name="datetime-local" required>
	<small>this is the help datetime-local</small>

	<label for="month">month</label>
	<input id="month" type="month" name="month" required>
	<small>this is the help month</small>

	<label for="week">week</label>
	<input id="week" type="week" name="week" required>
	<small>this is the help week</small>

	<button type="submit" onclick="this.parentElement.classList.add('validating')">Log In</button>
	<button type="reset">Reset</button>
	<button type="button">Button</button>
	<a href="/funke">Cancel</a>
</form>