lostplaces-frontend/components/03_Organisms/form/form.hbs

67 lines
3.2 KiB
Handlebars
Raw Normal View History

2020-07-31 13:14:45 +02:00
<form class="LP-Form">
<fieldset class="LP-Form__Fieldset">
<legend class="LP-Form__Legend">Basic data</legend>
2020-07-31 16:54:59 +02:00
<div class="LP-Form__Composition LP-Form__Composition--breakable">
2020-07-31 23:12:40 +02:00
<div class="LP-Form__Field">
<div class="LP-Input LP-Input--error">
<label for="input123" class="LP-Input__Label">First name</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="Peter"/>
<span class="LP-Input__Message">Field is required</span>
</div>
2020-07-31 23:12:40 +02:00
</div>
<div class="LP-Form__Field">
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">Last name</label>
<input type="text" id="input123" class="LP-Input__Field"/>
</div>
2020-07-31 23:12:40 +02:00
</div>
<div class="LP-Form__Field LP-Form__Field--narrower">
<div class="LP-Input LP-Input--disabled">
<label for="input123" class="LP-Input__Label">Age</label>
<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
</div>
</div>
</div>
2020-07-31 16:54:59 +02:00
<div class="LP-Form__Composition">
2020-07-31 23:12:40 +02:00
<div class="LP-Form__Field LP-Form__Field--wider LP-Input">
2020-07-31 16:54:59 +02:00
<label for="input123" class="LP-Input__Label">Street</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">We won't send any stalkers, promise</span>
2020-07-31 23:12:40 +02:00
</div>
2020-07-31 23:35:17 +02:00
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
2020-07-31 16:54:59 +02:00
<label for="input123" class="LP-Input__Label">House no</label>
<input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span>
2020-07-31 23:12:40 +02:00
</div>
2020-07-31 16:54:59 +02:00
</div>
<div class="LP-Form__Composition">
<div class="LP-Form__Field LP-Form__InfoText">
<p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
2020-08-12 18:29:08 +02:00
2020-07-31 16:54:59 +02:00
<div class="LP-Form__Composition">
2020-07-31 23:12:40 +02:00
<div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
2020-07-31 16:54:59 +02:00
<label for="input123" class="LP-Input__Label">Postal Code</label>
<input type="text" id="input123" class="LP-Input__Field"/>
2020-07-31 23:12:40 +02:00
</div>
<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
2020-07-31 16:54:59 +02:00
<label for="input123" class="LP-Input__Label">Town</label>
<input type="text" id="input123" class="LP-Input__Field"/>
2020-07-31 23:12:40 +02:00
</div>
2020-07-31 13:14:45 +02:00
</div>
2020-07-31 16:54:59 +02:00
<div class="LP-Form__Composition LP-Form__Composition--buttons">
2020-08-12 18:29:08 +02:00
<div class="LP-Form__Field LP-Form__Button LP-Input">
<input type="submit" class="LP-Button" value="Submit"/>
</div>
<div class="LP-Form__Field LP-Form__Button LP-Input LP-Input">
<button class="LP-Button LP-Button--cancel">Kenschäll</button>
2020-08-12 18:29:08 +02:00
</div>
</div>
2020-07-31 13:14:45 +02:00
</fieldset>
</form>