2021-10-31 21:33:19 +07:00
<!doctype html>
< html lang = "en" >
< head >
2023-01-16 22:13:30 +00:00
${require('./_head.html')
title="Forms"
2021-10-31 21:33:19 +07:00
description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports."
canonical="forms.html"
}
< / head >
< body >
${require('./_nav.html')}
2023-01-16 22:13:30 +00:00
2021-10-31 21:33:19 +07:00
< main class = "container" id = "docs" >
${require('./_sidebar.html') active="forms-link"}
2023-01-16 22:13:30 +00:00
2021-10-31 21:33:19 +07:00
< div role = "document" >
< section id = "forms" >
< hgroup >
2021-11-02 00:20:55 +07:00
< h1 > Forms< / h1 >
< h2 > All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.< / h2 >
2021-10-31 21:33:19 +07:00
< / hgroup >
< p > Inputs are < code > < i > width< / i > : < u > 100%< / u > ;< / code > by default. You can use < code > .grid< / code > inside a form.< / p >
2023-01-16 22:09:38 +00:00
< p > All native form elements are fully customizable and themeable with CSS variables.< / p >
2021-10-31 21:33:19 +07:00
< article aria-label = "Form example" >
< form >
< div class = "grid" >
< label for = "firstname" >
First name
< input type = "text" id = "firstname" name = "firstname" placeholder = "First name" required >
< / label >
< label for = "lastname" >
Last name
< input type = "text" id = "lastname" name = "lastname" placeholder = "Last name" required >
< / label >
< / div >
< label for = "email" > Email address< / label >
< input type = "email" id = "email" name = "email" placeholder = "Email address" required >
< small > We'll never share your email with anyone else.< / small >
< button type = "submit" aria-label = "Example button" onclick = "event.preventDefault()" > Submit< / button >
< / form >
< footer class = "code" >
< pre > < code > < < b > form< / b > >
< em > < !-- Grid --> < / em >
< < b > div< / b > < i > class< / i > =< u > "grid"< / u > >
< em > < !-- Markup example 1: input is inside label --> < / em >
< < b > label< / b > < i > for< / i > =< u > "firstname"< / u > >
First name
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > id< / i > =< u > "firstname"< / u > < i > name< / i > =< u > "firstname"< / u > < i > placeholder< / i > =< u > "First name"< / u > < i > required< / i > >
< /< b > label< / b > >
< < b > label< / b > < i > for< / i > =< u > "lastname"< / u > >
Last name
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > id< / i > =< u > "lastname"< / u > < i > name< / i > =< u > "lastname"< / u > < i > placeholder< / i > =< u > "Last name"< / u > < i > required< / i > >
< /< b > label< / b > >
< /< b > div< / b > >
< em > < !-- Markup example 2: input is after label --> < / em >
< < b > label< / b > < i > for< / i > =< u > "email"< / u > > Email address< /< b > label< / b > >
< < b > input< / b > < i > type< / i > =< u > "email"< / u > < i > id< / i > =< u > "email"< / u > < i > name< / i > =< u > "email"< / u > < i > placeholder< / i > =< u > "Email address"< / u > < i > required< / i > >
< < b > small< / b > > We'll never share your email with anyone else.< /< b > small< / b > >
< em > < !-- Button --> < / em >
< < b > button< / b > < i > type< / i > =< u > "submit"< / u > > Submit< /< b > button< / b > >
< /< b > form< / b > > < / code > < / pre >
< / footer >
< / article >
< p > Disabled and validation states:< / p >
< article aria-label = "Validation states examples" >
< form class = "grid" >
< input type = "text" placeholder = "Valid" aria-label = "Valid" aria-invalid = "false" >
< input type = "text" placeholder = "Invalid" aria-label = "Invalid" aria-invalid = "true" >
< input type = "text" placeholder = "Disabled" aria-label = "Disabled" disabled >
< input type = "text" value = "Readonly" aria-label = "Readonly" readonly >
< / form >
< footer class = "code" >
< pre > < code > < < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > placeholder< / i > =< u > "Valid"< / u > < i > aria-invalid< / i > =< u > "false"< / u > >
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > placeholder< / i > =< u > "Invalid"< / u > < i > aria-invalid< / i > =< u > "true"< / u > >
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > placeholder< / i > =< u > "Disabled"< / u > < i > disabled< / i > >
< < b > input< / b > < i > type< / i > =< u > "text"< / u > < i > value< / i > =< u > "Readonly"< / u > < i > readonly< / i > > < / code > < / pre >
< / footer >
< / article >
< p > < code > < < b > fieldset< / b > > < / code > is unstyled and acts as a container for radios and checkboxes, providing a consistent < code > < i > margin-bottom< / i > < / code > for the set.< / p >
< p > < code > < i > role< / i > =< u > "switch"< / u > < / code > on a < code > < i > type< / i > =< u > "checkbox"< / u > < / code > enable a custom switch.< / p >
< article aria-label = "Select, radios, checkboxes, switch examples" >
< label for = "fruit" > Fruit< / label >
< select id = "fruit" required >
< option value = "" selected > Select a fruit…< / option >
< option > Banana< / option >
< option > Watermelon< / option >
< option > Apple< / option >
< option > Orange< / option >
< option > Mango< / option >
< / select >
< fieldset >
< legend > Size< / legend >
< label for = "small" >
< input type = "radio" id = "small" name = "size" value = "small" checked >
Small
< / label >
< label for = "medium" >
< input type = "radio" id = "medium" name = "size" value = "medium" >
Medium
< / label >
< label for = "large" >
< input type = "radio" id = "large" name = "size" value = "large" >
Large
< / label >
2021-12-19 11:01:33 +00:00
< label for = "extralarge" >
< input type = "radio" id = "extralarge" name = "size" value = "extralarge" disabled >
Extra Large
< / label >
2021-10-31 21:33:19 +07:00
< / fieldset >
< fieldset >
< label for = "terms" >
< input type = "checkbox" id = "terms" name = "terms" >
I agree to the Terms and Conditions
< / label >
2021-12-19 11:01:33 +00:00
< label for = "terms_sharing" >
< input type = "checkbox" id = "terms_sharing" name = "terms_sharing" disabled checked >
I agree to share my information with partners
< / label >
2021-10-31 21:33:19 +07:00
< / fieldset >
< fieldset >
< label for = "switch" >
< input type = "checkbox" id = "switch" name = "switch" role = "switch" >
Publish on my profile
< / label >
2021-12-19 11:01:33 +00:00
< label for = "switch_disabled" >
< input type = "checkbox" id = "switch_disabled" name = "switch_disabled" role = "switch" disabled checked >
2022-02-06 10:59:18 +07:00
User must change password at next logon
2021-12-19 11:01:33 +00:00
< / label >
2021-10-31 21:33:19 +07:00
< / fieldset >
< footer class = "code" >
< pre > < code > < em > < !-- Select --> < / em >
< < b > label< / b > < i > for< / i > =< u > "fruit"< / u > > Fruit< /< b > label< / b > >
< < b > select< / b > < i > id< / i > =< u > "fruit"< / u > < i > required< / i > >
< < b > option< / b > < i > value< / i > =< u > ""< / u > < i > selected< / i > > Select a fruit…< /< b > option< / b > >
< < b > option< / b > > …< /< b > option< / b > >
< /< b > select< / b > >
< em > < !-- Radios --> < / em >
< < b > fieldset< / b > >
< < b > legend< / b > > Size< /< b > legend< / b > >
< < b > label< / b > < i > for< / i > =< u > "small"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "small"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "small"< / u > < i > checked< / i > >
Small
< /< b > label< / b > >
< < b > label< / b > < i > for< / i > =< u > "medium"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "medium"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "medium"< / u > >
Medium
< /< b > label< / b > >
< < b > label< / b > < i > for< / i > =< u > "large"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "large"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "large"< / u > >
Large
< /< b > label< / b > >
2021-12-19 11:01:33 +00:00
< < b > label< / b > < i > for< / i > =< u > "extralarge"< / u > >
< < b > input< / b > < i > type< / i > =< u > "radio"< / u > < i > id< / i > =< u > "extralarge"< / u > < i > name< / i > =< u > "size"< / u > < i > value< / i > =< u > "extralarge"< / u > < i > disabled< / i > >
Extra Large
< /< b > label< / b > >
2021-10-31 21:33:19 +07:00
< /< b > fieldset< / b > >
2021-12-23 23:55:56 +07:00
< em > < !-- Checkboxes --> < / em >
2021-10-31 21:33:19 +07:00
< < b > fieldset< / b > >
< < b > label< / b > < i > for< / i > =< u > "terms"< / u > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > < i > id< / i > =< u > "terms"< / u > < i > name< / i > =< u > "terms"< / u > >
I agree to the Terms and Conditions
< /< b > label< / b > >
2021-12-19 11:01:33 +00:00
< < b > label< / b > < i > for< / i > =< u > "terms_sharing"< / u > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > < i > id< / i > =< u > "terms_sharing"< / u > < i > name< / i > =< u > "terms_sharing"< / u > < i > disabled checked< / i > >
I agree to share my information with partners
< /< b > label< / b > >
2021-10-31 21:33:19 +07:00
< /< b > fieldset< / b > >
2021-12-23 23:55:56 +07:00
< em > < !-- Switches --> < / em >
2021-10-31 21:33:19 +07:00
< < b > fieldset< / b > >
< < b > label< / b > < i > for< / i > =< u > "switch"< / u > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > < i > id< / i > =< u > "switch"< / u > < i > name< / i > =< u > "switch"< / u > < i > role< / i > =< u > "switch"< / u > >
Publish on my profile
< /< b > label< / b > >
2021-12-19 11:01:33 +00:00
< < b > label< / b > < i > for< / i > =< u > "switch_disabled"< / u > >
< < b > input< / b > < i > type< / i > =< u > "checkbox"< / u > < i > id< / i > =< u > "switch_disabled"< / u > < i > name< / i > =< u > "switch_disabled"< / u > < i > role< / i > =< u > "switch_disabled"< / u > < i > disabled checked< / i > >
2022-02-06 10:59:18 +07:00
User must change password at next logon
2021-12-19 11:01:33 +00:00
< /< b > label< / b > >
2021-10-31 21:33:19 +07:00
< /< b > fieldset< / b > > < / code > < / pre >
< / footer >
< / article >
< p > You can change a checkbox to an indeterminate state by setting the < code > < i > indeterminate< / i > < / code > property to < code > < u > true< / u > < / code > < / p >
< article aria-label = "Indeterminate checkbox example" >
< label for = "indeterminate-checkbox" >
< input type = "checkbox" id = "indeterminate-checkbox" name = "indeterminate-checkbox" >
Select all
< / label >
< script > document . getElementById ( 'indeterminate-checkbox' ) . indeterminate = true ; < / script >
< footer class = "code" >
< pre > < code > < < b > script< / b > >
< i > document< / i > .< b > getElementById< / b > (< u > 'indeterminate-checkbox'< / u > ).< i > indeterminate< / i > = < u > true< / u > ;
< /< b > script< / b > > < / code > < / pre >
< / footer >
< / article >
2022-03-09 04:43:24 +03:00
2021-10-31 21:33:19 +07:00
< p > Others input types:< / p >
2022-03-13 11:01:44 +07:00
< article aria-label = "Search, file browser, range slider, date, time, color examples" >
< input type = "search" id = "search" name = "search" placeholder = "Search" >
2021-10-31 21:33:19 +07:00
< label for = "file" > File browser
< input type = "file" id = "file" name = "file" >
< / label >
< label for = "range" > Range slider
< input type = "range" min = "0" max = "100" value = "50" id = "range" name = "range" >
< / label >
< label for = "date" > Date
< input type = "date" id = "date" name = "date" >
< / label >
< label for = "time" > Time
< input type = "time" id = "time" name = "time" >
< / label >
< label for = "color" > Color
< input type = "color" id = "color" name = "color" value = "#0eaaaa" >
< / label >
< footer class = "code" >
2022-03-13 11:01:44 +07:00
< pre > < code > < em > < !-- Search --> < / em >
< < b > input< / b > < i > type< / i > =< u > "search"< / u > < i > id< / i > =< u > "search"< / u > < i > name< / i > =< u > "search"< / u > < i > placeholder< / i > =< u > "Search"< / u > >
2023-01-16 22:13:30 +00:00
2022-03-13 11:01:44 +07:00
< !-- File browser --> < / em >
2021-10-31 21:33:19 +07:00
< < b > label< / b > < i > for< / i > =< u > "file"< / u > > File browser
< < b > input< / b > < i > type< / i > =< u > "file"< / u > < i > id< / i > =< u > "file"< / u > < i > name< / i > =< u > "file"< / u > >
< /< b > label< / b > >
< em > < !-- Range slider --> < / em >
< < b > label< / b > < i > for< / i > =< u > "range"< / u > > Range slider
< < b > input< / b > < i > type< / i > =< u > "range"< / u > < i > min< / i > =< u > "0"< / u > < i > max< / i > =< u > "100"< / u > < i > value< / i > =< u > "50"< / u > < i > id< / i > =< u > "range"< / u > < i > name< / i > =< u > "range"< / u > >
< /< b > label< / b > >
< em > < !-- Date --> < / em >
< < b > label< / b > < i > for< / i > =< u > "date"< / u > > Date
< < b > input< / b > < i > type< / i > =< u > "date"< / u > < i > id< / i > =< u > "date"< / u > < i > name< / i > =< u > "date"< / u > >
< /< b > label< / b > >
< em > < !-- Time --> < / em >
< < b > label< / b > < i > for< / i > =< u > "time"< / u > > Time
< < b > input< / b > < i > type< / i > =< u > "time"< / u > < i > id< / i > =< u > "time"< / u > < i > name< / i > =< u > "time"< / u > >
< /< b > label< / b > >
< em > < !-- Color --> < / em >
< < b > label< / b > < i > for< / i > =< u > "color"< / u > > Color
< < b > input< / b > < i > type< / i > =< u > "color"< / u > < i > id< / i > =< u > "color"< / u > < i > name< / i > =< u > "color"< / u > < i > value< / i > =< u > "#0eaaaa"< / u > >
< /< b > label< / b > > < / code > < / pre >
< / footer >
< / article >
< / section >
${require('./_footer.html')}
2023-01-16 22:13:30 +00:00
2021-10-31 21:33:19 +07:00
< / div >
< / main >
< script src = "js/commons.min.js" > < / script >
< / body >
< / html >
