nebulosa-css/web/pages/forms.njk

{% extends "templates/publishing.njk" %}

{% block main %}
	<h1>Form input elements</h1>
	<form action="#">

		<label for="text">Text input:</label>
		<input type="text" name="text" id="text" placeholder="Placeholder">

		<label for="password">Password:</label>
		<input type="password" name="password" id="password" placeholder="Password">
		<p class="hint">This is a hint telling you that your password should be at least 5 characters long.</p>

		<label for="textarea">Textarea:</label>
		<textarea name="textarea" id="textarea" placeholder="Write your text here..."></textarea>

		<input type="checkbox" name="checkbox" id="checkbox">
		<label class="description" for="checkbox">Accept this checkbox.</label>

		<input class="switch" type="checkbox" name="switch" id="switch">
		<label class="description" for="switch">Turn on this switch.</label>

		<input type="radio" name="radio" id="radio">
		<label class="description" for="radio">Select this radio button.</label>

		<label for="color">Color:</label>
		<input type="color" name="color" id="color">

		<label for="file">File:</label>
		<input type="file" name="file" id="file">

		<label for="date">Date:</label>
		<input type="date" name="date" id="date">

		<label for="range">Range:</label>
		<input type="range" name="range" id="range">

		<label for="select">Select:</label>
		<select name="select" id="select">
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
			<option value="option4">Option 4</option>
			<option value="option5">Option 5</option>
		</select>
	</form>
{% endblock %}