Bootstrap Form Classes - Bootstrap Tutorial 21 скачать в хорошем качестве

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: <form action="processor.html" 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    • Bootstrap Sizing Classes - Bootstrap Tutor...   Follow the link for previous video: Bootstrap Tutorial 20 - Bootstrap Alert box Related Classes | Bootstrap Alert Boxes    • Bootstrap Alert Box Classes - Bootstrap Tu...   ========================================= Bootstrap Tutorials Playlist:-    • Bootstrap4 Tutorials   ========================================= Watch My Other Useful Tutorials:- PHP Tutorials Playlist:-    • PHP Tutorials   ========================================= Subscribe to our YouTube channel:-    / chidrestechtutorials   ========================================= Hash Tags:- #ChidresTechTutorials #Bootstrap #BootstrapTutorial