Mga halimbawa at mga alituntunin sa paggamit para sa mga istilo ng kontrol ng form, mga pagpipilian sa layout, at mga custom na bahagi para sa paggawa ng malawak na iba't ibang mga form.
Pangkalahatang-ideya
Lumalawak ang mga kontrol sa form ng Bootstrap sa aming mga istilo ng Na-reboot na form na may mga klase. Gamitin ang mga klaseng ito para mag-opt in sa kanilang mga naka-customize na display para sa mas pare-parehong pag-render sa mga browser at device.
Tiyaking gumamit ng naaangkop na typekatangian sa lahat ng mga input (hal, emailpara sa email address o numberpara sa numerical na impormasyon) upang samantalahin ang mga mas bagong kontrol sa input tulad ng pag-verify ng email, pagpili ng numero, at higit pa.
Narito ang isang mabilis na halimbawa upang ipakita ang mga istilo ng form ng Bootstrap. Panatilihin ang pagbabasa para sa dokumentasyon sa mga kinakailangang klase, layout ng form, at higit pa.
Mga kontrol sa form
Ang mga kontrol sa textual form—tulad ng <input>s, <select>s, at <textarea>s—ay naka-istilo sa .form-controlklase. Kasama ang mga istilo para sa pangkalahatang hitsura, estado ng focus, laki, at higit pa.
Siguraduhing tuklasin ang aming mga custom na form para sa karagdagang istilo <select>.
Para sa mga input ng file, palitan ang .form-controlpara sa .form-control-file.
Pagsusukat
Itakda ang mga taas gamit ang mga klase tulad ng .form-control-lgat .form-control-sm.
Basahin lamang
Idagdag ang readonlyboolean attribute sa isang input para maiwasan ang pagbabago ng value ng input. Ang mga read-only na input ay lumilitaw na mas magaan (tulad ng mga hindi pinaganang input), ngunit panatilihin ang karaniwang cursor.
Readonly plain text
Kung gusto mong magkaroon ng mga <input readonly>elemento sa iyong form na naka-istilo bilang plain text, gamitin ang .form-control-plaintextklase upang alisin ang default na pag-istilo ng field ng form at panatilihin ang tamang margin at padding.
Mga Input ng Saklaw
Itakda ang pahalang na na-scroll na mga input ng saklaw gamit ang .form-control-range.
Mga checkbox at radyo
Ang mga default na checkbox at radyo ay pinapabuti sa tulong ng .form-check, isang solong klase para sa parehong mga uri ng input na nagpapabuti sa layout at pag-uugali ng kanilang mga elemento ng HTML . Ang mga checkbox ay para sa pagpili ng isa o ilang mga opsyon sa isang listahan, habang ang mga radyo ay para sa pagpili ng isang opsyon mula sa marami.
Sinusuportahan ang mga naka-disable na checkbox at radyo, ngunit para magbigay ng not-allowedcursor sa hover ng magulang <label>, kakailanganin mong idagdag ang disabledattribute sa .form-check-input. Ang attribute na hindi pinagana ay maglalapat ng mas magaan na kulay upang makatulong na ipahiwatig ang katayuan ng input.
Ang mga checkbox at paggamit ng radyo ay binuo upang suportahan ang HTML-based na pagpapatunay ng form at magbigay ng maikli at naa-access na mga label. Dahil dito, ang ating <input>s at <label>s ay magkakapatid na elemento kumpara sa isang <input>within a <label>. Ito ay bahagyang mas verbose dahil kailangan mong tukuyin idat formga katangian upang maiugnay ang <input>at <label>.
Default (nakasalansan)
Bilang default, ang anumang bilang ng mga checkbox at radyo na agarang magkakapatid ay patayo na isalansan at naaangkop na lagyan ng espasyo sa .form-check.
Nasa linya
Igrupo ang mga checkbox o radyo sa parehong pahalang na hilera sa pamamagitan ng pagdaragdag .form-check-inlinesa alinmang .form-check.
Nang walang mga label
Idagdag .position-staticsa mga input sa loob .form-checkna walang anumang label na text. Tandaan na magbigay pa rin ng ilang anyo ng label para sa mga pantulong na teknolohiya (halimbawa, gamit ang aria-label).
Layout
Dahil nalalapat ang Bootstrap display: blockat width: 100%sa halos lahat ng aming mga kontrol sa form, ang mga form ay sa pamamagitan ng default na stack patayo. Maaaring gamitin ang mga karagdagang klase upang pag-iba-ibahin ang layout na ito sa isang per-form na batayan.
Bumuo ng mga grupo
Ang .form-groupklase ay ang pinakamadaling paraan upang magdagdag ng ilang istraktura sa mga form. Nagbibigay ito ng flexible na klase na naghihikayat ng wastong pagpapangkat ng mga label, kontrol, opsyonal na text ng tulong, at pagmemensahe sa pagpapatunay ng form. Bilang default nalalapat lang ito margin-bottom, ngunit kumukuha ito ng mga karagdagang istilo kung .form-inlinekinakailangan. Gamitin ito kasama <fieldset>ng s, <div>s, o halos anumang iba pang elemento.
Form grid
Maaaring bumuo ng mas kumplikadong mga form gamit ang aming mga klase sa grid. Gamitin ang mga ito para sa mga layout ng form na nangangailangan ng maraming column, iba't ibang lapad, at karagdagang mga opsyon sa pag-align.
Bumuo ng hilera
Maaari ka ring magpalit .rowng .form-row, isang variation ng aming karaniwang grid row na nag-o-override sa mga default na column gutters para sa mas mahigpit at mas compact na mga layout.
Ang mas kumplikadong mga layout ay maaari ding gawin gamit ang grid system.
Pahalang na anyo
Gumawa ng mga pahalang na form gamit ang grid sa pamamagitan ng pagdaragdag ng .rowklase upang bumuo ng mga grupo at paggamit ng mga .col-*-*klase upang tukuyin ang lapad ng iyong mga label at kontrol. Tiyaking idagdag din .col-form-labelsa iyong <label>mga s upang patayo silang nakasentro sa kanilang mga nauugnay na kontrol sa form.
Kung minsan, maaaring kailangan mong gumamit ng margin o padding utilities para magawa ang perpektong pagkakahanay na kailangan mo. Halimbawa, inalis namin ang padding-toplabel sa aming nakasalansan na radio inputs para mas mai-align ang text baseline.
Horizontal form na sukat ng label
Siguraduhing gamitin .col-form-label-smo .col-form-label-lgsa iyong mga <label>o <legend>para masundan nang tama ang laki ng .form-control-lgat .form-control-sm.
Pagsusukat ng column
Gaya ng ipinakita sa mga nakaraang halimbawa, pinapayagan ka ng aming grid system na maglagay ng anumang bilang ng .cols sa loob ng isang .rowo .form-row. Hahatiin nila nang pantay ang magagamit na lapad sa pagitan nila. Maaari ka ring pumili ng isang subset ng iyong mga column na kukuha ng mas marami o mas kaunting espasyo, habang ang mga natitirang .cols ay pantay na hinahati ang iba, na may mga partikular na klase ng column tulad ng .col-7.
Auto-sizing
Ang halimbawa sa ibaba ay gumagamit ng isang flexbox utility upang patayo na igitna ang mga nilalaman at mga pagbabago .colupang .col-autoang iyong mga column ay kumukuha lamang ng maraming espasyo kung kinakailangan. Maglagay ng isa pang paraan, ang mga laki ng haligi mismo batay sa mga nilalaman.
Maaari mong muling i-remix iyon sa mga klase ng column na tukoy sa laki.
Gamitin ang .form-inlineklase upang magpakita ng serye ng mga label, mga kontrol sa form, at mga pindutan sa isang pahalang na hilera. Ang mga kontrol ng form sa loob ng mga inline na form ay bahagyang nag-iiba mula sa kanilang mga default na estado.
Ang mga kontrol ay display: flex, nagko-collapse ng anumang HTML white space at nagbibigay-daan sa iyong magbigay ng alignment control na may mga spacing at flexbox utilities.
Ang mga control at input group ay natatanggap width: autoupang i-override ang Bootstrap default width: 100%.
Ang mga kontrol ay lalabas lamang inline sa mga viewport na hindi bababa sa 576px ang lapad upang i-account ang mga makitid na viewport sa mga mobile device.
Maaaring kailanganin mong manu-manong tugunan ang lapad at pagkakahanay ng mga indibidwal na kontrol ng form na may mga kagamitan sa pagpupuwang (tulad ng ipinapakita sa ibaba). Panghuli, siguraduhing palaging magsama ng a <label>sa bawat kontrol ng form, kahit na kailangan mo itong itago mula sa mga bisitang hindi screenreader na may .sr-only.
Sinusuportahan din ang mga kontrol at pagpili ng custom na form.
Mga alternatibo sa mga nakatagong label
Magkakaroon ng problema sa iyong mga form ang mga pantulong na teknolohiya gaya ng mga screen reader kung hindi ka magsasama ng label para sa bawat input. Para sa mga inline na form na ito, maaari mong itago ang mga label gamit ang .sr-onlyklase. May mga karagdagang alternatibong paraan ng pagbibigay ng label para sa mga pantulong na teknolohiya, gaya ng aria-label, aria-labelledbyo titleattribute. Kung wala sa mga ito ang naroroon, ang mga pantulong na teknolohiya ay maaaring gumamit ng placeholderkatangian, kung mayroon, ngunit tandaan na ang paggamit ng placeholderbilang kapalit para sa iba pang mga paraan ng pag-label ay hindi pinapayuhan.
Text ng tulong
Maaaring gawin ang text ng tulong sa antas ng block sa mga form gamit ang .form-text(dating kilala bilang .help-blocksa v3). Ang inline na text ng tulong ay maaaring maipatupad nang may kakayahang umangkop gamit ang anumang inline na elemento ng HTML at mga utility class tulad ng .text-muted.
Pag-uugnay ng text ng tulong sa mga kontrol ng form
Ang text ng tulong ay dapat na tahasang nauugnay sa kontrol ng form na nauugnay sa paggamit ng aria-describedbykatangian. Titiyakin nito na ang mga pantulong na teknolohiya—gaya ng mga screen reader—ay iaanunsyo ang text ng tulong na ito kapag ang user ay tumutok o pumasok sa kontrol.
Ang teksto ng tulong sa ibaba ng mga input ay maaaring i-istilo ng .form-text. Kasama sa klase na ito display: blockat nagdaragdag ng ilang nangungunang margin para sa madaling pagpupuwang mula sa mga input sa itaas.
Ang iyong password ay dapat na 8-20 character ang haba, naglalaman ng mga titik at numero, at hindi dapat maglaman ng mga puwang, espesyal na character, o emoji.
Ang inline na text ay maaaring gumamit ng anumang tipikal na inline na elemento ng HTML (maging ito ay <small>, <span>, o iba pa) na walang iba kundi isang utility class.
Mga hindi pinaganang form
Idagdag ang disabledkatangian ng boolean sa isang input upang maiwasan ang mga pakikipag-ugnayan ng user at gawin itong mas magaan.
Idagdag ang disabledattribute sa isang <fieldset>upang i-disable ang lahat ng kontrol sa loob.
Caveat na may mga anchor
Bilang default, ituturing ng mga browser ang lahat ng mga kontrol ng native na form ( <input>, <select>at mga <button>elemento) sa loob ng isang <fieldset disabled>bilang hindi pinagana, na pumipigil sa parehong mga pakikipag-ugnayan sa keyboard at mouse sa mga ito. Gayunpaman, kung kasama rin sa iyong form <a ... class="btn btn-*">ang mga elemento, bibigyan lamang ang mga ito ng istilong pointer-events: none. Gaya ng nabanggit sa seksyon tungkol sa naka- disable na estado para sa mga button (at partikular sa sub-section para sa mga elemento ng anchor), ang CSS property na ito ay hindi pa na-standardize at hindi pa ganap na sinusuportahan sa Internet Explorer 10, at hindi mapipigilan ang mga user ng keyboard na maging kayang ituon o i-activate ang mga link na ito. Kaya para maging ligtas, gumamit ng custom na JavaScript upang huwag paganahin ang mga naturang link.
Cross-browser compatibility
Habang ilalapat ng Bootstrap ang mga istilong ito sa lahat ng browser, hindi ganap na sinusuportahan ng Internet Explorer 11 at mas mababa ang disabledkatangian sa isang <fieldset>. Gumamit ng custom na JavaScript upang huwag paganahin ang fieldset sa mga browser na ito.
Pagpapatunay
Magbigay ng mahalaga, naaaksyunan na feedback sa iyong mga user na may HTML5 form validation– available sa lahat ng aming sinusuportahang browser . Pumili mula sa default na feedback sa pagpapatunay ng browser, o ipatupad ang mga custom na mensahe gamit ang aming mga built-in na klase at panimulang JavaScript.
Kasalukuyan naming inirerekomenda ang paggamit ng mga custom na istilo ng pagpapatunay, dahil ang mga default na mensahe ng pagpapatunay ng native browser ay hindi palaging nakalantad sa mga pantulong na teknolohiya sa lahat ng mga browser (lalo na, ang Chrome sa desktop at mobile).
Paano ito gumagana
Narito kung paano gumagana ang pagpapatunay ng form sa Bootstrap:
Ang pagpapatunay ng form ng HTML ay inilalapat sa pamamagitan ng dalawang pseudo-class ng CSS, :invalidat :valid. Nalalapat ito sa <input>, <select>, at <textarea>mga elemento.
Sinasaklaw ng Bootstrap ang :invalidat mga :validistilo sa parent .was-validatedclass, karaniwang inilalapat sa <form>. Kung hindi, lalabas ang anumang kinakailangang field na walang value bilang di-wasto sa pag-load ng page. Sa ganitong paraan, maaari mong piliin kung kailan isaaktibo ang mga ito (karaniwang pagkatapos subukan ang pagsusumite ng form).
Upang i-reset ang hitsura ng form (halimbawa, sa kaso ng mga dynamic na pagsusumite ng form gamit ang AJAX), alisin ang .was-validatedklase mula sa <form>muli pagkatapos ng pagsusumite.
Bilang isang fallback, .is-invalidat .is-validang mga klase ay maaaring gamitin sa halip na ang mga pseudo-class para sa server side validation . Hindi sila nangangailangan ng .was-validatedklase ng magulang.
Dahil sa mga hadlang sa kung paano gumagana ang CSS, hindi namin (sa kasalukuyan) maglapat ng mga istilo sa isang <label>nauuna sa kontrol ng form sa DOM nang walang tulong ng custom na JavaScript.
Sinusuportahan ng lahat ng modernong browser ang constraint validation API , isang serye ng mga pamamaraan ng JavaScript para sa pagpapatunay ng mga kontrol sa form.
Maaaring gamitin ng mga mensahe ng feedback ang mga default ng browser (iba-iba para sa bawat browser, at hindi mai-istilo sa pamamagitan ng CSS) o ang aming mga custom na istilo ng feedback na may karagdagang HTML at CSS.
Maaari kang magbigay ng mga custom na validity na mensahe setCustomValiditysa JavaScript.
Sa pag-iisip na iyon, isaalang-alang ang mga sumusunod na demo para sa aming mga istilo ng pagpapatunay ng custom na form, opsyonal na mga klase sa gilid ng server, at mga default ng browser.
Mga custom na istilo
Para sa custom na Bootstrap form validation messages, kakailanganin mong idagdag ang novalidateboolean attribute sa iyong <form>. Hindi nito pinapagana ang default na feedback tooltip ng browser, ngunit nagbibigay pa rin ng access sa mga form validation API sa JavaScript. Subukang isumite ang form sa ibaba; haharangin ng aming JavaScript ang button na isumite at maghahatid ng feedback sa iyo.
Kapag sinusubukang isumite, makikita mo ang :invalidat mga :validistilong inilapat sa iyong mga kontrol sa form.
Mga default ng browser
Hindi interesado sa mga mensahe ng feedback sa custom na pagpapatunay o pagsulat ng JavaScript upang baguhin ang mga gawi ng form? Lahat ng mabuti, maaari mong gamitin ang mga default ng browser. Subukang isumite ang form sa ibaba. Depende sa iyong browser at OS, makakakita ka ng bahagyang naiibang istilo ng feedback.
Bagama't hindi mai-istilo ang mga istilo ng feedback na ito gamit ang CSS, maaari mo pa ring i-customize ang text ng feedback sa pamamagitan ng JavaScript.
Sa panig ng server
Inirerekomenda namin ang paggamit ng pagpapatunay sa panig ng kliyente, ngunit kung sakaling kailanganin mo ang panig ng server, maaari mong isaad ang mga di-wasto at wastong mga field ng form na may .is-invalidat .is-valid. Tandaan na .invalid-feedbacksinusuportahan din sa mga klase na ito.
Mga sinusuportahang elemento
Ang aming mga halimbawang form ay nagpapakita ng mga katutubong teksto sa <input>itaas, ngunit ang mga istilo ng pagpapatunay ng form ay magagamit din para sa aming mga custom na kontrol ng form.
Mga tooltip
Kung pinapayagan ito ng iyong layout ng form, maaari mong palitan ang mga .{valid|invalid}-feedbackklase para sa mga .{valid|invalid}-tooltipklase upang magpakita ng feedback sa pagpapatunay sa isang naka-istilong tooltip. Tiyaking may kasamang magulang position: relativepara sa pagpoposisyon ng tooltip. Sa halimbawa sa ibaba, mayroon na nito ang aming mga klase sa column, ngunit maaaring mangailangan ng alternatibong setup ang iyong proyekto.
Mga custom na form
Para sa higit pang pagpapasadya at pagkakapare-pareho ng cross browser, gamitin ang aming ganap na custom na mga elemento ng form upang palitan ang mga default ng browser. Binuo ang mga ito sa ibabaw ng semantic at naa-access na markup, kaya solidong kapalit ang mga ito para sa anumang default na kontrol sa form.
Mga checkbox at radyo
Ang bawat checkbox at radyo ay nakabalot sa isang <div>kasama ng isang kapatid <span>upang gawin ang aming custom na kontrol at isang <label>para sa kasamang teksto. Sa istruktura, ito ay kapareho ng diskarte sa aming default .form-check.
Ginagamit namin ang sibling selector ( ~) para sa lahat ng aming <input>estado—tulad ng :checked—upang maayos na istilo ang aming custom na indicator ng form. Kapag pinagsama sa .custom-control-labelklase, maaari rin nating i-istilo ang teksto para sa bawat item batay sa <input>estado ng 's.
Itinatago namin ang default <input>gamit ang opacityat ginagamit ang .custom-control-labelupang bumuo ng bagong tagapagpahiwatig ng custom na form sa lugar nito na may ::beforeat ::after. Sa kasamaang palad, hindi kami makakagawa ng custom na isa mula sa dahil hindi gumagana <input>ang CSS sa elementong iyon.content
Sa mga naka-check na estado, gumagamit kami ng base64 na naka-embed na SVG na mga icon mula sa Open Iconic . Nagbibigay ito sa amin ng pinakamahusay na kontrol para sa pag-istilo at pagpoposisyon sa mga browser at device.
Mga checkbox
Magagamit din ng mga custom na checkbox ang :indeterminatepseudo class kapag manu-manong itinakda sa pamamagitan ng JavaScript (walang available na HTML attribute para sa pagtukoy nito).
Kung gumagamit ka ng jQuery, ang isang bagay na tulad nito ay sapat na:
Mga radyo
Nasa linya
Hindi pinagana
Maaari ding i-disable ang mga custom na checkbox at radyo. Idagdag ang disabledboolean attribute sa <input>at ang custom na indicator at paglalarawan ng label ay awtomatikong mai-istilo.
Pumili ng menu
Ang mga custom na <select>menu ay nangangailangan lamang ng isang custom na klase, .custom-selectupang ma-trigger ang mga custom na estilo. Ang mga custom na istilo ay limitado sa <select>unang hitsura ni at hindi maaaring baguhin ang mga <option>s dahil sa mga limitasyon ng browser.
Maaari ka ring pumili mula sa maliliit at malalaking custom na pinili upang tumugma sa aming mga input ng text na may parehong laki.
Ang multiplekatangian ay sinusuportahan din:
Tulad ng sizekatangian:
Saklaw
Gumawa ng mga custom <input type="range">na kontrol gamit ang .custom-range. Ang track (ang background) at thumb (ang halaga) ay parehong naka-istilo upang lumitaw nang pareho sa mga browser. Dahil ang IE at Firefox lamang ang sumusuporta sa "pagpupuno" sa kanilang track mula sa kaliwa o kanan ng hinlalaki bilang isang paraan upang biswal na ipahiwatig ang pag-unlad, hindi namin ito sinusuportahan sa kasalukuyan.
Ang mga input ng range ay may mga implicit na value para sa minat max— 0at 100, ayon sa pagkakabanggit. Maaari kang tumukoy ng mga bagong halaga para sa mga gumagamit ng minat mga maxkatangian.
Bilang default, ang mga input ng range ay "snap" sa mga halaga ng integer. Upang baguhin ito, maaari kang tumukoy ng stephalaga. Sa halimbawa sa ibaba, doble namin ang bilang ng mga hakbang sa pamamagitan ng paggamit ng step="0.5".
File browser
Ang pag-input ng file ay ang pinakamakulit sa grupo at nangangailangan ng karagdagang JavaScript kung gusto mong i-hook up ang mga ito gamit ang functional Choose file... at piniling file name text.
Itinatago namin ang default na file sa <input>pamamagitan opacityng at sa halip ay i-istilo ang <label>. Ang pindutan ay nabuo at nakaposisyon na may ::after. Panghuli, ipinapahayag namin ang isang widthat heightsa <input>para sa wastong espasyo para sa nakapalibot na nilalaman.
Pagsasalin o pagpapasadya ng mga string
Ang :lang()pseudo-class ay ginagamit upang payagan ang pagsasalin ng "Browse" na teksto sa ibang mga wika. I-override o magdagdag ng mga entry sa $custom-file-textSass variable na may nauugnay na tag ng wika at mga naka-localize na string. Ang English string ay maaaring i-customize sa parehong paraan. Halimbawa, narito kung paano maaaring magdagdag ng pagsasalin sa Espanyol (ang code ng wika ng Espanyol ay es):
Narito ang lang(es)pagkilos sa pasadyang pag-input ng file para sa pagsasalin ng Espanyol:
Kakailanganin mong itakda nang tama ang wika ng iyong dokumento (o subtree nito) upang maipakita ang tamang teksto. Magagawa ito gamit ang langattribute sa <html>elemento o ang Content-LanguageHTTP header , bukod sa iba pang mga pamamaraan.