Styled form elements for most cases, two variants for used/unused states
<form>
<section>
<div class="co-3">
<label for="one">Field title</label>
<input id="one" placeholder="text">
</div>
<div class="co-3">
<input type="submit" value="submit" />
</div>
</section>
</form>
this is the markup for form elements in columns
The form components – input fields, textareas, checkboxes and radio buttons (even a switch!) come complete with styled labels, error-classes, active state and placeholders. You can choose between solid or underlined inputs to indicate used/unused or just go with one style.
Just add .in-use for the plain/underline style. If an input deserves more attention than the other ones, you can add .primary to make the type bolder. Plus: inside <form> tags buttons and submits can be enlarged to fit the height of form fields by adding the .size-l class. Like the one above.
Form input fields behave like text or images within any column and always take up the full width.
solid form input
<div class="co-3">
<label for="one">solid</label>
<input id="one" placeholder="sth.">
</div>
transparent "in-use", with underline
<div class="co-3">
<label for="two">In-use</label>
<input id="two" value="sth."
class="in-use">
</div>
Obviously, forms built with these parts are not functional, but some functionality can be simulated with links. Either the entire <form action> has a simple (local) URL or a <button> uses onclick. Please note that the button inside a form has to have type="button" or it will trigger the form action.
form with action
<form action="….php">
<input type="submit" value="ok">
</form>
button with onclick
<button type="button" onclick="location.href='….xyz';">
ok
</button>
Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history