Formage

Switch layouts:

Messages

Mandatory messages are not marked but optionnal are.

Error message.

Validation message.

Fieldset

Legend

Label

Input types

Text

Number

Password

E-mail

URL

Phone

Date

Time

Datetime local

Month

Week

Color

Range

File

Image file with capture option

Video file with capture option

Checkbox alone

Send me an e-mail please

Toggle switch

Group of checkboxes

Checkbox 1

Checkbox 2

Checkbox 3

Group of radio button

Radio button 1

Radio button 2

Radio button 3

Other field types

Textarea

Select

Select with option group

Select multiple

Input states

Field with placeholder

Field with help message Help message to complete the field.

Mandatory field

Optionnal field Optionnal

Disabled field

Error on the field Error message !

Valid field

Buttons

Link looking like a button Span looking like a button (such a stupid idea)

Captchas

Captcha is evil. 👺
Watch for alternatives!

Video Games Records

Name of record Time

Hour :

Minute .

Number

Name of record Speed

Kilometers par heure km/h

Name of record Distance

Kilomètress km

Mètres m

Centimères cm

Millimètres mm

Name of record Time

Jours d

Heures h

Minutes min

Secondes s

To do and ideas

Fields: let the choice between equal width or afforded width (depending on field lenght)
Radio buttons: add a version to display them as shiny buttons
Buttons: differentiate primary and secondary actions
Buttons: add disabled state
Messages: add HTML variants to display help and error messages under the field
Icons: for messages (error, validation, help, information) and buttons