Form Grids

<form class="form">
	<fieldset>
		<legend>Text fields</legend>
		<ol class="row">
			<li class="col">
				<label for="name">Name</label>
				<input type="text" id="name" required="required" placeholder="Name"/>
			</li>
			<li class="col">
				<label for="surname">Surname</label>
				<input type="text" id="surname" required="required" placeholder="surname"/>
			</li>
		</ol>
		<ol class="row">
			<li class="col-s-12 col-m-12 col-l-12 col-xl-6">
				<label for="street">Street</label>
				<input type="text" id="street" required="required" placeholder="street"/>
			</li>
			<li class="col-s-6 col-m-6 col-l-6 col-xl-3">
				<label for="number">Number</label>
				<input type="text" id="number" required="required" placeholder="number"/>
			</li>
			<li class="col-s-6 col-m-6 col-l-6 col-xl-3">
				<label for="postalcode">Postal code</label>
				<input type="text" id="postalcode" required="required" placeholder="Postal code"/>
			</li>
		</ol>
		<ol>
			<li>
				<label for="url-field">Url</label>
				<input type="url" id="url-field" required="required" placeholder="Example: http://www.yoursite.com" />
			</li>
			<li>
				<label for="email-field">Email</label>
				<input type="email" id="email-field" required="required" placeholder="email" />
			</li>
		</ol>
		<ol class="row">
			<li class="col">
				<label><strong>Select an option:</strong></label>
				<ul class="list-horizontal">
					<li>
						<label for="first-option1"><input type="radio" id="first-option1" name="radio" /> First option</label>
					</li>
					<li>
						<label for="second-option1"><input type="radio" id="second-option1" name="radio" /> Second option</label>
					</li>
					<li>
						<label for="third-option1"><input type="radio" id="third-option1" name="radio" /> Third option</label>
					</li>
				</ul>
			</li>
			<li class="col">
				<label><strong>Choose as many as you want:</strong></label>
				<ul class="list-horizontal">
					<li>
						<label for="browser_ff">
							<input id="browser_ff" name="available_browsers[]" class="checkbox" type="checkbox" value="ff">
							Firefox
						</label>
					</li>
					<li>
						<label for="browser_ie">
							<input id="browser_ie" name="available_browsers[]" class="checkbox" type="checkbox" value="ie">
							Internet explorer
						</label>
					</li>
					<li>
						<label for="browser_ch">
							<input id="browser_ch" name="available_browsers[]" class="checkbox" type="checkbox" value="ch">
							Chrome
						</label>
					</li>
					<li>
						<label for="browser_op">
							<input id="browser_op" name="available_browsers[]" class="checkbox" type="checkbox" value="op">
							Opera
						</label>
					</li>
					<li>
						<label for="browser_sa">
							<input id="browser_sa" name="available_browsers[]" class="checkbox" type="checkbox" value="sa">
							Safari
						</label>
					</li>
				</ul>
			</li>
		</ol>
		<button type="submit" class="button">Send</button>
	</fieldset>
</form>