Forms

Simple formulaire - avec notif d'erreur

<form action="index_submit" method="get" accept-charset="utf-8" class="w3-6">

	<div class="notif error">
		Champs obligatoires non remplis
	</div>

	<fieldset>
		<legend>Fieldset legend</legend>
		<div class="form-item error">
			<label class="required" for="inputText1">Input type text</label>
			<input class="" name="inputText1" value="">
		</div>
		<div class="form-item">
			<label for="select1">Select</label>
			<select name="select1" id="select1">
				<option value="">option 1</option>
				<option value="">option 2</option>
				<option value="">option 3</option>
				<option value="">option 4</option>
				<option value="">option 5</option>
			</select>
		</div>
		<div class="form-item">
			<label for="textarea1">Textarea</label>
			<textarea name="textarea1" id="textarea1"></textarea>
		</div>
		<div class="form-item">
			<label for="inputFile1">Input type file</label>
			<input name="inputFile1" type="file" id="inputFile1">
		</div>
		<div class="form-item">
			<ul class="inline-form il-grid">
				<li><label><input type="checkbox" name="checkbox-01"> Checkbox 01</label></li>
				<li><label><input type="checkbox" name="checkbox-01"> Checkbox 01</label></li>
				<li><label><input type="checkbox" name="checkbox-01"> Checkbox 01</label></li>
				<li><label><input type="checkbox" name="checkbox-01"> Checkbox 01</label></li>
			</ul>
		</div>
		<div class="form-item">
			<input type="submit" value="send" title="send">
		</div>
	</fieldset>
</form>

Fieldset border

<form action="index_submit" method="get" accept-charset="utf-8" class="w3-6">
	<fieldset class="fieldset-border">
		<legend>Fieldset legend</legend>
		<div class="form-item">
			<label for="inputText1">Input type text</label>
			<input class="" name="inputText1" value="">
		</div>
		<div class="form-item">
			<label for="inputText1">Input type password</label>
			<input class="" type="password" name="inputText1" value="password">
		</div>
		<div class="form-item">
			<input type="submit" value="send" title="send">
		</div>
	</fieldset>
</form>

Inline form

<form action="index_submit" method="get" accept-charset="utf-8" class="w3-6">
	<div class="form-item inline-form">
		<select name="select1" id="select1">
			<option value="">Mlle</option>
			<option value="">Mme</option>
			<option value="">M</option>
		</select>
		<input class="" name="inputText1" value="">
		<input class="" type="password" name="inputText1" value="password">
		<input type="submit" value="send" title="send">
	</div>
</form>

form with grid

<form action="index_submit" method="get" accept-charset="utf-8" class="w3-6">
	<fieldset>
		<legend>fieldset legend</legend>
		<div class="il-grid">
			<div class="form-item span--1-2">
				<label for="form-item1">name</label>
				<input name="form-item1" value="">
			</div>
			<div class="form-item span--1-2">
				<label for="form-item2">lastname</label>
				<input name="form-item2" type="text">
			</div>
			<div class="form-item span--1-3">
				<label for="select1">Select</label>
				<select name="select1" id="select1">
					<option value="">option 1</option>
					<option value="">option 2</option>
					<option value="">option 3</option>
					<option value="">option 4</option>
					<option value="">option 5</option>
				</select>
			</div>
			<div class="form-item span--1-3">
				<label for="select1">Select</label>
				<select name="select1" id="select1">
					<option value="">option 1</option>
					<option value="">option 2</option>
					<option value="">option 3</option>
					<option value="">option 4</option>
					<option value="">option 5</option>
				</select>
			</div>
			<div class="form-item span--1-3">
				<label for="form-item2">Other</label>
				<input type="text" value="">
			</div>
			<div class="form-item span--1-1">
				<label for="">Choose your better option</label>
				<ul class="il-grid">
					<li class="span--1-5"><label><input type="checkbox" name="checkbox-01"> Checkbox 01</label></li>
					<li class="span--1-5"><label><input type="checkbox" name="checkbox-01"> Checkbox 02</label></li>
					<li class="span--1-5"><label><input type="checkbox" name="checkbox-01"> Checkbox 03</label></li>
					<li class="span--1-5"><label><input type="checkbox" name="checkbox-01"> Checkbox 04</label></li>
					<li class="span--1-5"><label><input type="checkbox" name="checkbox-01"> Checkbox 05</label></li>
				</ul>
			</div>
		</div>
			<div class="form-item">
				<input type="submit" value="send" title="send">
			</div>
	</fieldset>
</form>

Input group

.00

$ .00

Social link

http://

<div class="form-item input-group">
  <span class="input-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="form-item input-group">
  <input type="text" class="form-control">
  <span class="input-addon">.00</span>
</div>

<div class="form-item input-group">
  <span class="input-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-addon">.00</span>
</div>

<div class="form-item">
	<label for="social-url">Social link</label>
	<div class="input-group">
		<select class="input-addon" name="social-service-name" id="">
			<option value="">Choose…</option>
			<option value="Facebook">Facebook</option>
			<option value="Twitter">Twitter</option>
			<option value="Google+">Google+</option>
			<option value="LinkedIn">LinkedIn</option>
			<option value="Skype">Skype</option>
			<option value="Skype">Youtube</option>
		</select>
		<span class="input-addon">http://</span>
		<input type="text" id="social-url" name="social-url">
	</div>
</div>

Submit in input-addon

<form>
	<div class="form-item input-group">
		<input type="search">
		<div class="input-addon">
			<button type="submit">OK</button>
		</div>
	</div>
	<div class="form-item input-group">
		<input type="search">
		<div class="input-addon">
			<input type="submit" value="OK">
		</div>
	</div>
</form>

Notifications

Error notification

Lorem ipsum Pariatur sed minim tempor reprehenderit voluptate sit ea commodo dolor enim officia tempor in laborum velit ea ut.

<p class="notif error">
	Lorem ipsum Pariatur sed minim tempor reprehenderit voluptate sit ea commodo dolor enim officia tempor in laborum velit ea ut.
</p>

Notice notification

Lorem ipsum Pariatur sed minim tempor reprehenderit voluptate sit ea commodo dolor enim officia tempor in laborum velit ea ut.

<p class="notif notice">
	Lorem ipsum Pariatur sed minim tempor reprehenderit voluptate sit ea commodo dolor enim officia tempor in laborum velit ea ut.
</p>

Success notification

Lorem ipsum Pariatur sed minim tempor reprehenderit voluptate sit ea commodo dolor enim officia link text tempor in laborum velit ea ut.

<p class="notif success">
	Lorem ipsum Pariatur sed minim tempor reprehenderit voluptate sit ea commodo dolor enim officia <a href="#">link text</a> tempor in laborum velit ea ut.
</p>