బ్రౌసర్ 5 ఫార్మ్
- ముందు పేజీ BS5 ఫ్లెక్స్
- తరువాత పేజీ BS5 ఎంపిక మెనూ
స్టాక్ ఫారమ్
అన్ని .form-control క్లాస్ కలిగిన <input> మరియు <textarea> ఎలిమెంట్లు సరైన ఫారమ్ శైలిని పొందవచ్చాయి:
ప్రకటన
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">ఇమెయిల్:</label>
<input type="email" class="form-control" id="email" placeholder="ప్రతిపాదించబడిన ఇమెయిల్ చిరునామాను ప్రవేశపెట్టుము" class="form-control" id="email" placeholder="ప్రతిపాదించబడిన ఇమెయిల్ చిరునామాను ప్రవేశపెట్టుము" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">పాస్వర్డ్：</label>
<input type="password" class="form-control" id="pwd" placeholder="పాస్వర్డ్ ప్రవేశపెట్టండి" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> గుర్తుంచుకోండి
</label>
</div>
<button type="submit" class="btn btn-primary">సమర్పించండి</button>
</form>
మరియు మీరు ప్రతి label ఎలమెంట్కు జోడించిన మీరు నమ్మకం కావాలి .form-label క్లాస్ యొక్క నిర్ధారణ చేస్తుంది
చెక్బాక్స్ వివిధ మేరులు ఉన్నాయి. వాటిని వాడండి .form-check క్లాస్ యొక్క కంటైనర్ ఎలమెంట్స్ చుట్టివచ్చింది. label సెట్ .form-check-label క్లాస్, అండర్ చెక్బాక్స్ మరియు రేడియో బటన్స్ వాడండి .form-check-input。
Textarea
ప్రకటన
<label for="comment">విమర్శలు：</label> <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
ఫారమ్ రో అథవా గ్రిడ్ (ఇంలైన్ ఫారమ్)
మీరు ఫారమ్ ఎలమెంట్స్ పక్కపక్క చూపించాలని కావాలి అయితే, వాడండి .row మరియు .col：
ప్రకటన
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="ఇమెయిల్ చిరునామా ప్రవేశపెట్టండి" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="పాస్వర్డ్ ప్రవేశపెట్టండి" name="pswd">
</div>
</div>
</form>
మీరు ఉంటారు బ్రౌజిల్ గ్రిడ్ సార్లు స్తంభాలు మరియు పదునీకరణలను గురించి చదవండి.
ఫారమ్ కంట్రోల్ పరిమాణం
మీరు ఉపయోగించవచ్చు .form-control-lg లేదా .form-control-sm మార్చు .form-control ఇన్పుట్ కంట్రోల్ పరిమాణం:
ప్రకటన
<input type="text" class="form-control form-control-lg" placeholder="పెద్ద ఇన్పుట్ కంట్రోల్"> <input type="text" class="form-control" placeholder="సాధారణ ఇన్పుట్ కంట్రోల్"> <input type="text" class="form-control form-control-sm" placeholder="చిన్న ఇన్పుట్ కంట్రోల్">
నిలిచిపోయిన మరియు పఠించదగిన
ఇన్పుట్ ఫీల్డ్స్ నిలిచిపోయినట్లు చేయడానికి disabled మరియు/లేదా readonly అంశాలు ఉపయోగించండి:
ప్రకటన
<input type="text" class="form-control" placeholder="సాధారణ ఇన్పుట్ కంట్రోల్"> <input type="text" class="form-control" placeholder="నిలిచిపోయిన ఇన్పుట్ కంట్రోల్" disabled> <input type="text" class="form-control" placeholder="పఠించదగిన ఇన్పుట్ కంట్రోల్" readonly>
స్పష్టమైన టెక్స్ట్ ఇన్పుట్
ఈ ఉపయోగించండి: .form-control-plaintext రబ్బర్ రంగాలు లేకుండా ఇన్పుట్ ఫీల్డ్ స్టైల్స్ సెట్ చేయడానికి, కానీ తగిన పైకిరిమారు మరియు అంతరికి ఉంచండి:
ప్రకటన
<input type="text" class="form-control-plaintext" placeholder="స్పష్టమైన టెక్స్ట్ ఇన్పుట్"> <input type="text" class="form-control" placeholder="సాధారణ ఇన్పుట్ కంట్రోల్">
పిక్చర్ సెలెక్టర్
type="color" ఇన్పుట్ స్టైల్స్ సరిగా సెట్ చేయడానికి, ఈ ఉపయోగించండి: .form-control-color క్లాస్ ఉంది:
ప్రకటన
<input type="color" class="form-control form-control-color" value="#CCCCCC">
- ముందు పేజీ BS5 ఫ్లెక్స్
- తరువాత పేజీ BS5 ఎంపిక మెనూ
