Puppertino

/

Examples

/

Forms

Forms

Forms, are one of the things that moves forward the interface, that's why in Puppertino, form elements come with ready to work, native validation. You can use the Forms using the CSS of Forms or dowloading the full CSS (Not recommended if you are just going to use this component).

Combo Box / Select.

The combo box, works exactly as expected, and you can change the width and height withoug affecting the overall composition of the element without problems. The combo box, by default, includes the class p-form-no-validate, but you can delete it if your wish.

Usage:

				
<div class="p-form-select p-form-no-validate">
	<select>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>
				
			

Text fields.

Text fields are everything that gets text into it, maybe passwords, emails, messages, anything you want. They can have validation, truncated text or be just plain without any of those things. The validated input relays on native HTML validation, so things like min-length or type will work perfectly on it. The validation will be visible once the user change the focus out of the element, and I prefer it this way to avoid users getting confused while they type. The no-validated input, retains it's style whenever the input is invalid or valid. The truncated text, adds three dots (...) at the end when of the input if the text overflows from it. The appearence of the dots takes place after the user changes the focus out of the element. Truncated text does not disable the validation.
It is also possible to add labels to every type of input without it affecting in any way the functionality of the input.
About the validation: You should always include a placeholder if you intent to use validation. If you don't intent to validate the input text, you can add the class p-form-no-validate.
Text fields can be textareas, or inputs.

Usage:

				

<input type="email" class="p-form-text" placeholder="email@example.com">

<input type="text" class="p-form-text p-form-no-validate" placeholder="free text">

<input type="email" class="p-form-text p-form-truncated" placeholder="Truncated text...">

<label class="p-form-label">Email: <input type="email" class="p-form-text" placeholder="email@example.com"></label>

				
			

Radio Buttons.

Radio buttons are similar to checkboxes, the main difference between radio buttons and checkboxes, is that radio buttons can only one of them in a group of radio buttons can be checked. Radio buttons does not count with any type of validation And count with a nice, simple animation. You can change the width and height of the radio buttons without being worried of breaking the composition.

Usage:

				

<label class="p-form-radio-cont">
	<input type="radio" name="example">
	<span> </span>
	Thing one
</label>

<label class="p-form-radio-cont">
	<input type="radio" name="example">
	<span> </span>
	Thing two
</label>

				
			

Checkboxes.

Checkboxes, allows the users to select several predefined values. Checkboxes in puppertino, just as Radio buttons, support changing the width and height without damaging the composition of the checkbox.

Usage:

				

<label class="p-form-checkbox-cont">
	<input type="checkbox" name="example">
	<span> </span>
	Thing one
</label>

<label class="p-form-checkbox-cont">
	<input type="checkbox" name="example">
	<span></span>
	Thing two
</label>

				
			

Switches.

Switches are part of those elements that are popular from iOS devices. And I wasn't going to add them until version 2.0 (Since I wanted to create a custom element) But a friend gave me the starter code and I just cleaned it a bit and made it look like the aesthetic of Puppertino. So big shotout to Ivanot because he essentially created this element :)

The Switch is essentially a checkbox, so you have to expect it to work as one. You can change the width and height of the switch changing the variable --width inside the class p-form-switch. Everything in the element will resize automatically so don't worry about breaking it on resize.

Usage:

				

<label class="p-form-switch">
	<input type="checkbox">
	<span></span>
</label>

				
			

Buttons.

These buttons, are a really small version of the buttons component of Puppertino, just to add send and cancel buttons.

Usage:

				

<input type="submit" class="p-form-button p-form-send">

<input type="reset" class="p-form-button">

				
			

More about validation.

Let's say that you are working on a type of validation that can't be done with native HTML validation, can you use the validation of Puppertino? Of course you can.

To use validations in your code, you can use the classes p-form-invalid and p-form-valid respectively. You can add or remove these classes as you may need. But don't add both at the same time. Also, here in Puppertino we don't encourage validation in real-time. Since we think is better for the user to see the validation once he changes the focus of the input.
Please be aware that using these classes will disable the default validation

Usage:

				

<input type="text" class="p-form-text p-form-invalid">

<input type="text" class="p-form-text p-form-valid">