Form

Standard form for the Bebat website.

With grid

px

			
				<form class="o-form">
	<div class="o-form__section__sub l-grid l-grid--form">
		<div class="a-input l-grid__col-6-12">
			<div class="a-input__container">
				<input class="a-input__field" type="text" id="form-name" name="form-name" placeholder=" " value="" />
				<label for="form-name" class="a-input__label">Voornaam
				</label>
			</div>
		</div>
		<div class="a-input l-grid__col-6-12">
			<div class="a-input__container">
				<input class="a-input__field" type="text" id="form-last-name" name="form-last-name" placeholder=" " value="" />
				<label for="form-last-name" class="a-input__label">Naam
				</label>
			</div>
		</div>
	</div>
	<div class="o-form__section__sub l-grid l-grid--form">
		<div class="a-input l-grid__col-6-12">
			<div class="a-input__container">
				<input class="a-input__field" type="text" id="form-street" name="form-street" placeholder=" " value="" />
				<label for="form-street" class="a-input__label">Straat en huisnummer
				</label>
			</div>
		</div>
		<div class="a-input l-grid__col-6-12">
			<div class="a-input__container">
				<input class="a-input__field" type="text" id="form-zip" name="form-zip" placeholder=" " value="" />
				<label for="form-zip" class="a-input__label">Postcode
				</label>
			</div>
		</div>
		<div class="a-input l-grid__col-12-12">
			<div class="a-input__container">
				<input class="a-input__field" type="text" id="form-city" name="form-city" placeholder=" " value="" />
				<label for="form-city" class="a-input__label">Gemeente
				</label>
			</div>
		</div>
	</div>
</form>
			

		

With sections

px

			
				<form class="o-form">
	<fieldset class="o-form__section">
		<legend class="o-form__section__title">Jouw adresgegevens <small>(alle velden zijn verplicht)</small></legend>
		<div class="o-form__section__sub l-grid l-grid--form">
			<div class="a-input l-grid__col-6-12">
				<div class="a-input__container">
					<input class="a-input__field" type="text" id="form-name" name="form-name" placeholder=" " value="" />
					<label for="form-name" class="a-input__label">Voornaam
					</label>
				</div>
			</div>
			<div class="a-input l-grid__col-6-12">
				<div class="a-input__container">
					<input class="a-input__field" type="text" id="form-last-name" name="form-last-name" placeholder=" " value="" />
					<label for="form-last-name" class="a-input__label">Naam
					</label>
				</div>
			</div>
		</div>
		<div class="o-form__section__sub l-grid l-grid--form">
			<div class="a-input l-grid__col-6-12">
				<div class="a-input__container">
					<input class="a-input__field" type="text" id="form-street" name="form-street" placeholder=" " value="" />
					<label for="form-street" class="a-input__label">Straat en huisnummer
					</label>
				</div>
			</div>
			<div class="a-input l-grid__col-6-12">
				<div class="a-input__container">
					<input class="a-input__field" type="text" id="form-zip" name="form-zip" placeholder=" " value="" />
					<label for="form-zip" class="a-input__label">Postcode
					</label>
				</div>
			</div>
			<div class="a-input l-grid__col-12-12">
				<div class="a-input__container">
					<input class="a-input__field" type="text" id="form-city" name="form-city" placeholder=" " value="" />
					<label for="form-city" class="a-input__label">Gemeente
					</label>
				</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="o-form__section">
		<legend class="o-form__section__title">Inzamelpunt gegevens <small>(alle velden zijn verplicht)</small></legend>
		<div class="o-form__section__sub l-grid l-grid--form">
			<div class="a-input l-grid__col-12-12">
				<div class="a-input__container">
					<input class="a-input__field" type="text" id="form-name-collectionpoint" name="form-name-collectionpoint" placeholder=" " value="" />
					<label for="form-name-collectionpoint" class="a-input__label">Naam inzamelpunt
					</label>
				</div>
			</div>
		</div>
		<div class="o-form__section__sub l-grid l-grid--form">
			<div class="a-input l-grid__col-6-12">
				<div class="a-input__container">
					<input class="a-input__field" type="text" id="form-street" name="form-street" placeholder=" " value="" />
					<label for="form-street" class="a-input__label">Straat en huisnummer
					</label>
				</div>
			</div>
			<div class="a-input l-grid__col-6-12">
				<div class="a-input__container">
					<input class="a-input__field" type="text" id="form-zip" name="form-zip" placeholder=" " value="" />
					<label for="form-zip" class="a-input__label">Postcode
					</label>
				</div>
			</div>
			<div class="a-input l-grid__col-12-12">
				<div class="a-input__container">
					<input class="a-input__field" type="text" id="form-city" name="form-city" placeholder=" " value="" />
					<label for="form-city" class="a-input__label">Gemeente
					</label>
				</div>
			</div>
		</div>
		<div class="o-form__section__sub l-grid l-grid--form">
			<div class="a-input a-input--textarea l-grid__col-12-12">
				<div class="a-input__container">
					<textarea class="a-input__field" col="" rows="5" placeholder=" " name="form-remarks"></textarea>
					<label for="form-remarks" class="a-input__label">Opmerkingen (optioneel)
					</label>
				</div>
			</div>
		</div>
	</fieldset>
</form>