Bootstrap Form Classes - Bootstrap Tutorial 21

Показать описание

Notes for You:: Bootstrap Form Classes - Bootstrap Tutorial 21

needs-validation: used to validate the form

form-control: is used to convert textual input controls into block level controls

valid-feedback: used to display message on valid data entry
invalid-feedback:used to display message on invalid data entry

form-check: is used to group related labels &checkboxesorrelated labels &radio buttons
form-check-input: is used to stylize radio and checkboxes
form-check-label: is used to stylize associated labels of checkboxes & radio buttons

form-control-file:is used to stylize file controls

form-inline :it converts the form into flex container and is used to create horizontal forms

Form Tag Code:

method="post"
style="min-height:100px; border:1px solid gray; width:40%; margin:auto; padding:10px;"
novalidate
class="needs-validation">

</form>

Creating Rows & Cols inside a form:

<div class="form-group form-row">

<div class="form-group col">

</div>
<div class="form-group col">

</div>
</div>

Creating Text Input Field:
<label for="txtUserName">UserName:</label>
<input type="text" id="txtUserName" name="txtUserName" value="" class="form-control" required/>
<span class="valid-feedback">Valid</span>
<span class="invalid-feedback">Invalid: Please Enter Name</span>

Creating Password Field:
<label for="pwdUser">Password:</label>
<input type="password" id="pwdUser" name="pwdUser" value="" class="form-control" required/>
<span class="valid-feedback">Valid</span>
<span class="invalid-feedback">Invalid: Please Enter Password</span>

Crating Radio Buttons:
<label for="rdbGender">Gender:</label>
<div class="form-check">
<input type="radio" id="rdbMale" name="rdbGender" value="m" class="form-check-input" checked/>
<label for="rdbMale" class="form-check-label">Male</label>
</div>
<div class="form-check">
<input type="radio" id="rdbFemale" name="rdbGender" value="f" class="form-check-input"/>
<label for="rdbFemale" class="form-check-label">Female</label>
</div>

Creating Checkboxes:
<label for="chkHobbies">Hobbies:</label>
<div class="form-check">
<input type="checkbox" id="chkPlaying" name="chkHobbies" value="p" class="form-check-input"/>
<label for="chkPlaying" class="form-check-label">Playing</label>
</div>
<div class="form-check">
<input type="checkbox" id="chkMusic" name="chkHobbies" value="m" class="form-check-input"/>
<label for="chkMusic" class="form-check-label">Music</label>
</div>

Creating Selection List:
<label for="slctQualification">Qualification</label>
<select id="slctQualification" name="slctQualification" class="form-control">
<option value="s">SSC</option>
<option value="i">Intern</option>
<option value="u">UG</option>
<option value="p">PG</option>
<select>

Creating Multiline Text Field:
<label for="txtaAddress">Address:</label>
<textarea id="txtaAddress" name="txtaAddress" rows="5" class="form-control"></textarea>

Creating Email Field:
<label for="emailUser">Email ID:</label>
<input type="email" id="emailUser" name="emailUser" value="" class="form-control"/>

Creating File Control:
<label for="resumeUser">Upload Resume:</label>
<input type="file" id="resumeUser" name="resumeUser" value="" class="form-control-file"/>

Creating Submit Button:
<input type="submit" value="SUBMIT" class="btnbtn-dark btn-block"/>

Creating Reset Button:
<input type="reset" value="RESET" class="btnbtn-dark btn-block"/>

Note:
- repalce < with less-than symbol.
- replace > with greater-than symbol.

=========================================

Follow the link for next video:
Bootstrap Tutorial 22 - Bootstrap Sizing Related Classes | Bootstrap Sizing

Follow the link for previous video:
Bootstrap Tutorial 20 - Bootstrap Alert box Related Classes | Bootstrap Alert Boxes

=========================================

Bootstrap Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

PHP Tutorials Playlist:-

=========================================

Subscribe to our YouTube channel:-

=========================================
Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial