2021-12-27 17:33:16 +05:30
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width,initial-scale=1" > < title > Forms • Pico.css< / title > < meta name = "description" content = "All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports." > < link rel = "shortcut icon" href = "https://picocss.com/favicon.ico" > < link rel = "stylesheet" href = "../css/pico.min.css" > < link rel = "stylesheet" href = "css/pico.docs.min.css" > < link rel = "canonical" href = "https://www.picocss.com/docs/forms.html" > < / head > < body > < nav class = "container-fluid" > < ul > < li > < a href = "https://picocss.com" aria-label = "Back home" > < svg aria-hidden = "true" focusable = "false" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1000 1000" height = "56px" > < path fill = "currentColor" d = "M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z" / > < / svg > < / a > < / li > < li > Documentation< / li > < / ul > < ul > < li > < a href = "https://picocss.com#examples" class = "secondary" > Examples< / a > < / li > < li > < a href = "./" class = "secondary" > Docs< / a > < / li > < li > < a href = "https://github.com/picocss/pico" class = "contrast" aria-label = "Pico GitHub repository" > < svg aria-hidden = "true" focusable = "false" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 496 512" height = "16px" > < path fill = "currentColor" d = "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" > < / path > < / svg > < / a > < / li > < / ul > < / nav > < main class = "container" id = "docs" > < aside > < nav class = "closed-on-mobile" > < a href = "./" class = "secondary" id = "toggle-docs-navigation" > < svg xmlns = "http://www.w3.org/2000/svg" class = "expand" fill = "currentColor" viewBox = "0 0 16 16" height = "16px" > < title > Expand< / title > < path fill-rule = "evenodd" d = "M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z" > < / path > < / svg > < svg xmlns = "http://www.w3.org/2000/svg" class = "collapse" fill = "currentColor" viewBox = "0 0 16 16" height = "16px" > < title > Collapse< / title > < path fill-rule = "evenodd" d = "M1 8a . 5 . 5 0 0 1 . 5- . 5h13a . 5 . 5 0 0 1 0 1h-13A . 5 . 5 0 0 1 1 8zm7-8a . 5 . 5 0 0 1 . 5 . 5v3 . 793l1 . 146-1 . 147a . 5 . 5 0 0 1 . 708 . 708l-2 2a . 5 . 5 0 0 1- . 708 0l-2-2a . 5 . 5 0 1 1 . 708- . 708L7 . 5 4 . 293V . 5A . 5 . 5 0 0 1 8 0zm- . 5 11 . 707l-1 . 146 1 . 147a . 5 . 5 0 0 1- . 708- . 708l2-2a . 5 . 5 0 0 1 . 708 0l2 2a . 5 . 5 0 0 1- . 708 . 708L8 . 5 11 . 707V15 . 5a . 5
2021-10-31 21:33:19 +07:00
< 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 = "disabled" > < input type = "text" value = "Readonly" aria-label = "Readonly" 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 > >
2021-12-23 23:53:29 +07:00
< < 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 = "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 = "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 > < label for = "extralarge" > < input type = "radio" id = "extralarge" name = "size" value = "extralarge" disabled = "disabled" > Extra Large< / label > < / fieldset > < fieldset > < label for = "terms" > < input type = "checkbox" id = "terms" name = "terms" > I agree to the Terms and Conditions< / label > < label for = "terms_sharing" > < input type = "checkbox" id = "terms_sharing" name = "terms_sharing" disabled = "disabled" checked = "checked" > I agree to share my information with partners< / label > < / fieldset > < fieldset > < label for = "switch" > < input type = "checkbox" id = "switch" name = "switch" role = "switch" > Publish on my profile< / label > < label for = "switch_disabled" > < input type = "checkbox" id = "switch_disabled" name = "switch_disabled" role = "switch" disabled = "disabled" checked = "checked" > Publish on my profile my accomplishments< / label > < / fieldset > < footer class = "code" > < pre > < code > < em > < !-- Select --> < / em >
2021-10-31 21:33:19 +07:00
< < 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-23 23:53:29 +07:00
< /< b > label< / b > >
< < 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-23 23:53:29 +07: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-23 23:53:29 +07: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 > >
Publish on my profile my accomplishments
< /< 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 = ! 0 < / 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 > < p > Others input types:< / p > < article aria-label = "File browser, range slider, date, time, color examples" > < 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" > < pre > < code > < em > < !-- File browser --> < / em >
< < 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 > < footer > < hr > < p > < small > Code licensed < a href = "https://github.com/picocss/pico/blob/master/LICENSE.md" class = "secondary" > MIT< / a > < / small > < / p > < / footer > < / div > < / main > < script src = "js/commons.min.js" > < / script > < / body > < / html >
