Sourceଫର୍ମଗୁଡିକ
ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଶ yles ଳୀ, ଲେଆଉଟ୍ ବିକଳ୍ପ, ଏବଂ ବିଭିନ୍ନ ପ୍ରକାରର ଫର୍ମ ସୃଷ୍ଟି ପାଇଁ କଷ୍ଟମ୍ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ଉଦାହରଣ ଏବଂ ବ୍ୟବହାର ନିର୍ଦ୍ଦେଶାବଳୀ |
କ୍ଲାସ୍ ସହିତ ଆମର ପୁନ bo ବୁଟ୍ ଫର୍ମ ଶ yles ଳୀରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ବିସ୍ତାର ହୁଏ | ବ୍ରାଉଜର୍ ଏବଂ ଡିଭାଇସ୍ ମଧ୍ୟରେ ଅଧିକ ସ୍ଥିର ରେଣ୍ଡରିଂ ପାଇଁ ସେମାନଙ୍କର କଷ୍ଟୋମାଇଜଡ୍ ପ୍ରଦର୍ଶନକୁ ଚୟନ କରିବାକୁ ଏହି ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |
ଇମେଲ ଯାଞ୍ଚ, ସଂଖ୍ୟା ଚୟନ, ଏବଂ ଅନ୍ୟାନ୍ୟ ନୂତନ ଇନପୁଟ୍ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକର ଲାଭ ଉଠାଇବା ପାଇଁ ସମସ୍ତ ଇନପୁଟ୍ ଉପରେ ଏକ ଉପଯୁକ୍ତ ଗୁଣ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ type
(ଉଦାହରଣ ସ୍ୱରୂପ, email
ଇମେଲ୍ ଠିକଣା ପାଇଁ କିମ୍ବା ସାଂଖ୍ୟିକ ସୂଚନା ପାଇଁ) |number
ବୁଟଷ୍ଟ୍ରାପ୍ ର ଫର୍ମ ଶ yles ଳୀ ପ୍ରଦର୍ଶନ କରିବାକୁ ଏଠାରେ ଏକ ଶୀଘ୍ର ଉଦାହରଣ | ଆବଶ୍ୟକ ଶ୍ରେଣୀ, ଫର୍ମ ଲେଆଉଟ୍, ଏବଂ ଅଧିକ ଉପରେ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ପାଇଁ ପ reading ଼ନ୍ତୁ |
ପାଠ୍ୟ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ ଯେପରିକି <input>
s, <select>
s, ଏବଂ s - ଶ୍ରେଣୀ <textarea>
ସହିତ ଷ୍ଟାଇଲ୍ ହୋଇଛି | .form-control
ସାଧାରଣ ରୂପ, ଫୋକସ୍ ସ୍ଥିତି, ଆକାର, ଏବଂ ଅଧିକ ପାଇଁ ଶ yles ଳୀ ଅନ୍ତର୍ଭୁକ୍ତ |
ପରବର୍ତ୍ତୀ ଷ୍ଟାଇଲ୍ ଗୁଡିକ ପାଇଁ ଆମର କଷ୍ଟମ୍ ଫର୍ମଗୁଡିକ ଅନୁସନ୍ଧାନ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ <select>
|
ଫାଇଲ୍ ଇନପୁଟ୍ ପାଇଁ, ପାଇଁ ଅଦଳବଦଳ .form-control
କରନ୍ତୁ .form-control-file
|
ପରି କ୍ଲାସ୍ ବ୍ୟବହାର କରି ଉଚ୍ଚତା ସେଟ୍ .form-control-lg
କରନ୍ତୁ .form-control-sm
|
readonly
ଇନପୁଟ୍ ର ମୂଲ୍ୟ ପରିବର୍ତ୍ତନକୁ ରୋକିବା ପାଇଁ ଏକ ଇନପୁଟ୍ ଉପରେ ବୁଲିଅନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ | କେବଳ ପଠନୀୟ ଇନପୁଟଗୁଡ଼ିକ ହାଲୁକା ଦେଖାଯାଏ (ଠିକ୍ ଅକ୍ଷମ ଇନପୁଟ୍ ପରି), କିନ୍ତୁ ମାନକ କର୍ସର୍ ବଜାୟ ରଖନ୍ତୁ |
ଯଦି ତୁମେ <input readonly>
ତୁମର ଫର୍ମରେ ଉପାଦାନଗୁଡ଼ିକୁ ସାଧା ପାଠ୍ୟ ଭାବରେ ଷ୍ଟାଇଲ୍ କରିବାକୁ ଚାହୁଁଛ .form-control-plaintext
, ଡିଫଲ୍ଟ ଫର୍ମ ଫିଲ୍ଡ ଷ୍ଟାଇଲିଂ ଅପସାରଣ କରିବାକୁ ଏବଂ ସଠିକ ମାର୍ଜିନ ଏବଂ ପ୍ୟାଡିଂ ସଂରକ୍ଷଣ କରିବାକୁ ଶ୍ରେଣୀ ବ୍ୟବହାର କର |
ବ୍ୟବହାର କରି ଭୂସମାନ୍ତର ସ୍କ୍ରୋଲେବଲ୍ ପରିସର ଇନପୁଟ୍ ସେଟ୍ କରନ୍ତୁ .form-control-range
|
ଡିଫଲ୍ଟ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓଗୁଡ଼ିକ ସାହାଯ୍ୟରେ ଉନ୍ନତ ହୁଏ .form-check
, ଉଭୟ ଇନପୁଟ୍ ପ୍ରକାର ପାଇଁ ଗୋଟିଏ ଶ୍ରେଣୀ ଯାହା ସେମାନଙ୍କର HTML ଉପାଦାନଗୁଡ଼ିକର ଲେଆଉଟ୍ ଏବଂ ଆଚରଣରେ ଉନ୍ନତି ଆଣେ | ଚେକ୍ ବକ୍ସଗୁଡିକ ଏକ ତାଲିକାରେ ଗୋଟିଏ କିମ୍ବା ଅନେକ ବିକଳ୍ପ ବାଛିବା ପାଇଁ, ଯେତେବେଳେ କି ରେଡିଓଗୁଡ଼ିକ ଅନେକଙ୍କ ମଧ୍ୟରୁ ଗୋଟିଏ ବିକଳ୍ପ ବାଛିବା ପାଇଁ |
ଅକ୍ଷମ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ସମର୍ଥିତ, କିନ୍ତୁ not-allowed
ପିତାମାତାଙ୍କ ହୋଭରରେ ଏକ କର୍ସର୍ ପ୍ରଦାନ କରିବାକୁ <label>
, ଆପଣଙ୍କୁ ଏଥିରେ disabled
ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡିବାକୁ ପଡିବ .form-check-input
| ଅକ୍ଷମ ଗୁଣ ଇନପୁଟ୍ ସ୍ଥିତିକୁ ସୂଚାଇବାରେ ସାହାଯ୍ୟ କରିବାକୁ ଏକ ହାଲୁକା ରଙ୍ଗ ପ୍ରୟୋଗ କରିବ |
ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ବ୍ୟବହାର HTML- ଆଧାରିତ ଫର୍ମ ବ ation ଧତାକୁ ସମର୍ଥନ କରିବା ଏବଂ ସଂକ୍ଷିପ୍ତ, ଉପଲବ୍ଧ ଲେବଲ୍ ଯୋଗାଇବା ପାଇଁ ନିର୍ମିତ | ଏହିପରି, ଆମର <input>
s ଏବଂ <label>
s ହେଉଛି ଭାଇଭାଇନ୍ ଉପାଦାନ, a <input>
ଭିତରେ ଥିବା ବିପରୀତ <label>
| ଏହା ସାମାନ୍ୟ ଅଧିକ ଭର୍ସବୋଜ୍ ଅଟେ ଯେହେତୁ ଆପଣ id
ଏବଂfor
<input>
<label>
ଡିଫଲ୍ଟ ଭାବରେ, ଯେକ any ଣସି ସଂଖ୍ୟକ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ଯାହା ତୁରନ୍ତ ଭାଇଭଉଣୀ, ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକ୍ ହୋଇ ଉପଯୁକ୍ତ ଭାବରେ ବ୍ୟବହୃତ ହେବ .form-check
|
.form-check-inline
ଯେକ any ଣସି ଯୋଗ କରି ସମାନ ଭୂସମାନ୍ତର ଧାଡିରେ ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓ ଗ୍ରୁପ୍ କରନ୍ତୁ .form-check
|
.position-static
ଭିତରେ ଥିବା ଇନପୁଟ୍ ସହିତ ଯୋଡନ୍ତୁ ଯେଉଁଥିରେ କ .form-check
label ଣସି ଲେବଲ୍ ଟେକ୍ସଟ୍ ନାହିଁ | ସହାୟକ ଟେକ୍ନୋଲୋଜି ପାଇଁ ତଥାପି କିଛି ଲେବଲ୍ ପ୍ରଦାନ କରିବାକୁ ମନେରଖ (ଉଦାହରଣ ସ୍ୱରୂପ, ବ୍ୟବହାର aria-label
) |
ଯେହେତୁ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରଯୁଜ୍ୟ display: block
ଏବଂ width: 100%
ଆମର ପ୍ରାୟ ସମସ୍ତ ଫର୍ମ ନିୟନ୍ତ୍ରଣରେ, ଫର୍ମଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକ ହେବ | ପ୍ରତି ଫର୍ମ ଆଧାରରେ ଏହି ଲେଆଉଟ୍ ବଦଳାଇବା ପାଇଁ ଅତିରିକ୍ତ କ୍ଲାସ୍ ବ୍ୟବହାର କରାଯାଇପାରିବ |
.form-group
ଫର୍ମରେ କିଛି ଗଠନ ଯୋଡିବା ପାଇଁ ଶ୍ରେଣୀ ହେଉଛି ସହଜ ଉପାୟ | ଏହା ଏକ ନମନୀୟ ଶ୍ରେଣୀ ପ୍ରଦାନ କରେ ଯାହା ଲେବଲ୍, ନିୟନ୍ତ୍ରଣ, ବ help କଳ୍ପିକ ସହାୟତା ପାଠ୍ୟ, ଏବଂ ବ valid ଧତା ମେସେଜିଂର ସଠିକ୍ ଗୋଷ୍ଠୀକରଣକୁ ଉତ୍ସାହିତ କରେ | ଡିଫଲ୍ଟ ଭାବରେ ଏହା କେବଳ ପ୍ରଯୁଜ୍ୟ margin-bottom
, କିନ୍ତୁ ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଏହା ଅତିରିକ୍ତ ଶ yles ଳୀ ଉଠାଏ .form-inline
| <fieldset>
ଏହାକୁ s, <div>
s, କିମ୍ବା ଅନ୍ୟ କ element ଣସି ଉପାଦାନ ସହିତ ବ୍ୟବହାର କରନ୍ତୁ |
ଆମର ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରି ଅଧିକ ଜଟିଳ ଫର୍ମ ନିର୍ମାଣ କରାଯାଇପାରିବ | ଫର୍ମ ଲେଆଉଟ୍ ପାଇଁ ଏହାକୁ ବ୍ୟବହାର କରନ୍ତୁ ଯାହା ଏକାଧିକ ସ୍ତମ୍ଭ, ବିଭିନ୍ନ ପ୍ରସ୍ଥ ଏବଂ ଅତିରିକ୍ତ ଆଲାଇନ୍ମେଣ୍ଟ ବିକଳ୍ପ ଆବଶ୍ୟକ କରେ |
ଆପଣ ମଧ୍ୟ ଅଦଳବଦଳ କରିପାରିବେ .row
, .form-row
ଆମର ମାନକ ଗ୍ରୀଡ୍ ଧାଡିର ଏକ ପରିବର୍ତ୍ତନ ଯାହା କଠିନ ଏବଂ ଅଧିକ କମ୍ପାକ୍ଟ ଲେଆଉଟ୍ ପାଇଁ ଡିଫଲ୍ଟ ସ୍ତମ୍ଭ ଗୁଟର୍ଗୁଡ଼ିକୁ ନବଲିଖନ କରେ |
ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ସହିତ ଅଧିକ ଜଟିଳ ଲେଆଉଟ୍ ମଧ୍ୟ ସୃଷ୍ଟି କରାଯାଇପାରେ |
.row
ଗୋଷ୍ଠୀ ଗଠନ ପାଇଁ ଶ୍ରେଣୀ ଯୋଗ କରି .col-*-*
ଏବଂ ଆପଣଙ୍କର ଲେବଲ୍ ଏବଂ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକର ମୋଟେଇ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରି ଗ୍ରୀଡ୍ ସହିତ ଭୂସମାନ୍ତର ଫର୍ମ ସୃଷ୍ଟି କରନ୍ତୁ | .col-form-label
ଆପଣଙ୍କର s ସହିତ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ <label>
ତେଣୁ ସେମାନେ ସେମାନଙ୍କର ସଂପୃକ୍ତ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ସହିତ ଭୂଲମ୍ବ ଭାବରେ କେନ୍ଦ୍ରିତ |
ବେଳେବେଳେ, ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା ସେହି ସିଦ୍ଧ ଆଲାଇନ୍ମେଣ୍ଟ ସୃଷ୍ଟି କରିବାକୁ ଆପଣଙ୍କୁ ବୋଧହୁଏ ମାର୍ଜିନ୍ କିମ୍ବା ପ୍ୟାଡିଂ ୟୁଟିଲିଟି ବ୍ୟବହାର କରିବାକୁ ପଡିବ | ଉଦାହରଣ ସ୍ୱରୂପ, padding-top
ଟେକ୍ସଟ୍ ବେସ୍ ଲାଇନ୍ କୁ ଭଲ ଭାବରେ ଆଲାଇନ୍ କରିବା ପାଇଁ ଆମେ ଆମର ଷ୍ଟାକ୍ ହୋଇଥିବା ରେଡିଓ ଇନପୁଟ୍ ଲେବଲ୍ ରେ ଅପସାରଣ କରିଛୁ |
ଏହାର ଆକାରକୁ ସଠିକ୍ ଭାବରେ ଅନୁସରଣ କରିବାକୁ କିମ୍ବା ଆପଣଙ୍କର s କିମ୍ବା s .col-form-label-sm
କୁ .col-form-label-lg
ବ୍ୟବହାର <label>
କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |<legend>
.form-control-lg
.form-control-sm
ପୂର୍ବ ଉଦାହରଣଗୁଡିକରେ ଦେଖାଯାଇଥିବା ପରି, ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଆପଣଙ୍କୁ ଯେକ any ଣସି ସଂଖ୍ୟକ .col
s କୁ ଏକ .row
କିମ୍ବା ଭିତରେ ରଖିବାକୁ ଅନୁମତି ଦିଏ .form-row
| ସେମାନେ ଉପଲବ୍ଧ ପ୍ରସ୍ଥକୁ ସମାନ ଭାବରେ ଭାଗ କରିବେ | ଅଧିକ କିମ୍ବା କମ ସ୍ଥାନ ନେବାକୁ ଆପଣ ଆପଣଙ୍କର ସ୍ତମ୍ଭର ଏକ ସବ୍ସେଟ୍ ମଧ୍ୟ ବାଛିପାରନ୍ତି, ଯେତେବେଳେ .col
ଅବଶିଷ୍ଟଗୁଡିକ ସମାନ ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡିକ ସହିତ ବାକିଗୁଡ଼ିକୁ ସମାନ ଭାବରେ ବିଭକ୍ତ କରନ୍ତି .col-7
|
.col
ନିମ୍ନୋକ୍ତ ଉଦାହରଣଟି ବିଷୟବସ୍ତୁ ଏବଂ ପରିବର୍ତ୍ତନଗୁଡ଼ିକୁ ଭୂଲମ୍ବ ଭାବରେ କେନ୍ଦ୍ର କରିବା ପାଇଁ ଏକ ଫ୍ଲେକ୍ସବକ୍ସ ଉପଯୋଗିତା ବ୍ୟବହାର କରେ ଯାହା ଦ୍ .col-auto
your ାରା ଆପଣଙ୍କର ସ୍ତମ୍ଭଗୁଡ଼ିକ କେବଳ ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଅଧିକ ସ୍ଥାନ ନେଇଥାଏ | ଅନ୍ୟ ଏକ ଉପାୟ ରଖନ୍ତୁ, ବିଷୟବସ୍ତୁ ଉପରେ ଆଧାର କରି ସ୍ତମ୍ଭ ନିଜେ ଆକାର କରେ |
ତାପରେ ଆପଣ ସାଇଜ୍ ନିର୍ଦ୍ଦିଷ୍ଟ ସ୍ତମ୍ଭ କ୍ଲାସ୍ ସହିତ ପୁଣି ଥରେ ରିମିକ୍ସ କରିପାରିବେ |
ଏବଂ ଅବଶ୍ୟ କଷ୍ଟମ୍ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ସମର୍ଥିତ |
.form-inline
ଗୋଟିଏ ଭୂସମାନ୍ତର ଧାଡିରେ ଲେବଲ୍, ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍ ଏବଂ ବଟନ୍ଗୁଡ଼ିକର ଏକ କ୍ରମ ପ୍ରଦର୍ଶନ କରିବାକୁ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ | ଇନଲାଇନ ଫର୍ମ ମଧ୍ୟରେ ଥିବା ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ ସେମାନଙ୍କର ଡିଫଲ୍ଟ ସ୍ଥିତିରୁ ସାମାନ୍ୟ ଭିନ୍ନ |
- ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ ହେଉଛି , ଯେକ HTML ଣସି HTML ଧଳା ସ୍ଥାନକୁ ନଷ୍ଟ କରି ସ୍ପେସ୍ ଏବଂ ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟି
display: flex
ସହିତ ଆଲାଇନ୍ମେଣ୍ଟ କଣ୍ଟ୍ରୋଲ୍ ପ୍ରଦାନ କରିବାକୁ ଅନୁମତି ଦିଏ |
width: auto
ବୁଟଷ୍ଟ୍ରାପ୍ ଡିଫଲ୍ଟକୁ ନବଲିଖନ କରିବାକୁ ନିୟନ୍ତ୍ରଣ ଏବଂ ଇନପୁଟ୍ ଗୋଷ୍ଠୀ ଗ୍ରହଣ କରନ୍ତି width: 100%
|
- କଣ୍ଟ୍ରୋଲ୍ କେବଳ ଭ୍ୟୁପୋର୍ଟରେ ଇନଲାଇନରେ ଦେଖାଯାଏ ଯାହା ମୋବାଇଲ୍ ଡିଭାଇସରେ ସଂକୀର୍ଣ୍ଣ ଦୃଶ୍ୟ ପାଇଁ ଆକାଉଣ୍ଟ୍ କରିବାକୁ ଅତି କମରେ 576px ଚଉଡା |
ବ୍ୟବଧାନ ଉପଯୋଗୀତା ସହିତ (ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି) ଆପଣଙ୍କୁ ବ୍ୟକ୍ତିଗତ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକର ମୋଟେଇ ଏବଂ ଆଲାଇନ୍ମେଣ୍ଟକୁ ମାନୁଆଲୀ ଠିକଣା କରିବାକୁ ପଡିବ | ଶେଷରେ, ପ୍ରତ୍ୟେକ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ସହିତ ସର୍ବଦା ଏକ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ <label>
, ଯଦିଓ ଆପଣ ଏହାକୁ ଅଣ-ସ୍କ୍ରିନ୍ ରିଡର୍ ପରିଦର୍ଶକମାନଙ୍କ ସହିତ ଲୁଚାଇବାକୁ ଆବଶ୍ୟକ କରନ୍ତି .sr-only
|
କଷ୍ଟମ୍ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଏବଂ ଚୟନ ମଧ୍ୟ ସମର୍ଥିତ |
ଲୁକ୍କାୟିତ ଲେବଲ୍ ପାଇଁ ବିକଳ୍ପ |
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଯେପରିକି ସ୍କ୍ରିନ୍ ପାଠକ ଆପଣଙ୍କ ଫର୍ମରେ ଅସୁବିଧାର ସମ୍ମୁଖୀନ ହେବେ ଯଦି ଆପଣ ପ୍ରତ୍ୟେକ ଇନପୁଟ୍ ପାଇଁ ଏକ ଲେବଲ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତି ନାହିଁ | ଏହି ଇନଲାଇନ ଫର୍ମଗୁଡିକ ପାଇଁ, ଆପଣ .sr-only
ଶ୍ରେଣୀ ବ୍ୟବହାର କରି ଲେବଲ୍ ଲୁଚାଇ ପାରିବେ | ସହାୟକ ଟେକ୍ନୋଲୋଜି ପାଇଁ ଏକ ଲେବଲ୍ ପ୍ରଦାନ କରିବାର ଆହୁରି ବିକଳ୍ପ ପଦ୍ଧତି ଅଛି, ଯେପରିକି aria-label
, aria-labelledby
କିମ୍ବା title
ଗୁଣ | ଯଦି ଏଥିରୁ କ none ଣସିଟି ଉପସ୍ଥିତ ନଥାଏ, ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଗୁଣବତ୍ତା ବ୍ୟବହାର କରିବାକୁ ବ୍ୟବହାର କରିପାରନ୍ତି placeholder
, ଯଦି ଉପସ୍ଥିତ ଥାଆନ୍ତି, କିନ୍ତୁ ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ placeholder
ଅନ୍ୟ ଲେବେଲିଂ ପଦ୍ଧତିଗୁଡିକ ପାଇଁ ଏକ ବଦଳ ଭାବରେ ବ୍ୟବହାର କରିବାକୁ ପରାମର୍ଶ ଦିଆଯାଇନଥାଏ |
ଫର୍ମରେ ବ୍ଲକ ସ୍ତରୀୟ ସହାୟତା ପାଠ୍ୟ ବ୍ୟବହାର କରି ସୃଷ୍ଟି କରାଯାଇପାରିବ (ପୂର୍ବରୁ v3 .form-text
ଭାବରେ ଜଣାଶୁଣା ) | .help-block
ଯେକ any ଣସି ଇନଲାଇନ୍ HTML ଉପାଦାନ ଏବଂ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରି ଇନଲାଇନ୍ ହେଲପ୍ ଟେକ୍ସଟ୍ ନମନୀୟ ଭାବରେ କାର୍ଯ୍ୟକାରୀ ହୋଇପାରିବ .text-muted
|
ଫର୍ମ ନିୟନ୍ତ୍ରଣ ସହିତ ସାହାଯ୍ୟ ପାଠ୍ୟକୁ ଯୋଡିବା |
aria-describedby
ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର ସହିତ ଜଡିତ ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍ ସହିତ ହେଲପ୍ ଟେକ୍ସଟ୍ ସ୍ପଷ୍ଟ ଭାବରେ ଜଡିତ ହେବା ଉଚିତ | ଏହା ସୁନିଶ୍ଚିତ କରିବ ଯେ ସହାୟକ ଟେକ୍ନୋଲୋଜି ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ - ଯେତେବେଳେ ଉପଭୋକ୍ତା ନିୟନ୍ତ୍ରଣରେ ପ୍ରବେଶ କରନ୍ତି କିମ୍ବା ପ୍ରବେଶ କରନ୍ତି ଏହି ସହାୟତା ପାଠ୍ୟ ଘୋଷଣା କରିବେ |
ଇନପୁଟ୍ ତଳେ ଥିବା ଟେକ୍ସଟ୍ ସହିତ ଷ୍ଟାଇଲ୍ ହୋଇପାରିବ .form-text
| display: block
ଉପରୋକ୍ତ ଇନପୁଟରୁ ସହଜ ବ୍ୟବଧାନ ପାଇଁ ଏହି ଶ୍ରେଣୀ କିଛି ଟପ୍ ମାର୍ଜିନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |
ଆପଣଙ୍କର ପାସୱାର୍ଡ ନିଶ୍ଚିତ ଭାବରେ 8-20 ଅକ୍ଷର ଲମ୍ବା, ଅକ୍ଷର ଏବଂ ସଂଖ୍ୟା ଧାରଣ କରିବା ଆବଶ୍ୟକ, ଏବଂ ସ୍ପେସ୍, ସ୍ୱତନ୍ତ୍ର ବର୍ଣ୍ଣ, କିମ୍ବା ଇମୋଜି ଧାରଣ କରିବା ଉଚିତ୍ ନୁହେଁ |
ଇନଲାଇନ ପାଠ୍ୟ ଯେକ any ଣସି ସାଧାରଣ ଇନଲାଇନ HTML ଉପାଦାନ ବ୍ୟବହାର କରିପାରିବ (ଏହା ହେଉ <small>
, <span>
କିମ୍ବା ଅନ୍ୟ କିଛି) ଏକ ଉପଯୋଗୀ ଶ୍ରେଣୀ ବ୍ୟତୀତ ଆଉ କିଛି ନୁହେଁ |
disabled
ଉପଭୋକ୍ତା ପାରସ୍ପରିକ କାର୍ଯ୍ୟକୁ ରୋକିବା ଏବଂ ଏହାକୁ ହାଲୁକା ଦେଖାଯିବା ପାଇଁ ଏକ ଇନପୁଟ୍ ଉପରେ ବୁଲିଅନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ |
ଭିତରେ ଥିବା ସମସ୍ତ ନିୟନ୍ତ୍ରଣକୁ ଅକ୍ଷମ କରିବାକୁ disabled
ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ |<fieldset>
ଲଙ୍ଗର ସହିତ ସାବଧାନ |
ଡିଫଲ୍ଟ ଭାବରେ, ବ୍ରାଉଜର୍ ଗୁଡିକ ସମସ୍ତ ଦେଶୀ ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍ ( ଏବଂ ଉପାଦାନଗୁଡିକ) କୁ ଅକ୍ଷମ ଭାବରେ ବ୍ୟବହାର କରିବେ <input>
, ଉଭୟ କୀବୋର୍ଡ୍ ଏବଂ ମାଉସ୍ ପାରସ୍ପରିକ କାର୍ଯ୍ୟକୁ ପ୍ରତିରୋଧ କରିବେ | ଯଦିଓ, ଯଦି ଆପଣଙ୍କର ଫର୍ମରେ ଉପାଦାନଗୁଡିକ ମଧ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ ହୁଏ, ତେବେ ସେମାନଙ୍କୁ କେବଳ ଏକ ଶ style ଳୀ ଦିଆଯିବ | ବଟନ୍ ପାଇଁ ଅକ୍ଷମ ଅବସ୍ଥା ବିଷୟରେ ବିଭାଗରେ ସୂଚିତ କରାଯାଇଛି (ଏବଂ ବିଶେଷ ଭାବରେ ଆଙ୍କର୍ ଉପାଦାନଗୁଡିକ ପାଇଁ ଉପ-ବିଭାଗରେ), ଏହି CSS ସମ୍ପତ୍ତି ଏପର୍ଯ୍ୟନ୍ତ ମାନକ ହୋଇନାହିଁ ଏବଂ ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 10 ରେ ସମ୍ପୂର୍ଣ୍ଣ ଭାବରେ ସମର୍ଥିତ ନୁହେଁ, ଏବଂ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କୁ ପ୍ରତିରୋଧ କରିବ ନାହିଁ | ଏହି ଲିଙ୍କଗୁଡ଼ିକୁ ଧ୍ୟାନ ଦେବାକୁ କିମ୍ବା ସକ୍ରିୟ କରିବାକୁ ସକ୍ଷମ | ତେଣୁ ସୁରକ୍ଷିତ ରହିବାକୁ, ଏହିପରି ଲିଙ୍କଗୁଡ଼ିକୁ ଅକ୍ଷମ କରିବାକୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ |<select>
<button>
<fieldset disabled>
<a ... class="btn btn-*">
pointer-events: none
କ୍ରସ୍ ବ୍ରାଉଜର୍ ସୁସଙ୍ଗତତା |
ଯେତେବେଳେ ବୁଟଷ୍ଟ୍ରାପ୍ ସମସ୍ତ ବ୍ରାଉଜରରେ ଏହି ଶ yles ଳୀଗୁଡିକ ପ୍ରୟୋଗ କରିବ, ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 11 ଏବଂ ନିମ୍ନରେ disabled
a ଉପରେ ଥିବା ଗୁଣକୁ ସମ୍ପୂର୍ଣ୍ଣ ସମର୍ଥନ କରେ ନାହିଁ <fieldset>
| ଏହି ବ୍ରାଉଜର୍ ଗୁଡିକରେ ଫିଲ୍ଡସେଟ୍ ଅକ୍ଷମ କରିବାକୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ |
ଆମର ସମସ୍ତ ସମର୍ଥିତ ବ୍ରାଉଜରରେ ଉପଲବ୍ଧ HTML5 ଫର୍ମ ବ ation ଧତା ସହିତ ଆପଣଙ୍କର ଉପଭୋକ୍ତାମାନଙ୍କୁ ମୂଲ୍ୟବାନ, କାର୍ଯ୍ୟକ୍ଷମ ମତାମତ ପ୍ରଦାନ କରନ୍ତୁ | ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ ବ valid ଧତା ମତାମତରୁ ବାଛନ୍ତୁ, କିମ୍ବା ଆମର ବିଲ୍ଟ-ଇନ୍ କ୍ଲାସ୍ ଏବଂ ଷ୍ଟାର୍ଟର୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ କଷ୍ଟମ୍ ବାର୍ତ୍ତା କାର୍ଯ୍ୟକାରୀ କରନ୍ତୁ |
ଆମେ ବର୍ତ୍ତମାନ କଷ୍ଟମ୍ ବ valid ଧତା ଶ yles ଳୀ ବ୍ୟବହାର କରିବାକୁ ସୁପାରିଶ କରୁ, ଯେହେତୁ ଦେଶୀ ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ ବ valid ଧତା ବାର୍ତ୍ତା ସବୁ ବ୍ରାଉଜରରେ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା (କ୍ରମାଗତ ଭାବରେ ଡେସ୍କଟପ୍ ଏବଂ ମୋବାଇଲରେ କ୍ରୋମ୍) ର ସମ୍ମୁଖୀନ ହୁଏ ନାହିଁ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସହିତ ଫର୍ମ ବ valid ଧିକରଣ କିପରି କାର୍ଯ୍ୟ କରେ ତାହା ଏଠାରେ ଅଛି:
- CSS ର ଦୁଇଟି ଛଦ୍ମ-ଶ୍ରେଣୀ ମାଧ୍ୟମରେ HTML ଫର୍ମ ବ valid ଧତା ପ୍ରୟୋଗ କରାଯାଏ,
:invalid
ଏବଂ :valid
। <input>
ଏହା , <select>
ଏବଂ <textarea>
ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ପ୍ରଯୁଜ୍ୟ |
- ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ୟାରେଣ୍ଟ୍ ଶ୍ରେଣୀରେ
:invalid
ଏବଂ ଶ yles ଳୀକୁ ସ୍କୋପ୍ କରେ , ସାଧାରଣତ the ଏଥିରେ ପ୍ରୟୋଗ କରାଯାଏ | ଅନ୍ୟଥା, ମୂଲ୍ୟ ବିନା ଯେକ required ଣସି ଆବଶ୍ୟକୀୟ କ୍ଷେତ୍ର ପୃଷ୍ଠା ଲୋଡ୍ ଉପରେ ଅବ alid ଧ ଦେଖାଯାଏ | ଏହି ଉପାୟରେ, ଆପଣ ସେଗୁଡିକୁ କେବେ ସକ୍ରିୟ କରିବେ ତାହା ବାଛିପାରିବେ (ସାଧାରଣତ form ଫର୍ମ ଦାଖଲ ପ୍ରୟାସ ପରେ) |:valid
.was-validated
<form>
- ଫର୍ମର ରୂପକୁ ପୁନ res ସେଟ୍ କରିବାକୁ (ଉଦାହରଣ ସ୍ୱରୂପ, AJAX ବ୍ୟବହାର କରି ଗତିଶୀଳ ଫର୍ମ ସବମିସନ୍ କ୍ଷେତ୍ରରେ), ଦାଖଲ ପରେ ପୁନର୍ବାର
.was-validated
ଶ୍ରେଣୀକୁ ଅପସାରଣ କର |<form>
- ଏକ ଫଲବ୍ୟାକ୍ ଭାବରେ,
.is-invalid
ଏବଂ ସର୍ଭର ପାର୍ଶ୍ୱ ବ.is-valid
valid ଧତା ପାଇଁ ଛଦ୍ମ-ଶ୍ରେଣୀ ବଦଳରେ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହୃତ ହୋଇପାରେ | ସେମାନେ ଏକ ପିତାମାତା ଶ୍ରେଣୀ ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ |.was-validated
- CSS କିପରି କାର୍ଯ୍ୟ କରେ ସେଥିରେ ପ୍ରତିବନ୍ଧକ ହେତୁ, ଆମେ (ବର୍ତ୍ତମାନ)
<label>
କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବିନା DOM ରେ ଏକ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ପୂର୍ବରୁ ଆସୁଥିବା ଶ yles ଳୀକୁ ପ୍ରୟୋଗ କରିପାରିବୁ ନାହିଁ |
- ସମସ୍ତ ଆଧୁନିକ ବ୍ରାଉଜର୍ଗୁଡ଼ିକ ସୀମିତ ବ valid ଧତା API କୁ ସମର୍ଥନ କରେ , ଫର୍ମ ନିୟନ୍ତ୍ରଣକୁ ବ valid ଧ କରିବା ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟ ପଦ୍ଧତିର ଏକ କ୍ରମ |
- ଫିଡବ୍ୟାକ୍ ବାର୍ତ୍ତାଗୁଡିକ ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ (ପ୍ରତ୍ୟେକ ବ୍ରାଉଜର୍ ପାଇଁ ଭିନ୍ନ, ଏବଂ CSS ମାଧ୍ୟମରେ ଅସ୍ଥିର) କିମ୍ବା ଅତିରିକ୍ତ HTML ଏବଂ CSS ସହିତ ଆମର କଷ୍ଟମ୍ ଫିଡବ୍ୟାକ୍ ଶ yles ଳୀ ବ୍ୟବହାର କରିପାରିବ |
- ଆପଣ ଜାଭାସ୍କ୍ରିପ୍ଟରେ କଷ୍ଟମ୍ ବ valid ଧତା ବାର୍ତ୍ତା ପ୍ରଦାନ କରିପାରନ୍ତି
setCustomValidity
|
ଏହାକୁ ଦୃଷ୍ଟିରେ ରଖି ଆମର କଷ୍ଟମ୍ ଫର୍ମ ବ valid ଧତା ଶ yles ଳୀ, ଇଚ୍ଛାଧୀନ ସର୍ଭର ପାର୍ଶ୍ୱ ଶ୍ରେଣୀ, ଏବଂ ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ ପାଇଁ ନିମ୍ନଲିଖିତ ଡେମୋଗୁଡ଼ିକୁ ବିଚାର କରନ୍ତୁ |
କଷ୍ଟମ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଫର୍ମ ବ valid ଧତା ବାର୍ତ୍ତା ପାଇଁ, ତୁମକୁ novalidate
ବୁଲିୟନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡିବାକୁ ପଡିବ <form>
| ଏହା ବ୍ରାଉଜରର ଡିଫଲ୍ଟ ଫିଡବ୍ୟାକ୍ ଟୁଲ୍ ଟିପ୍ସକୁ ଅକ୍ଷମ କରିଥାଏ, ତଥାପି ଜାଭାସ୍କ୍ରିପ୍ଟରେ ଫର୍ମ ବ valid ଧତା API କୁ ପ୍ରବେଶ ପ୍ରଦାନ କରିଥାଏ | ନିମ୍ନରେ ଫର୍ମ ଦାଖଲ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ; ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଦାଖଲ ବଟନ୍ କୁ ଅଟକାଇବ ଏବଂ ଆପଣଙ୍କୁ ରିଲେ ଫିଡବ୍ୟାକ୍ କରିବ |
ଦାଖଲ କରିବାକୁ ଚେଷ୍ଟା କରିବାବେଳେ, ତୁମେ ତୁମର ଫର୍ମ ନିୟନ୍ତ୍ରଣରେ ପ୍ରୟୋଗ ହୋଇଥିବା ଶ yles ଳୀଗୁଡ଼ିକୁ :invalid
ଦେଖିବ |:valid
କଷ୍ଟମ୍ ବ valid ଧତା ମତାମତ ବାର୍ତ୍ତା କିମ୍ବା ଫର୍ମ ଆଚରଣ ପରିବର୍ତ୍ତନ କରିବାକୁ ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖିବାକୁ ଆଗ୍ରହୀ ନୁହଁନ୍ତି? ସମସ୍ତ ଭଲ, ଆପଣ ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ ବ୍ୟବହାର କରିପାରିବେ | ନିମ୍ନରେ ଫର୍ମ ଦାଖଲ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ | ଆପଣଙ୍କର ବ୍ରାଉଜର୍ ଏବଂ OS ଉପରେ ନିର୍ଭର କରି, ଆପଣ ଟିକେ ଭିନ୍ନ ମତାମତ ଶ style ଳୀ ଦେଖିବେ |
ଯେତେବେଳେ ଏହି ଫିଡବ୍ୟାକ୍ ଶ yles ଳୀଗୁଡିକ CSS ସହିତ ଷ୍ଟାଇଲ୍ ହୋଇପାରିବ ନାହିଁ, ତଥାପି ଆପଣ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଫିଡବ୍ୟାକ୍ ଟେକ୍ସଟ୍ କଷ୍ଟୋମାଇଜ୍ କରିପାରିବେ |
ଆମେ କ୍ଲାଏଣ୍ଟ ସାଇଡ୍ ବ ation ଧତା ବ୍ୟବହାର କରିବାକୁ ସୁପାରିଶ କରୁ, କିନ୍ତୁ ଯଦି ଆପଣ ସର୍ଭର ପାର୍ଶ୍ୱ ଆବଶ୍ୟକ କରନ୍ତି, ତେବେ ଆପଣ ଏବଂ ସହିତ ଅବ alid ଧ ଏବଂ ବ valid ଧ ଫର୍ମ ଫିଲ୍ଡଗୁଡିକ ସୂଚାଇ .is-invalid
ପାରିବେ .is-valid
| ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ .invalid-feedback
ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ମଧ୍ୟ ସମର୍ଥିତ |
ଆମର ଉଦାହରଣ ଫର୍ମଗୁଡିକ <input>
ଉପରେ ଦେଶୀ ପାଠ୍ୟ s ଦେଖାଏ, କିନ୍ତୁ ଫର୍ମ ବ valid ଧତା ଶ yles ଳୀ ଆମର କଷ୍ଟମ୍ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ପାଇଁ ମଧ୍ୟ ଉପଲବ୍ଧ |
ଯଦି ଆପଣଙ୍କର ଫର୍ମ ଲେଆଉଟ୍ ଏହାକୁ ଅନୁମତି ଦିଏ, ଆପଣ ଏକ ଷ୍ଟାଇଲ୍ ଟୁଲ୍ ଟିପ୍ ରେ ବ valid ଧତା ମତାମତ ପ୍ରଦର୍ଶନ କରିବାକୁ .{valid|invalid}-feedback
କ୍ଲାସ୍ ପାଇଁ କ୍ଲାସ୍ ଅଦଳବଦଳ କରିପାରିବେ | ଟୁଲ୍ ଟିପ୍ ପୋଜିସନ୍ ପାଇଁ .{valid|invalid}-tooltip
ଏଥିରେ ଏକ ପିତାମାତା ଥିବା ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | position: relative
ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମର ସ୍ତମ୍ଭ ଶ୍ରେଣୀର ଏହା ପୂର୍ବରୁ ଅଛି, କିନ୍ତୁ ଆପଣଙ୍କର ପ୍ରୋଜେକ୍ଟ ଏକ ବିକଳ୍ପ ସେଟଅପ୍ ଆବଶ୍ୟକ କରିପାରନ୍ତି |
ଅଧିକ କଷ୍ଟୋମାଇଜେସନ୍ ଏବଂ କ୍ରସ୍ ବ୍ରାଉଜର୍ ସ୍ଥିରତା ପାଇଁ, ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟକୁ ବଦଳାଇବା ପାଇଁ ଆମର ସମ୍ପୂର୍ଣ୍ଣ କଷ୍ଟମ୍ ଫର୍ମ ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | ସେଗୁଡ଼ିକ ଅର୍ଥଗତ ଏବଂ ଉପଲବ୍ଧ ମାର୍କଅପ୍ ଉପରେ ନିର୍ମିତ, ତେଣୁ ସେମାନେ ଯେକ any ଣସି ଡିଫଲ୍ଟ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ପାଇଁ ଦୃ solid ସ୍ଥାନାନ୍ତର |
ଆମର କଷ୍ଟମ୍ କଣ୍ଟ୍ରୋଲ୍ ଏବଂ ସାଙ୍ଗରେ ଥିବା ପାଠ୍ୟ ପାଇଁ ପ୍ରତ୍ୟେକ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ <div>
ଏକ ଭାଇଭଉଣୀ ସହିତ ଗୁଡ଼ାଯାଇଥାଏ | ଗଠନମୂଳକ ଭାବରେ, ଏହା ଆମର ଡିଫଲ୍ଟ ସହିତ ସମାନ ଉପାୟ |<span>
<label>
.form-check
ଆମର କଷ୍ଟମ୍ ଫର୍ମ ସୂଚକକୁ ସଠିକ୍ ଭାବରେ ଷ୍ଟାଇଲ୍ କରିବା ପାଇଁ ଆମେ ଆମର ସମସ୍ତ ରାଜ୍ୟ ପାଇଁ ଭାଇଭାଇନ୍ ସିଲେକ୍ଟର୍ ( ~
) ବ୍ୟବହାର କରୁ | ଯେତେବେଳେ କ୍ଲାସ୍ ସହିତ ମିଳିତ ହୁଏ , ଆମେ ସ୍ଥିତି ଉପରେ ଆଧାର କରି ପ୍ରତ୍ୟେକ ଆଇଟମ୍ ପାଇଁ ଟେକ୍ସଟ୍ ମଧ୍ୟ ଷ୍ଟାଇଲ୍ କରିପାରିବା |<input>
:checked
.custom-control-label
<input>
ଆମେ ଡିଫଲ୍ଟ <input>
ସହିତ ଲୁଚାଇଥାଉ ଏବଂ ଏହାର ସ୍ଥାନରେ ଏକ ନୂତନ କଷ୍ଟମ୍ ଫର୍ମ ସୂଚକ ନିର୍ମାଣ କରିବାକୁ opacity
ବ୍ୟବହାର କରୁ | ଦୁର୍ଭାଗ୍ୟବଶତ we ଆମେ କେବଳ ଏକ କଷ୍ଟମ୍ ନିର୍ମାଣ କରିପାରିବୁ ନାହିଁ କାରଣ CSS ସେହି ଉପାଦାନରେ କାମ କରେ ନାହିଁ |.custom-control-label
::before
::after
<input>
content
ଯାଞ୍ଚ ହୋଇଥିବା ଅବସ୍ଥାରେ, ଆମେ ଓପନ୍ ଆଇକନିକ୍ ରୁ ଆଧାର 64 ଏମ୍ବେଡ୍ ହୋଇଥିବା SVG ଆଇକନ୍ ବ୍ୟବହାର କରୁ | ବ୍ରାଉଜର୍ ଏବଂ ଡିଭାଇସ୍ ମଧ୍ୟରେ ଷ୍ଟାଇଲ୍ ଏବଂ ପୋଜିସନ୍ ପାଇଁ ଏହା ଆମକୁ ସର୍ବୋତ୍ତମ ନିୟନ୍ତ୍ରଣ ପ୍ରଦାନ କରେ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ମାନୁଆଲୀ ସେଟ୍ ହେବାବେଳେ କଷ୍ଟମ୍ ଚେକ୍ ବକ୍ସଗୁଡ଼ିକ ଛଉ ଶ୍ରେଣୀକୁ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବ :indeterminate
(ଏହାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବା ପାଇଁ କ HTML ଣସି HTML ଗୁଣ ନାହିଁ) |
ଯଦି ଆପଣ jQuery ବ୍ୟବହାର କରୁଛନ୍ତି, ଏହିପରି କିଛି ଯଥେଷ୍ଟ ହେବା ଉଚିତ:
କଷ୍ଟମ୍ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ମଧ୍ୟ ଅକ୍ଷମ କରାଯାଇପାରିବ | disabled
କୁ ବୁଲିୟାନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ <input>
ଏବଂ କଷ୍ଟମ୍ ସୂଚକ ଏବଂ ଲେବଲ୍ ବର୍ଣ୍ଣନା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଷ୍ଟାଇଲ୍ ହେବ |
କଷ୍ଟମ୍ <select>
ମେନୁଗୁଡିକ କେବଳ ଏକ କଷ୍ଟମ୍ ଶ୍ରେଣୀ ଆବଶ୍ୟକ .custom-select
କରେ, କଷ୍ଟମ୍ ଷ୍ଟାଇଲ୍ ଟ୍ରିଗର କରିବାକୁ | କଷ୍ଟମ୍ <select>
ଶ yles ଳୀଗୁଡିକ ପ୍ରାରମ୍ଭିକ ଦୃଶ୍ୟରେ ସୀମିତ ଏବଂ <option>
ବ୍ରାଉଜର୍ ସୀମିତତା ହେତୁ s କୁ ପରିବର୍ତ୍ତନ କରିପାରିବ ନାହିଁ |
ଆମର ସମାନ ଆକାରର ପାଠ୍ୟ ଇନପୁଟ୍ ସହିତ ମେଳ କରିବାକୁ ଆପଣ ଛୋଟ ଏବଂ ବଡ଼ କଷ୍ଟମ୍ ଚୟନରୁ ମଧ୍ୟ ବାଛିପାରନ୍ତି |
multiple
ଗୁଣ ମଧ୍ୟ ସମର୍ଥିତ :
ଯେପରି size
ଗୁଣ:
ସହିତ କଷ୍ଟମ୍ <input type="range">
କଣ୍ଟ୍ରୋଲ୍ ସୃଷ୍ଟି କରନ୍ତୁ .custom-range
| ଟ୍ରାକ (ପୃଷ୍ଠଭୂମି) ଏବଂ ଆଙ୍ଗୁଠି (ମୂଲ୍ୟ) ଉଭୟ ବ୍ରାଉଜରରେ ସମାନ ଦେଖାଯିବା ପାଇଁ ଷ୍ଟାଇଲ୍ ହୋଇଛି | ଯେହେତୁ କେବଳ IE ଏବଂ ଫାୟାରଫକ୍ସ ଆଙ୍ଗୁଠିର ବାମ କିମ୍ବା ଡାହାଣରୁ ସେମାନଙ୍କ ଟ୍ରାକକୁ “ଭରିବା” କୁ ସମର୍ଥନ କରେ, ପ୍ରଗତିକୁ ଭିଜୁଆଲ୍ ସୂଚାଇବା ପାଇଁ ଏକ ମାଧ୍ୟମ ଭାବରେ, ଆମେ ବର୍ତ୍ତମାନ ଏହାକୁ ସମର୍ଥନ କରୁନାହୁଁ |
ରେଞ୍ଜ୍ ଇନପୁଟ୍ ଗୁଡିକ ଯଥାକ୍ରମେ min
ଏବଂ max
- 0
ଏବଂ ପାଇଁ ଅନ୍ତର୍ନିହିତ ମୂଲ୍ୟ ଧାରଣ କରେ 100
| min
ଯେଉଁମାନେ ଏବଂ max
ଗୁଣବତ୍ତା ବ୍ୟବହାର କରୁଛନ୍ତି ସେମାନଙ୍କ ପାଇଁ ଆପଣ ନୂତନ ମୂଲ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରିପାରିବେ |
ଡିଫଲ୍ଟ ଭାବରେ, ଇଣ୍ଟିଜର୍ ଭାଲ୍ୟୁକୁ ରେଞ୍ଜ୍ “ସ୍ନାପ୍” ଇନପୁଟ୍ କରେ | ଏହାକୁ ପରିବର୍ତ୍ତନ କରିବାକୁ, ଆପଣ ଏକ step
ମୂଲ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରିପାରିବେ | ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମେ ବ୍ୟବହାର କରି ଷ୍ଟେପ୍ ସଂଖ୍ୟାକୁ ଦ୍ୱିଗୁଣିତ କରୁ step="0.5"
|
ଫାଇଲ୍ ଇନପୁଟ୍ ହେଉଛି ଗୁଣ୍ଡର ସବୁଠାରୁ ଚମତ୍କାର ଏବଂ ଅତିରିକ୍ତ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରେ ଯଦି ଆପଣ ସେଗୁଡିକୁ କାର୍ଯ୍ୟକ୍ଷମ ଫାଇଲ୍ ବାଛନ୍ତୁ ଏବଂ ଫାଇଲ୍ ନାମ ପାଠ୍ୟ ସହିତ ଚୟନ କରିବାକୁ ଚାହାଁନ୍ତି |
ଆମେ ଡିଫଲ୍ଟ ଫାଇଲ୍ <input>
ମାଧ୍ୟମରେ ଲୁଚାଇଥାଉ opacity
ଏବଂ ତା ବଦଳରେ ଷ୍ଟାଇଲ୍ କରିଥାଉ <label>
| ବଟନ୍ ଜେନେରେଟ୍ ଏବଂ ସହିତ ପୋଜିସନ୍ ହୋଇଛି ::after
| ଶେଷରେ, ଆମେ ଆଖପାଖ ବିଷୟବସ୍ତୁ ପାଇଁ ଉପଯୁକ୍ତ ବ୍ୟବଧାନ ପାଇଁ ଏକ width
ଏବଂ ଘୋଷଣା କରୁ |height
<input>
ଷ୍ଟ୍ରିଙ୍ଗଗୁଡ଼ିକୁ ଅନୁବାଦ କିମ୍ବା କଷ୍ଟମାଇଜ୍ କରିବା |
“ବ୍ରାଉଜ୍” ପାଠ୍ୟକୁ ଅନ୍ୟ ଭାଷାରେ ଅନୁବାଦ କରିବାକୁ ଅନୁମତି ଦେବା ପାଇଁ ଛଉ ଶ୍ରେଣୀ ବ୍ୟବହୃତ ହୁଏ :lang()
| $custom-file-text
ସଂପୃକ୍ତ ଭାଷା ଟ୍ୟାଗ୍ ଏବଂ ଲୋକାଲାଇଜ୍ ଷ୍ଟ୍ରିଙ୍ଗ୍ ସହିତ ସାସ୍ ଭେରିଏବଲ୍ ରେ ଏଣ୍ଟ୍ରିଗୁଡ଼ିକୁ ନବଲିଖନ କରନ୍ତୁ କିମ୍ବା ଯୋଡନ୍ତୁ | ଇଂରାଜୀ ଷ୍ଟ୍ରିଙ୍ଗଗୁଡିକ ସମାନ କଷ୍ଟୋମାଇଜ୍ ହୋଇପାରିବ | ଉଦାହରଣ ସ୍ୱରୂପ, ଏଠାରେ କିପରି ଜଣେ ସ୍ପାନିଶ୍ ଅନୁବାଦ ଯୋଡିପାରିବେ (ସ୍ପାନିଶ୍ ର ଭାଷା କୋଡ୍ ହେଉଛି es
):
ଏକ ସ୍ପାନିସ୍ lang(es)
ଅନୁବାଦ ପାଇଁ କଷ୍ଟମ୍ ଫାଇଲ୍ ଇନପୁଟ୍ ଉପରେ କାର୍ଯ୍ୟରେ ଅଛି:
ସଠିକ୍ ପାଠ୍ୟ ଦେଖାଯିବା ପାଇଁ ତୁମକୁ ତୁମର ଡକ୍ୟୁମେଣ୍ଟର ଭାଷା (କିମ୍ବା ଏହାର ସବଟ୍ରି) ସଠିକ୍ ଭାବରେ ସେଟ୍ କରିବାକୁ ପଡିବ | ଅନ୍ୟାନ୍ୟ ପଦ୍ଧତି ମଧ୍ୟରେ ଉପାଦାନ କିମ୍ବା HTTP ହେଡର୍ ଉପରେ ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରିlang
ଏହା କରାଯାଇପାରିବ |<html>
Content-Language