ಫಾರ್ಮ್ ನಿಯಂತ್ರಣ ಶೈಲಿಗಳು, ಲೇಔಟ್ ಆಯ್ಕೆಗಳು ಮತ್ತು ವಿವಿಧ ರೀತಿಯ ಫಾರ್ಮ್ಗಳನ್ನು ರಚಿಸಲು ಕಸ್ಟಮ್ ಘಟಕಗಳಿಗೆ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳು.
ಅವಲೋಕನ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ತರಗತಿಗಳೊಂದಿಗೆ ನಮ್ಮ ರೀಬೂಟ್ ಮಾಡಿದ ಫಾರ್ಮ್ ಶೈಲಿಗಳಲ್ಲಿ ವಿಸ್ತರಿಸುತ್ತವೆ . ಬ್ರೌಸರ್ಗಳು ಮತ್ತು ಸಾಧನಗಳಾದ್ಯಂತ ಹೆಚ್ಚು ಸ್ಥಿರವಾದ ರೆಂಡರಿಂಗ್ಗಾಗಿ ತಮ್ಮ ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ಡಿಸ್ಪ್ಲೇಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಈ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.
ಇಮೇಲ್ ಪರಿಶೀಲನೆ, ಸಂಖ್ಯೆ ಆಯ್ಕೆ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಂತಹ ಹೊಸ ಇನ್ಪುಟ್ ನಿಯಂತ್ರಣಗಳ ಲಾಭವನ್ನು ಪಡೆಯಲು typeಎಲ್ಲಾ ಇನ್ಪುಟ್ಗಳಲ್ಲಿ (ಉದಾ, emailಇಮೇಲ್ ವಿಳಾಸ ಅಥವಾ ಸಂಖ್ಯಾತ್ಮಕ ಮಾಹಿತಿಗಾಗಿ) ಸೂಕ್ತವಾದ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ .number
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಫಾರ್ಮ್ ಶೈಲಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ತ್ವರಿತ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ. ಅಗತ್ಯವಿರುವ ತರಗತಿಗಳು, ಫಾರ್ಮ್ ಲೇಔಟ್ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ದಾಖಲಾತಿಗಾಗಿ ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.
ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು
ಪಠ್ಯ ರೂಪದ ನಿಯಂತ್ರಣಗಳು- <input>s, <select>s, ಮತ್ತು s-ಗಳಂತಹವುಗಳನ್ನು ವರ್ಗದೊಂದಿಗೆ <textarea>ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ . .form-controlಸಾಮಾನ್ಯ ನೋಟ, ಫೋಕಸ್ ಸ್ಟೇಟ್, ಗಾತ್ರ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ಶೈಲಿಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
ಫೈಲ್ ಇನ್ಪುಟ್ಗಳಿಗಾಗಿ, ಫಾರ್ ಅನ್ನು ಸ್ವ್ಯಾಪ್ .form-controlಮಾಡಿ .form-control-file.
ಗಾತ್ರ
.form-control-lgಮತ್ತು ನಂತಹ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿ .form-control-sm.
ಓದಲು ಮಾತ್ರ
readonlyಇನ್ಪುಟ್ನ ಮೌಲ್ಯವನ್ನು ಮಾರ್ಪಡಿಸುವುದನ್ನು ತಡೆಯಲು ಇನ್ಪುಟ್ನಲ್ಲಿ ಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ . ಓದಲು-ಮಾತ್ರ ಇನ್ಪುಟ್ಗಳು ಹಗುರವಾಗಿ ಕಾಣಿಸುತ್ತವೆ (ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಇನ್ಪುಟ್ಗಳಂತೆಯೇ), ಆದರೆ ಪ್ರಮಾಣಿತ ಕರ್ಸರ್ ಅನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ.
ಓದಲು ಮಾತ್ರ ಸರಳ ಪಠ್ಯ
<input readonly>ನಿಮ್ಮ ಫಾರ್ಮ್ನಲ್ಲಿರುವ ಅಂಶಗಳನ್ನು ಸರಳ ಪಠ್ಯದಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲು ನೀವು ಬಯಸಿದರೆ .form-control-plaintext, ಡೀಫಾಲ್ಟ್ ಫಾರ್ಮ್ ಫೀಲ್ಡ್ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಮತ್ತು ಸರಿಯಾದ ಅಂಚು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸಂರಕ್ಷಿಸಲು ವರ್ಗವನ್ನು ಬಳಸಿ.
ಶ್ರೇಣಿಯ ಒಳಹರಿವು
ಬಳಸಿ ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಶ್ರೇಣಿಯ ಇನ್ಪುಟ್ಗಳನ್ನು ಹೊಂದಿಸಿ .form-control-range.
ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೋಗಳು
ಡೀಫಾಲ್ಟ್ ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳನ್ನು ಅವುಗಳ HTML ಅಂಶಗಳ ವಿನ್ಯಾಸ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ಸುಧಾರಿಸುವ ಎರಡೂ ಇನ್ಪುಟ್ ಪ್ರಕಾರಗಳಿಗೆ ಒಂದೇ ವರ್ಗದ.form-check ಸಹಾಯದಿಂದ ಸುಧಾರಿಸಲಾಗಿದೆ . ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಪಟ್ಟಿಯಲ್ಲಿ ಒಂದು ಅಥವಾ ಹಲವಾರು ಆಯ್ಕೆಗಳನ್ನು ಆಯ್ಕೆಮಾಡಲು, ರೇಡಿಯೋಗಳು ಅನೇಕದಿಂದ ಒಂದು ಆಯ್ಕೆಯನ್ನು ಆರಿಸಲು.
ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೋಗಳನ್ನು ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. ಇನ್ಪುಟ್ನ ಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸಲು ಸಹಾಯ ಮಾಡಲು disabledಗುಣಲಕ್ಷಣವು ಹಗುರವಾದ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೊ ಬಟನ್ಗಳು HTML-ಆಧಾರಿತ ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ, ಪ್ರವೇಶಿಸಬಹುದಾದ ಲೇಬಲ್ಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಅಂತೆಯೇ, ನಮ್ಮ <input>ರು ಮತ್ತು ಗಳು ಒಂದು ಒಳಗಿನ <label>ಅಂಶಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ ಒಡಹುಟ್ಟಿದ ಅಂಶಗಳಾಗಿವೆ . ಇದು ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಮೌಖಿಕವಾಗಿದೆ ಏಕೆಂದರೆ ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕು ಮತ್ತು ಸಂಬಂಧಿಸಲು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿರಬೇಕು ಮತ್ತು .<input><label>idfor<input><label>
ಡೀಫಾಲ್ಟ್ (ಸ್ಟ್ಯಾಕ್ ಮಾಡಲಾಗಿದೆ)
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ತಕ್ಷಣದ ಒಡಹುಟ್ಟಿದ ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ನೊಂದಿಗೆ ಸೂಕ್ತವಾಗಿ ಅಂತರವಿರುತ್ತದೆ .form-check.
ಸಾಲಿನಲ್ಲಿ
.form-check-inlineಯಾವುದಕ್ಕೂ ಸೇರಿಸುವ ಮೂಲಕ ಒಂದೇ ಸಮತಲ ಸಾಲಿನಲ್ಲಿ ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಅಥವಾ ರೇಡಿಯೋಗಳನ್ನು ಗುಂಪು ಮಾಡಿ .form-check.
ಲೇಬಲ್ಗಳಿಲ್ಲದೆ
ಯಾವುದೇ ಲೇಬಲ್ ಪಠ್ಯವನ್ನು ಹೊಂದಿರದ .position-staticಇನ್ಪುಟ್ಗಳಿಗೆ ಸೇರಿಸಿ . .form-checkಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗಾಗಿ ಇನ್ನೂ ಕೆಲವು ರೀತಿಯ ಲೇಬಲ್ ಅನ್ನು ಒದಗಿಸಲು ಮರೆಯದಿರಿ (ಉದಾಹರಣೆಗೆ, ಬಳಸಿ aria-label).
ಲೆಔಟ್
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ವಯಿಸುವುದರಿಂದ display: blockಮತ್ತು width: 100%ನಮ್ಮ ಎಲ್ಲಾ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಿಗೆ, ಫಾರ್ಮ್ಗಳು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಲಂಬವಾಗಿ ಸ್ಟ್ಯಾಕ್ ಆಗುತ್ತವೆ. ಪ್ರತಿ-ಫಾರ್ಮ್ ಆಧಾರದ ಮೇಲೆ ಈ ವಿನ್ಯಾಸವನ್ನು ಬದಲಿಸಲು ಹೆಚ್ಚುವರಿ ತರಗತಿಗಳನ್ನು ಬಳಸಬಹುದು.
ಫಾರ್ಮ್ ಗುಂಪುಗಳು
.form-groupಫಾರ್ಮ್ಗಳಿಗೆ ಕೆಲವು ರಚನೆಯನ್ನು ಸೇರಿಸಲು ವರ್ಗವು ಸುಲಭವಾದ ಮಾರ್ಗವಾಗಿದೆ . ಇದು ಲೇಬಲ್ಗಳು, ನಿಯಂತ್ರಣಗಳು, ಐಚ್ಛಿಕ ಸಹಾಯ ಪಠ್ಯ ಮತ್ತು ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣ ಸಂದೇಶಗಳ ಸರಿಯಾದ ಗುಂಪನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುವ ಹೊಂದಿಕೊಳ್ಳುವ ವರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಇದು ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ , ಆದರೆ ಇದು ಅಗತ್ಯವಿರುವಂತೆ margin-bottomಹೆಚ್ಚುವರಿ ಶೈಲಿಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ . .form-inlineಇದನ್ನು <fieldset>s, <div>s ಅಥವಾ ಯಾವುದೇ ಇತರ ಅಂಶದೊಂದಿಗೆ ಬಳಸಿ.
ಫಾರ್ಮ್ ಗ್ರಿಡ್
ನಮ್ಮ ಗ್ರಿಡ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ರೂಪಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಬಹು ಕಾಲಮ್ಗಳು, ವಿವಿಧ ಅಗಲಗಳು ಮತ್ತು ಹೆಚ್ಚುವರಿ ಜೋಡಣೆ ಆಯ್ಕೆಗಳ ಅಗತ್ಯವಿರುವ ಫಾರ್ಮ್ ಲೇಔಟ್ಗಳಿಗಾಗಿ ಇವುಗಳನ್ನು ಬಳಸಿ.
ಫಾರ್ಮ್ ಸಾಲು
ಬಿಗಿಯಾದ ಮತ್ತು ಹೆಚ್ಚು ಕಾಂಪ್ಯಾಕ್ಟ್ ಲೇಔಟ್ಗಳಿಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಕಾಲಮ್ ಗಟರ್ಗಳನ್ನು ಅತಿಕ್ರಮಿಸುವ ನಮ್ಮ ಪ್ರಮಾಣಿತ ಗ್ರಿಡ್ ಸಾಲಿನ ಬದಲಾವಣೆಗಾಗಿ ನೀವು ಸಹ ವಿನಿಮಯ .rowಮಾಡಿಕೊಳ್ಳಬಹುದು ..form-row
ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ವಿನ್ಯಾಸಗಳನ್ನು ಸಹ ರಚಿಸಬಹುದು.
ಸಮತಲ ರೂಪ
.rowಗುಂಪುಗಳನ್ನು ರೂಪಿಸಲು ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ .col-*-*ಮತ್ತು ನಿಮ್ಮ ಲೇಬಲ್ಗಳು ಮತ್ತು ನಿಯಂತ್ರಣಗಳ ಅಗಲವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ತರಗತಿಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ಗ್ರಿಡ್ನೊಂದಿಗೆ ಸಮತಲ ರೂಪಗಳನ್ನು ರಚಿಸಿ . .col-form-labelನಿಮ್ಮ s ಗೆ ಸೇರಿಸಲು ಮರೆಯದಿರಿ <label>ಆದ್ದರಿಂದ ಅವುಗಳು ತಮ್ಮ ಸಂಬಂಧಿತ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತವೆ.
ಕೆಲವೊಮ್ಮೆ, ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಪರಿಪೂರ್ಣ ಜೋಡಣೆಯನ್ನು ರಚಿಸಲು ನೀವು ಅಂಚು ಅಥವಾ ಪ್ಯಾಡಿಂಗ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು. padding-topಉದಾಹರಣೆಗೆ, ಪಠ್ಯದ ಬೇಸ್ಲೈನ್ ಅನ್ನು ಉತ್ತಮವಾಗಿ ಜೋಡಿಸಲು ನಮ್ಮ ಸ್ಟ್ಯಾಕ್ ಮಾಡಿದ ರೇಡಿಯೊ ಇನ್ಪುಟ್ಗಳ ಲೇಬಲ್ ಅನ್ನು ನಾವು ತೆಗೆದುಹಾಕಿದ್ದೇವೆ .
ಅಡ್ಡ ರೂಪದ ಲೇಬಲ್ ಗಾತ್ರ
ಮತ್ತು ಗಾತ್ರವನ್ನು ಸರಿಯಾಗಿ ಅನುಸರಿಸಲು ನಿಮ್ಮ s ಅಥವಾ .col-form-label-sms ಅನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ ..col-form-label-lg<label><legend>.form-control-lg.form-control-sm
ಕಾಲಮ್ ಗಾತ್ರ
ಹಿಂದಿನ ಉದಾಹರಣೆಗಳಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ, ನಮ್ಮ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ನಿಮಗೆ ಯಾವುದೇ ಸಂಖ್ಯೆಯ .cols ಅನ್ನು a .rowಅಥವಾ .form-row. ಅವರು ಲಭ್ಯವಿರುವ ಅಗಲವನ್ನು ಅವುಗಳ ನಡುವೆ ಸಮಾನವಾಗಿ ವಿಭಜಿಸುತ್ತಾರೆ. ಹೆಚ್ಚು ಅಥವಾ ಕಡಿಮೆ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ನಿಮ್ಮ ಕಾಲಮ್ಗಳ ಉಪವಿಭಾಗವನ್ನು ಸಹ ನೀವು ಆಯ್ಕೆ ಮಾಡಬಹುದು, ಆದರೆ ಉಳಿದವುಗಳು ಉಳಿದವುಗಳನ್ನು .colಸಮಾನವಾಗಿ ವಿಭಜಿಸುತ್ತವೆ, ಉದಾಹರಣೆಗೆ ನಿರ್ದಿಷ್ಟ ಕಾಲಮ್ ವರ್ಗಗಳೊಂದಿಗೆ .col-7.
ಸ್ವಯಂ-ಗಾತ್ರಗೊಳಿಸುವಿಕೆ
ಕೆಳಗಿನ ಉದಾಹರಣೆಯು ವಿಷಯಗಳನ್ನು ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕರಿಸಲು ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಯನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು .colನಿಮ್ಮ .col-autoಕಾಲಮ್ಗಳು ಅಗತ್ಯವಿರುವಷ್ಟು ಜಾಗವನ್ನು ಮಾತ್ರ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಇನ್ನೊಂದು ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ವಿಷಯಗಳ ಆಧಾರದ ಮೇಲೆ ಕಾಲಮ್ ಗಾತ್ರಗಳು.
ನಂತರ ನೀವು ಅದನ್ನು ಮತ್ತೊಮ್ಮೆ ಗಾತ್ರ-ನಿರ್ದಿಷ್ಟ ಕಾಲಮ್ ತರಗತಿಗಳೊಂದಿಗೆ ರೀಮಿಕ್ಸ್ ಮಾಡಬಹುದು.
.form-inlineಒಂದೇ ಸಮತಲ ಸಾಲಿನಲ್ಲಿ ಲೇಬಲ್ಗಳು, ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಬಟನ್ಗಳ ಸರಣಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ವರ್ಗವನ್ನು ಬಳಸಿ . ಇನ್ಲೈನ್ ಫಾರ್ಮ್ಗಳಲ್ಲಿನ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಅವುಗಳ ಡೀಫಾಲ್ಟ್ ಸ್ಥಿತಿಗಳಿಂದ ಸ್ವಲ್ಪ ಬದಲಾಗುತ್ತವೆ.
ನಿಯಂತ್ರಣಗಳು , ಯಾವುದೇ HTML ವೈಟ್ ಸ್ಪೇಸ್ ಅನ್ನು ಕುಗ್ಗಿಸುತ್ತದೆ ಮತ್ತು ಅಂತರ ಮತ್ತು ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ display: flexಜೋಡಣೆ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ .
width: autoಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಅತಿಕ್ರಮಿಸಲು ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಇನ್ಪುಟ್ ಗುಂಪುಗಳು ಸ್ವೀಕರಿಸುತ್ತವೆ width: 100%.
ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಕಿರಿದಾದ ವ್ಯೂಪೋರ್ಟ್ಗಳನ್ನು ಲೆಕ್ಕಹಾಕಲು ಕನಿಷ್ಠ 576px ಅಗಲವಿರುವ ವ್ಯೂಪೋರ್ಟ್ಗಳಲ್ಲಿ ಮಾತ್ರ ನಿಯಂತ್ರಣಗಳು ಇನ್ಲೈನ್ನಲ್ಲಿ ಗೋಚರಿಸುತ್ತವೆ.
ಅಂತರದ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಪ್ರತ್ಯೇಕ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳ ಅಗಲ ಮತ್ತು ಜೋಡಣೆಯನ್ನು ನೀವು ಹಸ್ತಚಾಲಿತವಾಗಿ ತಿಳಿಸಬೇಕಾಗಬಹುದು (ಕೆಳಗೆ ತೋರಿಸಿರುವಂತೆ). <label>ಕೊನೆಯದಾಗಿ, ನೀವು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಅಲ್ಲದ ಸಂದರ್ಶಕರಿಂದ ಅದನ್ನು ಮರೆಮಾಡಬೇಕಾಗಿದ್ದರೂ ಸಹ, ಪ್ರತಿ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಯಾವಾಗಲೂ ಸೇರಿಸಲು ಮರೆಯದಿರಿ .sr-only.
ಕಸ್ಟಮ್ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಆಯ್ಕೆಗಳು ಸಹ ಬೆಂಬಲಿತವಾಗಿದೆ.
ಗುಪ್ತ ಲೇಬಲ್ಗಳಿಗೆ ಪರ್ಯಾಯಗಳು
ನೀವು ಪ್ರತಿ ಇನ್ಪುಟ್ಗೆ ಲೇಬಲ್ ಅನ್ನು ಸೇರಿಸದಿದ್ದರೆ ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು ನಿಮ್ಮ ಫಾರ್ಮ್ಗಳೊಂದಿಗೆ ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸುತ್ತವೆ. .sr-onlyಈ ಇನ್ಲೈನ್ ಫಾರ್ಮ್ಗಳಿಗಾಗಿ, ನೀವು ವರ್ಗವನ್ನು ಬಳಸಿಕೊಂಡು ಲೇಬಲ್ಗಳನ್ನು ಮರೆಮಾಡಬಹುದು . ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಲೇಬಲ್ ಅನ್ನು ಒದಗಿಸುವ ಪರ್ಯಾಯ ವಿಧಾನಗಳಿವೆ, ಉದಾಹರಣೆಗೆ aria-label, aria-labelledbyಅಥವಾ titleಗುಣಲಕ್ಷಣ. ಇವುಗಳಲ್ಲಿ ಯಾವುದೂ ಇಲ್ಲದಿದ್ದಲ್ಲಿ, ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು placeholderಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವುದನ್ನು ಆಶ್ರಯಿಸಬಹುದು, ಆದರೆ placeholderಇತರ ಲೇಬಲಿಂಗ್ ವಿಧಾನಗಳಿಗೆ ಬದಲಿಯಾಗಿ ಬಳಸಲು ಸಲಹೆ ನೀಡಲಾಗುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
ಸಹಾಯ ಪಠ್ಯ
ಫಾರ್ಮ್ಗಳಲ್ಲಿ ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಸಹಾಯ ಪಠ್ಯವನ್ನು (ಹಿಂದೆ v3 .form-textಎಂದು ಕರೆಯಲಾಗುತ್ತಿತ್ತು) ಬಳಸಿ ರಚಿಸಬಹುದು. .help-blockಇನ್ಲೈನ್ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಯಾವುದೇ ಇನ್ಲೈನ್ HTML ಎಲಿಮೆಂಟ್ ಮತ್ತು ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸುಲಭವಾಗಿ ಅಳವಡಿಸಬಹುದಾಗಿದೆ .text-muted.
ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಸಂಯೋಜಿಸುವುದು
ಸಹಾಯ ಪಠ್ಯವು ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವುದಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಸಂಬಂಧಿಸಿರಬೇಕು aria-describedby. ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು ಬಳಕೆದಾರ ಗಮನಹರಿಸಿದಾಗ ಅಥವಾ ನಿಯಂತ್ರಣವನ್ನು ಪ್ರವೇಶಿಸಿದಾಗ ಈ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಪ್ರಕಟಿಸುತ್ತದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಸಹಾಯ ಪಠ್ಯದ ಕೆಳಗಿನ ಇನ್ಪುಟ್ಗಳನ್ನು ನೊಂದಿಗೆ ಶೈಲಿ ಮಾಡಬಹುದು .form-text. display: blockಮೇಲಿನ ಇನ್ಪುಟ್ಗಳಿಂದ ಸುಲಭ ಅಂತರಕ್ಕಾಗಿ ಈ ವರ್ಗವು ಕೆಲವು ಉನ್ನತ ಅಂಚುಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ ಮತ್ತು ಸೇರಿಸುತ್ತದೆ.
ನಿಮ್ಮ ಪಾಸ್ವರ್ಡ್ 8-20 ಅಕ್ಷರಗಳು ಉದ್ದವಾಗಿರಬೇಕು, ಅಕ್ಷರಗಳು ಮತ್ತು ಸಂಖ್ಯೆಗಳನ್ನು ಹೊಂದಿರಬೇಕು ಮತ್ತು ಸ್ಪೇಸ್ಗಳು, ವಿಶೇಷ ಅಕ್ಷರಗಳು ಅಥವಾ ಎಮೋಜಿಗಳನ್ನು ಹೊಂದಿರಬಾರದು.
ಇನ್ಲೈನ್ ಪಠ್ಯವು ಯಾವುದೇ ವಿಶಿಷ್ಟವಾದ ಇನ್ಲೈನ್ HTML ಅಂಶವನ್ನು ಬಳಸಬಹುದು (ಅದು <small>, <span>, ಅಥವಾ ಬೇರೆ ಯಾವುದಾದರೂ ಆಗಿರಬಹುದು) ಯುಟಿಲಿಟಿ ವರ್ಗಕ್ಕಿಂತ ಹೆಚ್ಚೇನೂ ಇಲ್ಲ.
ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ರೂಪಗಳು
disabledಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ಅದನ್ನು ಹಗುರವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡಲು ಇನ್ಪುಟ್ನಲ್ಲಿ ಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .
ಎಲ್ಲಾ ನಿಯಂತ್ರಣಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು disableda ಗೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .<fieldset>
ಲಂಗರುಗಳೊಂದಿಗೆ ಎಚ್ಚರಿಕೆ
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಬ್ರೌಸರ್ಗಳು ಎಲ್ಲಾ ಸ್ಥಳೀಯ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ( <input>, <select>ಮತ್ತು <button>ಅಂಶಗಳು) <fieldset disabled>ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ ಎಂದು ಪರಿಗಣಿಸುತ್ತದೆ, ಅವುಗಳ ಮೇಲೆ ಕೀಬೋರ್ಡ್ ಮತ್ತು ಮೌಸ್ ಸಂವಹನಗಳನ್ನು ತಡೆಯುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಫಾರ್ಮ್ <a ... class="btn btn-*">ಅಂಶಗಳನ್ನೂ ಒಳಗೊಂಡಿದ್ದರೆ, ಇವುಗಳಿಗೆ ಶೈಲಿಯನ್ನು ಮಾತ್ರ ನೀಡಲಾಗುತ್ತದೆ pointer-events: none. ಬಟನ್ಗಳಿಗಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಸ್ಥಿತಿಯ ವಿಭಾಗದಲ್ಲಿ ಗಮನಿಸಿದಂತೆ (ಮತ್ತು ನಿರ್ದಿಷ್ಟವಾಗಿ ಆಂಕರ್ ಅಂಶಗಳಿಗಾಗಿ ಉಪ-ವಿಭಾಗದಲ್ಲಿ), ಈ CSS ಆಸ್ತಿಯನ್ನು ಇನ್ನೂ ಪ್ರಮಾಣೀಕರಿಸಲಾಗಿಲ್ಲ ಮತ್ತು ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ 10 ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ ಮತ್ತು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರನ್ನು ತಡೆಯುವುದಿಲ್ಲ ಈ ಲಿಂಕ್ಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಅಥವಾ ಸಕ್ರಿಯಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಆದ್ದರಿಂದ ಸುರಕ್ಷಿತವಾಗಿರಲು, ಅಂತಹ ಲಿಂಕ್ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.
ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ
disabledಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಈ ಶೈಲಿಗಳನ್ನು ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಅನ್ವಯಿಸುತ್ತದೆ, Internet Explorer 11 ಮತ್ತು ಕೆಳಗಿನವುಗಳು a ನಲ್ಲಿ ಗುಣಲಕ್ಷಣವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ <fieldset>. ಈ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಫೀಲ್ಡ್ಸೆಟ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.
ಮೌಲ್ಯೀಕರಣ
HTML5 ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣದೊಂದಿಗೆ ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಮೌಲ್ಯಯುತವಾದ, ಕಾರ್ಯಸಾಧ್ಯವಾದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸಿ- ನಮ್ಮ ಎಲ್ಲಾ ಬೆಂಬಲಿತ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಲಭ್ಯವಿದೆ . ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯೀಕರಣ ಪ್ರತಿಕ್ರಿಯೆಯಿಂದ ಆರಿಸಿಕೊಳ್ಳಿ ಅಥವಾ ನಮ್ಮ ಅಂತರ್ನಿರ್ಮಿತ ತರಗತಿಗಳು ಮತ್ತು ಸ್ಟಾರ್ಟರ್ JavaScript ನೊಂದಿಗೆ ಕಸ್ಟಮ್ ಸಂದೇಶಗಳನ್ನು ಅಳವಡಿಸಿ.
ಸ್ಥಳೀಯ ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಊರ್ಜಿತಗೊಳಿಸುವಿಕೆಯ ಸಂದೇಶಗಳು ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳಲ್ಲಿನ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಸ್ಥಿರವಾಗಿ ತೆರೆದುಕೊಳ್ಳದ ಕಾರಣ ನಾವು ಪ್ರಸ್ತುತ ಕಸ್ಟಮ್ ಮೌಲ್ಯೀಕರಣ ಶೈಲಿಗಳನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ (ಹೆಚ್ಚಾಗಿ, ಡೆಸ್ಕ್ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್ನಲ್ಲಿ Chrome).
ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನೊಂದಿಗೆ ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:
HTML ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣವನ್ನು CSS ನ ಎರಡು ಹುಸಿ-ವರ್ಗಗಳ ಮೂಲಕ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ, :invalidಮತ್ತು :valid. <input>ಇದು , <select>ಮತ್ತು <textarea>ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ .
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಪೋಷಕ ವರ್ಗಕ್ಕೆ ಸ್ಕೋಪ್ :invalidಮತ್ತು ಶೈಲಿಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ . ಇಲ್ಲದಿದ್ದರೆ, ಪುಟ ಲೋಡ್ನಲ್ಲಿ ಮೌಲ್ಯವಿಲ್ಲದ ಯಾವುದೇ ಅಗತ್ಯವಿರುವ ಕ್ಷೇತ್ರವು ಅಮಾನ್ಯವಾಗಿದೆ ಎಂದು ತೋರಿಸುತ್ತದೆ. ಈ ರೀತಿಯಾಗಿ, ಅವುಗಳನ್ನು ಯಾವಾಗ ಸಕ್ರಿಯಗೊಳಿಸಬೇಕೆಂದು ನೀವು ಆಯ್ಕೆ ಮಾಡಬಹುದು (ಸಾಮಾನ್ಯವಾಗಿ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯನ್ನು ಪ್ರಯತ್ನಿಸಿದ ನಂತರ).:valid.was-validated<form>
ಫಾರ್ಮ್ನ ನೋಟವನ್ನು ಮರುಹೊಂದಿಸಲು (ಉದಾಹರಣೆಗೆ, AJAX ಅನ್ನು ಬಳಸಿಕೊಂಡು ಡೈನಾಮಿಕ್ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳ ಸಂದರ್ಭದಲ್ಲಿ), ಸಲ್ಲಿಸಿದ ನಂತರ ಮತ್ತೆ .was-validatedತರಗತಿಯನ್ನು ತೆಗೆದುಹಾಕಿ.<form>
ಫಾಲ್ಬ್ಯಾಕ್ ಆಗಿ, .is-invalidಮತ್ತು ಸರ್ವರ್ ಸೈಡ್ ಮೌಲ್ಯೀಕರಣಕ್ಕಾಗಿ.is-valid ಸ್ಯೂಡೋ-ಕ್ಲಾಸ್ಗಳ ಬದಲಿಗೆ ತರಗತಿಗಳನ್ನು ಬಳಸಬಹುದು . ಅವರಿಗೆ ಪೋಷಕ ವರ್ಗದ ಅಗತ್ಯವಿಲ್ಲ ..was-validated
<label>CSS ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬ ನಿರ್ಬಂಧಗಳ ಕಾರಣದಿಂದಾಗಿ , ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಸಹಾಯವಿಲ್ಲದೆ DOM ನಲ್ಲಿ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣದ ಮೊದಲು ಬರುವ ಶೈಲಿಗಳನ್ನು ನಾವು (ಪ್ರಸ್ತುತ) ಅನ್ವಯಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ.
ಪ್ರತಿಕ್ರಿಯೆ ಸಂದೇಶಗಳು ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು (ಪ್ರತಿ ಬ್ರೌಸರ್ಗೆ ವಿಭಿನ್ನ, ಮತ್ತು CSS ಮೂಲಕ ಅನ್ಸ್ಟೈಲಬಲ್) ಅಥವಾ ಹೆಚ್ಚುವರಿ HTML ಮತ್ತು CSS ಜೊತೆಗೆ ನಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರತಿಕ್ರಿಯೆ ಶೈಲಿಗಳು.
setCustomValidityನೀವು JavaScript ನಲ್ಲಿ ಕಸ್ಟಮ್ ಮಾನ್ಯತೆಯ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಬಹುದು .
ಅದನ್ನು ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಂಡು, ನಮ್ಮ ಕಸ್ಟಮ್ ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣ ಶೈಲಿಗಳು, ಐಚ್ಛಿಕ ಸರ್ವರ್ ಸೈಡ್ ತರಗತಿಗಳು ಮತ್ತು ಬ್ರೌಸರ್ ಡಿಫಾಲ್ಟ್ಗಳಿಗಾಗಿ ಈ ಕೆಳಗಿನ ಡೆಮೊಗಳನ್ನು ಪರಿಗಣಿಸಿ.
ಕಸ್ಟಮ್ ಶೈಲಿಗಳು
ಕಸ್ಟಮ್ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣ ಸಂದೇಶಗಳಿಗಾಗಿ, novalidateನಿಮ್ಮ ಗೆ ಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ನೀವು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ <form>. ಇದು ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಪ್ರತಿಕ್ರಿಯೆ ಟೂಲ್ಟಿಪ್ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಆದರೆ JavaScript ನಲ್ಲಿ ಫಾರ್ಮ್ ಮೌಲ್ಯೀಕರಣ API ಗಳಿಗೆ ಇನ್ನೂ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಕೆಳಗಿನ ಫಾರ್ಮ್ ಅನ್ನು ಸಲ್ಲಿಸಲು ಪ್ರಯತ್ನಿಸಿ; ನಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಲ್ಲಿಸು ಬಟನ್ ಅನ್ನು ಪ್ರತಿಬಂಧಿಸುತ್ತದೆ ಮತ್ತು ನಿಮಗೆ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪ್ರಸಾರ ಮಾಡುತ್ತದೆ. ಸಲ್ಲಿಸಲು ಪ್ರಯತ್ನಿಸುವಾಗ, ನಿಮ್ಮ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಿಗೆ ಅನ್ವಯಿಸಲಾದ ಶೈಲಿಗಳು :invalidಮತ್ತು ಶೈಲಿಗಳನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ .:valid
ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಉತ್ತಮವಾಗಿ ಸಂವಹಿಸಲು ಕಸ್ಟಮ್ ಪ್ರತಿಕ್ರಿಯೆ ಶೈಲಿಗಳು ಕಸ್ಟಮ್ ಬಣ್ಣಗಳು, ಗಡಿಗಳು, ಫೋಕಸ್ ಶೈಲಿಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆ ಐಕಾನ್ಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತವೆ. s ಗಾಗಿ ಹಿನ್ನೆಲೆ ಐಕಾನ್ಗಳು <select>ನೊಂದಿಗೆ ಮಾತ್ರ ಲಭ್ಯವಿರುತ್ತವೆ .custom-selectಮತ್ತು ಇಲ್ಲ .form-control.
ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್
ಕಸ್ಟಮ್ ಮೌಲ್ಯೀಕರಣ ಪ್ರತಿಕ್ರಿಯೆ ಸಂದೇಶಗಳಲ್ಲಿ ಆಸಕ್ತಿ ಇಲ್ಲವೇ ಅಥವಾ ಫಾರ್ಮ್ ನಡವಳಿಕೆಗಳನ್ನು ಬದಲಾಯಿಸಲು JavaScript ಬರೆಯುವುದೇ? ಎಲ್ಲವೂ ಒಳ್ಳೆಯದು, ನೀವು ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ಗಳನ್ನು ಬಳಸಬಹುದು. ಕೆಳಗಿನ ಫಾರ್ಮ್ ಅನ್ನು ಸಲ್ಲಿಸಲು ಪ್ರಯತ್ನಿಸಿ. ನಿಮ್ಮ ಬ್ರೌಸರ್ ಮತ್ತು OS ಅನ್ನು ಅವಲಂಬಿಸಿ, ನೀವು ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ಶೈಲಿಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೋಡುತ್ತೀರಿ.
ಈ ಪ್ರತಿಕ್ರಿಯೆ ಶೈಲಿಗಳನ್ನು CSS ನೊಂದಿಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗದಿದ್ದರೂ, ನೀವು JavaScript ಮೂಲಕ ಪ್ರತಿಕ್ರಿಯೆ ಪಠ್ಯವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು.
ಸರ್ವರ್ ಬದಿ
ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮೌಲ್ಯೀಕರಣವನ್ನು ಬಳಸಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ, ಆದರೆ ನಿಮಗೆ ಸರ್ವರ್-ಸೈಡ್ ಮೌಲ್ಯೀಕರಣದ ಅಗತ್ಯವಿದ್ದರೆ, ನೀವು ಅಮಾನ್ಯ ಮತ್ತು ಮಾನ್ಯವಾದ ಫಾರ್ಮ್ ಕ್ಷೇತ್ರಗಳನ್ನು ಮತ್ತು ಜೊತೆಗೆ .is-invalidಸೂಚಿಸಬಹುದು .is-valid. .invalid-feedbackಈ ತರಗತಿಗಳೊಂದಿಗೆ ಸಹ ಬೆಂಬಲಿತವಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ .
ಬೆಂಬಲಿತ ಅಂಶಗಳು
ಕೆಳಗಿನ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಘಟಕಗಳಿಗೆ ಮೌಲ್ಯೀಕರಣ ಶೈಲಿಗಳು ಲಭ್ಯವಿದೆ:
<input>s ಮತ್ತು <textarea>s ಜೊತೆಗೆ ( ಇನ್ಪುಟ್ ಗುಂಪುಗಳಲ್ಲಿ .form-controlಒಂದನ್ನು ಒಳಗೊಂಡಂತೆ ).form-control
<select>ರು ಜೊತೆ .form-controlಅಥವಾ.custom-select
.form-checkರು
.custom-checkboxರು ಮತ್ತು .custom-radioರು
.custom-file
ಸಾಧನಸಲಹೆಗಳು
ನಿಮ್ಮ ಫಾರ್ಮ್ ಲೇಔಟ್ ಅದನ್ನು ಅನುಮತಿಸಿದರೆ, ಶೈಲಿಯ ಟೂಲ್ಟಿಪ್ನಲ್ಲಿ ಮೌಲ್ಯಮಾಪನ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ತರಗತಿಗಳಿಗೆ ನೀವು .{valid|invalid}-feedbackತರಗತಿಗಳನ್ನು ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಬಹುದು. ಟೂಲ್ಟಿಪ್ ಪೊಸಿಷನಿಂಗ್ಗಾಗಿ ಅದರ ಮೇಲೆ .{valid|invalid}-tooltipಪೋಷಕರು ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ . position: relativeಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಮ್ಮ ಕಾಲಮ್ ತರಗತಿಗಳು ಇದನ್ನು ಈಗಾಗಲೇ ಹೊಂದಿವೆ, ಆದರೆ ನಿಮ್ಮ ಯೋಜನೆಗೆ ಪರ್ಯಾಯ ಸೆಟಪ್ ಅಗತ್ಯವಿರಬಹುದು.
ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು
$form-validation-statesನಕ್ಷೆಯೊಂದಿಗೆ ಸಾಸ್ ಮೂಲಕ ಮೌಲ್ಯೀಕರಣ ಸ್ಥಿತಿಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು . ನಮ್ಮ ಫೈಲ್ನಲ್ಲಿದೆ, ಡೀಫಾಲ್ಟ್ / ಮೌಲ್ಯಮಾಪನ ಸ್ಥಿತಿಗಳನ್ನು _variables.scssಸೃಷ್ಟಿಸಲು ಈ ಸಾಸ್ ನಕ್ಷೆಯನ್ನು ಲೂಪ್ ಮಾಡಲಾಗಿದೆ . ಪ್ರತಿ ರಾಜ್ಯದ ಬಣ್ಣ ಮತ್ತು ಐಕಾನ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನೆಸ್ಟೆಡ್ ಮ್ಯಾಪ್ ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ. ಯಾವುದೇ ಇತರ ರಾಜ್ಯಗಳು ಬ್ರೌಸರ್ಗಳಿಂದ ಬೆಂಬಲಿತವಾಗಿಲ್ಲದಿದ್ದರೂ, ಕಸ್ಟಮ್ ಶೈಲಿಗಳನ್ನು ಬಳಸುವವರು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಬಹುದು.validinvalid
form-validation-stateಮಿಕ್ಸಿನ್ ಅನ್ನು ಮಾರ್ಪಡಿಸದೆಯೇ ಈ ಮೌಲ್ಯಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ .
ಕಸ್ಟಮ್ ರೂಪಗಳು
ಇನ್ನಷ್ಟು ಗ್ರಾಹಕೀಕರಣ ಮತ್ತು ಕ್ರಾಸ್ ಬ್ರೌಸರ್ ಸ್ಥಿರತೆಗಾಗಿ, ಬ್ರೌಸರ್ ಡಿಫಾಲ್ಟ್ಗಳನ್ನು ಬದಲಿಸಲು ನಮ್ಮ ಸಂಪೂರ್ಣ ಕಸ್ಟಮ್ ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ಬಳಸಿ. ಅವುಗಳನ್ನು ಲಾಕ್ಷಣಿಕ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ಮಾರ್ಕ್ಅಪ್ನ ಮೇಲೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ಅವು ಯಾವುದೇ ಡೀಫಾಲ್ಟ್ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಕ್ಕೆ ಘನ ಬದಲಿಗಳಾಗಿವೆ.
ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೋಗಳು
ನಮ್ಮ ಕಸ್ಟಮ್ ನಿಯಂತ್ರಣವನ್ನು ರಚಿಸಲು ಪ್ರತಿ ಚೆಕ್ಬಾಕ್ಸ್ ಮತ್ತು ರೇಡಿಯೋ <input>ಮತ್ತು <label>ಜೋಡಣೆಯನ್ನು ಒಂದು ಸುತ್ತಿಡಲಾಗುತ್ತದೆ . <div>ರಚನಾತ್ಮಕವಾಗಿ, ಇದು ನಮ್ಮ ಪೂರ್ವನಿಯೋಜಿತ ವಿಧಾನದಂತೆಯೇ ಇರುತ್ತದೆ .form-check.
ನಮ್ಮ ಕಸ್ಟಮ್ ಫಾರ್ಮ್ ಸೂಚಕವನ್ನು ಸರಿಯಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲು ನಾವು ನಮ್ಮ ಎಲ್ಲಾ ರಾಜ್ಯಗಳಿಗೆ ಸಿಬ್ಲಿಂಗ್ ಸೆಲೆಕ್ಟರ್ ( ~) ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ವರ್ಗದೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ , ನಾವು ಪ್ರತಿ ಐಟಂಗೆ ಪಠ್ಯವನ್ನು ರಾಜ್ಯದ ಆಧಾರದ ಮೇಲೆ ಶೈಲಿ ಮಾಡಬಹುದು.<input>:checked.custom-control-label<input>
ನಾವು ಡೀಫಾಲ್ಟ್ <input>ಅನ್ನು ಮರೆಮಾಡುತ್ತೇವೆ ಮತ್ತು ಅದರ ಸ್ಥಳದಲ್ಲಿ ಹೊಸ ಕಸ್ಟಮ್ ಫಾರ್ಮ್ ಸೂಚಕವನ್ನು ನಿರ್ಮಿಸಲು opacityಬಳಸುತ್ತೇವೆ ಮತ್ತು . ದುರದೃಷ್ಟವಶಾತ್ ನಾವು ಸಿಎಸ್ಎಸ್ಗಳು ಆ ಅಂಶದಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸದ ಕಾರಣದಿಂದ ಕಸ್ಟಮ್ ಒಂದನ್ನು ನಿರ್ಮಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ ..custom-control-label::before::after<input>content
ಪರಿಶೀಲಿಸಿದ ಸ್ಥಿತಿಗಳಲ್ಲಿ, ನಾವು ಓಪನ್ ಐಕಾನಿಕ್ ನಿಂದ ಬೇಸ್64 ಎಂಬೆಡೆಡ್ SVG ಐಕಾನ್ಗಳನ್ನು ಬಳಸುತ್ತೇವೆ . ಬ್ರೌಸರ್ಗಳು ಮತ್ತು ಸಾಧನಗಳಾದ್ಯಂತ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ ಇದು ನಮಗೆ ಉತ್ತಮ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಚೆಕ್ಬಾಕ್ಸ್ಗಳು
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಹಸ್ತಚಾಲಿತವಾಗಿ ಹೊಂದಿಸಿದಾಗ ಕಸ್ಟಮ್ ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಹುಸಿ ವರ್ಗವನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು :indeterminate(ಅದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಯಾವುದೇ ಲಭ್ಯವಿರುವ HTML ಗುಣಲಕ್ಷಣವಿಲ್ಲ).
ನೀವು jQuery ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಈ ರೀತಿಯ ಏನಾದರೂ ಸಾಕು:
ರೇಡಿಯೋಗಳು
ಸಾಲಿನಲ್ಲಿ
ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ
ಕಸ್ಟಮ್ ಚೆಕ್ಬಾಕ್ಸ್ಗಳು ಮತ್ತು ರೇಡಿಯೊಗಳನ್ನು ಸಹ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು. disabledಗೆ ಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ <input>ಮತ್ತು ಕಸ್ಟಮ್ ಸೂಚಕ ಮತ್ತು ಲೇಬಲ್ ವಿವರಣೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಶೈಲಿ ಮಾಡಲಾಗುತ್ತದೆ.
ಸ್ವಿಚ್ಗಳು
ಸ್ವಿಚ್ ಕಸ್ಟಮ್ ಚೆಕ್ಬಾಕ್ಸ್ನ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಹೊಂದಿದೆ ಆದರೆ .custom-switchಟಾಗಲ್ ಸ್ವಿಚ್ ಅನ್ನು ನಿರೂಪಿಸಲು ವರ್ಗವನ್ನು ಬಳಸುತ್ತದೆ. ಸ್ವಿಚ್ಗಳು ಸಹ disabledಗುಣಲಕ್ಷಣವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ.
ಮೆನು ಆಯ್ಕೆಮಾಡಿ
ಕಸ್ಟಮ್ ಶೈಲಿಗಳನ್ನು ಪ್ರಚೋದಿಸಲು ಕಸ್ಟಮ್ <select>ಮೆನುಗಳಿಗೆ ಕಸ್ಟಮ್ ವರ್ಗ ಮಾತ್ರ ಅಗತ್ಯವಿದೆ . .custom-selectಕಸ್ಟಮ್ ಶೈಲಿಗಳು <select>ಆರಂಭಿಕ ನೋಟಕ್ಕೆ ಸೀಮಿತವಾಗಿವೆ <option>ಮತ್ತು ಬ್ರೌಸರ್ ಮಿತಿಗಳಿಂದಾಗಿ s ಅನ್ನು ಮಾರ್ಪಡಿಸಲಾಗುವುದಿಲ್ಲ.
ನಮ್ಮ ಒಂದೇ ಗಾತ್ರದ ಪಠ್ಯ ಇನ್ಪುಟ್ಗಳಿಗೆ ಹೊಂದಿಸಲು ನೀವು ಚಿಕ್ಕ ಮತ್ತು ದೊಡ್ಡ ಕಸ್ಟಮ್ ಆಯ್ಕೆಗಳಿಂದ ಕೂಡ ಆಯ್ಕೆ ಮಾಡಬಹುದು.
multipleಗುಣಲಕ್ಷಣವು ಸಹ ಬೆಂಬಲಿತವಾಗಿದೆ :
ಗುಣಲಕ್ಷಣದಂತೆಯೇ size:
ಶ್ರೇಣಿ
ಜೊತೆಗೆ ಕಸ್ಟಮ್ <input type="range">ನಿಯಂತ್ರಣಗಳನ್ನು ರಚಿಸಿ .custom-range. ಟ್ರ್ಯಾಕ್ (ಹಿನ್ನೆಲೆ) ಮತ್ತು ಹೆಬ್ಬೆರಳು (ಮೌಲ್ಯ) ಎರಡನ್ನೂ ಬ್ರೌಸರ್ಗಳಾದ್ಯಂತ ಒಂದೇ ರೀತಿ ಕಾಣುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಪ್ರಗತಿಯನ್ನು ಸೂಚಿಸುವ ಸಾಧನವಾಗಿ ಹೆಬ್ಬೆರಳಿನ ಎಡ ಅಥವಾ ಬಲದಿಂದ ತಮ್ಮ ಟ್ರ್ಯಾಕ್ ಅನ್ನು "ಭರ್ತಿ" ಮಾಡುವುದನ್ನು IE ಮತ್ತು Firefox ಬೆಂಬಲಿಸುವುದರಿಂದ, ನಾವು ಪ್ರಸ್ತುತ ಅದನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
ಶ್ರೇಣಿಯ ಇನ್ಪುಟ್ಗಳು ಅನುಕ್ರಮವಾಗಿ minಮತ್ತು max- 0ಮತ್ತು ಗಾಗಿ ಸೂಚ್ಯ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿವೆ. ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು 100ಬಳಸುವವರಿಗೆ ನೀವು ಹೊಸ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು .minmax
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ವ್ಯಾಪ್ತಿಯ ಒಳಹರಿವು ಪೂರ್ಣಾಂಕ ಮೌಲ್ಯಗಳಿಗೆ "ಸ್ನ್ಯಾಪ್". ಇದನ್ನು ಬದಲಾಯಿಸಲು, ನೀವು stepಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಬಳಸುವ ಮೂಲಕ ಹಂತಗಳ ಸಂಖ್ಯೆಯನ್ನು ದ್ವಿಗುಣಗೊಳಿಸುತ್ತೇವೆ step="0.5".
ಫೈಲ್ ಬ್ರೌಸರ್
ಕಸ್ಟಮ್ ಫೈಲ್ ಇನ್ಪುಟ್ ಅನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಶಿಫಾರಸು ಮಾಡಲಾದ ಪ್ಲಗಿನ್: bs-custom-file-input , ಅದನ್ನೇ ನಾವು ಪ್ರಸ್ತುತ ನಮ್ಮ ಡಾಕ್ಸ್ನಲ್ಲಿ ಬಳಸುತ್ತಿದ್ದೇವೆ.
ಫೈಲ್ ಇನ್ಪುಟ್ ಗುಂಪಿನಲ್ಲಿ ಅತ್ಯಂತ ಕಡಿಮೆಯಾಗಿದೆ ಮತ್ತು ನೀವು ಅವುಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕ ಆಯ್ಕೆಮಾಡಿ ಫೈಲ್ನೊಂದಿಗೆ ಜೋಡಿಸಲು ಬಯಸಿದರೆ ಹೆಚ್ಚುವರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿರುತ್ತದೆ … ಮತ್ತು ಆಯ್ಕೆಮಾಡಿದ ಫೈಲ್ ಹೆಸರು ಪಠ್ಯ.
<input>ನಾವು ಡೀಫಾಲ್ಟ್ ಫೈಲ್ ಅನ್ನು ಮರೆಮಾಚುತ್ತೇವೆ opacityಮತ್ತು ಬದಲಿಗೆ ಶೈಲಿಯನ್ನು <label>. ಬಟನ್ ಅನ್ನು ರಚಿಸಲಾಗಿದೆ ಮತ್ತು ನೊಂದಿಗೆ ಇರಿಸಲಾಗಿದೆ ::after. ಕೊನೆಯದಾಗಿ, ಸುತ್ತಮುತ್ತಲಿನ ವಿಷಯಕ್ಕೆ ಸರಿಯಾದ ಅಂತರಕ್ಕಾಗಿ ನಾವು ಎ widthಮತ್ತು heightಆನ್ ಅನ್ನು ಘೋಷಿಸುತ್ತೇವೆ.<input>
SCSS ನೊಂದಿಗೆ ತಂತಿಗಳನ್ನು ಭಾಷಾಂತರಿಸುವುದು ಅಥವಾ ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು
" ಬ್ರೌಸ್" ಪಠ್ಯವನ್ನು ಇತರ ಭಾಷೆಗಳಿಗೆ ಅನುವಾದಿಸಲು ಅನುಮತಿಸಲು :lang()ಹುಸಿ-ವರ್ಗವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. $custom-file-textಸಾಸ್ ವೇರಿಯೇಬಲ್ಗೆ ಸಂಬಂಧಿಸಿದ ನಮೂದುಗಳನ್ನು ಅತಿಕ್ರಮಿಸಿ ಅಥವಾ ಸೇರಿಸಿಸಂಬಂಧಿತ ಭಾಷಾ ಟ್ಯಾಗ್ ಮತ್ತು ಸ್ಥಳೀಕರಿಸಿದ ಸ್ಟ್ರಿಂಗ್ಗಳೊಂದಿಗೆಇಂಗ್ಲಿಷ್ ತಂತಿಗಳನ್ನು ಅದೇ ರೀತಿಯಲ್ಲಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ಸ್ಪ್ಯಾನಿಷ್ ಅನುವಾದವನ್ನು ಹೇಗೆ ಸೇರಿಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ (ಸ್ಪ್ಯಾನಿಷ್ ಭಾಷೆಯ ಕೋಡ್ es):
lang(es)ಸ್ಪ್ಯಾನಿಷ್ ಭಾಷಾಂತರಕ್ಕಾಗಿ ಕಸ್ಟಮ್ ಫೈಲ್ ಇನ್ಪುಟ್ನಲ್ಲಿ ಕ್ರಿಯೆಯು ಇಲ್ಲಿದೆ :
ಸರಿಯಾದ ಪಠ್ಯವನ್ನು ತೋರಿಸಲು ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನ ಭಾಷೆಯನ್ನು (ಅಥವಾ ಅದರ ಸಬ್ಟ್ರೀ) ನೀವು ಸರಿಯಾಗಿ ಹೊಂದಿಸಬೇಕಾಗುತ್ತದೆ. ಅಂಶದ ಮೇಲಿನ langಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಮಾಡಬಹುದು ಅಥವಾ ದಿ<html>Content-Languageಇತರ ವಿಧಾನಗಳ ನಡುವೆ HTTP ಹೆಡರ್
HTML ನೊಂದಿಗೆ ತಂತಿಗಳನ್ನು ಭಾಷಾಂತರಿಸುವುದು ಅಥವಾ ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು
data-browseಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಕಸ್ಟಮ್ ಇನ್ಪುಟ್ ಲೇಬಲ್ಗೆ ಸೇರಿಸಬಹುದಾದ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ HTML ನಲ್ಲಿ "ಬ್ರೌಸ್" ಪಠ್ಯವನ್ನು ಭಾಷಾಂತರಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ (ಡಚ್ನಲ್ಲಿ ಉದಾಹರಣೆ):