Forms

<div style="--span:6;" class="s-grid">
	<div>
		<label>Text<input type="text" /></label>		
		<label>Number<input type="number" /></label>			
		<label>Password<input type="password" /></label>
		<label>Email<input type="email" /></label>
		<label>Search<input type="search" /></label>
		<label>Tel<input type="tel" /></label>
		<label>Url<input type="url" /></label>
	</div>
</div>

<select>
	<option value="1">Ape</option>
	<option value="2">Elephant</option>
	<option value="3">Jaguar</option>
</select>

<div style="--span:6;" class="s-grid">
	<div>	
		<label>Color<input type="color" /></label>
		<label>File<input type="file" /></label>
		<label>Hidden<input type="hidden" /></label>
		<label>Range<input type="range" min="0" max="100" /></label>
	</div>
</div>

<div style="--span:6;" class="s-grid">
	<div>
		<label>Date<input type="date" /></label>
		<label>Datetime local<input type="datetime-local" /></label>
		<label>Month<input type="month" /></label>
		<label>Time<input type="time" /></label>
		<label>Week<input type="week" /></label>
	</div>
</div>

<div style="--span:6;" class="s-grid">
	<div>
		<label>
			<input type="radio" name="color" value="red" />
			Red
		</label>
		<label>
			<input type="radio" name="color" value="blue" />
			Blue
		</label>
		<label>
			<input type="radio" name="color" value="pink" disabled />
			Pink
		</label>
		<label>
			<input type="checkbox" role="switch" />
			Switch Checkbox
		</label>
		<label><input type="checkbox" />Checkbox</label>
		<label><input type="checkbox" disabled />Disabled Checkbox</label>
	</div>
</div>

<form style="--span:3;" class="s-grid">
	<div>
		<label>
			<input type="text" placeholder="Valid" aria-invalid="false" />
		</label>
		<label>
			<input type="text" placeholder="Invalid" aria-invalid="true" />
		</label>
		<label>
			<input type="text" placeholder="Disabled" disabled />
		</label>
		<label>
			<input type="text" value="Readonly" readonly />
		</label>
		<label>
			<textarea placeholder="Valid" aria-invalid="false" >
			</textarea>
		</label>
		<label>
			<textarea placeholder="Valid" aria-invalid="true" >
			</textarea>
		</label>
	</div>
</form>

<search>
	<input type="search" name="" aria-label="Search" />
	<button type="submit">Search</button>
</search>

<form style="--span:3;" class="s-grid">
	<div>
		<label>
			Name
			<input placeholder="Name" type="text" />
		</label>
		<label>
			Email
			<input type="email"  placeholder="Email" />
		</label>
		<div style="--span-6:6;">
			<button>Submit</button>
		</div>
	</div>	
</form>