I was trying to put required attribute to select. I tried many ways and it doesn't seem to work.
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select Category</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" name="Category" required="required">
<option value="">Select</option>
<option value="2">Library Staff</option>
<option value="3">Non-Teaching Staff</option>
<option value="4">System Admin</option>
<option value="5">Teaching Staff</option>
</select>
</div>
</div>
You may use the boostrap validator:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/1000hz/bootstrap-validator/master/dist/validator.min.js"></script>
<form data-toggle="validator" role="form">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select Category</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" name="Category" required>
<option value="">Select</option>
<option value="2">Library Staff</option>
<option value="3">Non-Teaching Staff</option>
<option value="4">System Admin</option>
<option value="5">Teaching Staff</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
try;
<select class="form-control" name="Category" required>
Related
I want to align input fields and I was asked to not use any css at all. My code:
<!DOCTYPE html>
<html>
<body>
<h1>Travel Reservation Form</h1>
<h3>* denotes mandatory </h3>
<hr>
<form>
<input name="passengername" placeholder="Name">
<input type="tel" placeholder="*Mobile Number" name="mobile" required>
<br>
<input name="mailid" placeholder="*Email ID" type="email" required>
<select name="travelmonth">
<option value="Month of Travel">Month of Travel</option>
<option value="Aug2018">Aug2018</option>
<option value="Sep2018">Sep2018</option>
<option value="Oct2018">Oct2018</option>
<option value="Nov2018">Nov2018</option>
<option value="Dec2018">Dec2018</option>
<option value="Jan2019">Jan2019</option>
<option value="Feb2019">Feb2019</option>
<option value="Mar2019">Mar2019</option>
<option value="Apr2019">Apr2019</option>
</select>
<br>
<select name="package" required>
<option value="*Origin">*Origin</option>
<option value="GOA">GOA</option>
<option value="MUMBAI">MUMBAI</option>
<option value="KERALA">KERALA</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KOLKATA">KOLKATA</option>
</select>
<input name="destination" placeholder="Destination">
<br>
<input name=submit type="submit" value="Get A Call">
<input name="clear" type="reset" value="Clear">
</form>
</body>
</html>
The output this code is giving
The output I'm required to get:
How do I align the two input tags such that it looks the same as the posted image?
Just in case you actually can use styles to set the style of a page (because the content, a.k.a the HTML, is the same. And there is no behavior, a.k.a JavaScipt)
Example with bootstrap 5:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<h1 class="d-flex justify-content-center text-uppercase">Travel Reservation Form</h1>
<h3 class="d-flex justify-content-center">* denotes mandatory </h3>
<hr>
<form class="container">
<div class="row mb-2">
<div class="col-6">
<input name="passengername" placeholder="Name" class="form-control">
</div>
<div class="col-6">
<input type="tel" placeholder="*Mobile Number" name="mobile" required class="form-control">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<input name="mailid" placeholder="*Email ID" type="email" required class="form-control">
</div>
<div class="col-6">
<select name="travelmonth" class="form-select">
<option value="Month of Travel">Month of Travel</option>
<option value="Aug2018">Aug2018</option>
<option value="Sep2018">Sep2018</option>
<option value="Oct2018">Oct2018</option>
<option value="Nov2018">Nov2018</option>
<option value="Dec2018">Dec2018</option>
<option value="Jan2019">Jan2019</option>
<option value="Feb2019">Feb2019</option>
<option value="Mar2019">Mar2019</option>
<option value="Apr2019">Apr2019</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<select name="package" required class="form-select">
<option value="*Origin">*Origin</option>
<option value="GOA">GOA</option>
<option value="MUMBAI">MUMBAI</option>
<option value="KERALA">KERALA</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KOLKATA">KOLKATA</option>
</select>
</div>
<div class="col-6">
<input name="destination" placeholder="Destination" class="form-control">
</div>
</div>
<div class="row mb-2">
<div class="col-6">
<input name=submit type="submit" value="Get A Call" class="btn btn-primary">
</div>
<div class="col-6">
<input name="clear" type="reset" value="Clear" class="btn btn-secondary">
</div>
</div>
</form>
</body>
</html>
I'm building a web application using html, java, javascript and css with bootstrap. Here is one section of that application which gives me troubles:
What I'm trying to accomplish here is to move this input field bellow the first row to be just bellow the first selection field. Something like this:
By the way new rows are added dinamically when user clicks on + button. And now here is that section written in html:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<div class="form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>
By default, bootstrap takes 12 columns in one row, and if you try to use more than 12 columns, it automatically places the extra content in next row. Below is the snippet to achieve the result:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<!--here completing 12 columns of first row-->
<div class="col-xs-2 form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<!--for next row, leave first 5 columns blank, which correspond to label and
textfield, Added css here-->
<div class="form-group col-xs-5 formular-element-width-fix"> </div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>
I am trying to re-create this page below
I am pretty familiar with bootstrap 4's grid system but I struggle very much with forms. Where the form is on the page consists of a row with two col-6. I am working on the first column but I cannot seem to keep everything inline using flexbox classes. Can someone give me an idea of how to get this similar format?
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="d-flex flex-row">
<div class="col-6 d-flex"><!--left side -->
<form class="form-inline">
<div class="form-group">
<label for="fname">First Name:</label>
<input type="text" id="fname" class="form-control ml-5">
</div>
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" id="lname" class="form-control ml-5">
</div>
<div class="form-inline">
<label for="month/year">Date of Birth:</label>
<select name="Month" class="custom-select" class="month/year">
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<!--dates in this select below -->
<select name="Year" class="custom-select" class="month/year">
<option value="2018">2018</option>
<option value="2017">2017</option>
</select>
</div>
<div class="form-group mt-3">
<label>Gender:</label>
<div>
<label class="radio-button-container ml-2">Male
<input type="radio" name="radio">
<span class="black-dot"></span>
</label>
</div>
<div>
<label class="radio-button-container ml-2">Female
<input type="radio" name="radio">
<span class="black-dot"></span>
</label>
</div>
</div>
<div class="form-group">
<label for="month/year">Field of Study:</label>
<select name="Month" class="custom-select" class="month/year">
<option value=""></option>
</select>
</div>
</form>
</div>
<div class="col-6"></div><!--right side -->
</div><!-- form for teacher/student-->
</div>
The snippet would be that left side in the first column where "first name" starts. If I can understand how to get that type of alignment then I can figure out the other column. Can this be done using bootstrap classes?
Actually this is not an inline form, so you should not use the .form-inline class on the <form>. This structure is called the Horizontal form and it is described under the Horizontal form section in the Bootstrap docs. Basically you have to use the standard grid classes to layout the labels and input fields as needed.
Furthermore, let your <form> tag wrap both the left and the right columns, to create only one form. Otherwise you won't be able to submit it in one go.
The example below provides a sample implementation, where .col-sm-6 classes are used on the labels, as well as on the inputs.
<div class="container">
<form>
<div class="row">
<div class="col-6"><!--left side -->
<div class="form-group row">
<label for="fname" class="col-sm-6 col-form-label">First Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="fname">
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-6 col-form-label">Last Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="lname">
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-6 col-form-label">Date of Birth:</label>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<select name="Month" class="custom-select" class="month/year">
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
</div>
<div class="col-sm-6">
<select name="Year" class="custom-select" class="month/year">
<option value="2018">2018</option>
<option value="2017">2017</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-6 col-form-label">Gender:</label>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="gridRadios1" value="male" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="gridRadios2" value="female">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="lname" class="col-sm-6 col-form-label">Field of Study:</label>
<div class="col-sm-6">
<select name="Month" class="custom-select" class="month/year">
<option value=""></option>
</select>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row">
<label for="email" class="col-sm-6 col-form-label">Email Address</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-6 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password" value="">
</div>
</div>
<div class="form-group row">
<label for="password2" class="col-sm-6 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password2" value="">
</div>
</div>
</div><!--right side -->
</div><!-- form for teacher/student-->
</form>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
Can anyone advise why im getting this strange alignment issue with bootstrap when horizontally aligning textboxes with a select control :-
<div class="row">
<div class="form-group">
<div class="col-xs-12 col-md-2">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Forename" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
</div>
Write your columns outside form-group.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Forename" />
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
</div>
</body>
</html>
Please use one form-group for the entire section.`
<div class="form-group">
<div class="col-xs-12 col-md-2">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Forename" />
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
`
Form group is supposed to be used if you need to group several form elements together. In this case, it is a good idea for you to group all your form elements into a single form-group.
<div class="row">
<div class="form-group">
<div class="col-xs-12 col-md-2">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Forename" />
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
Define the column outside the form-group class.
<div class="row">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Forename">
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Surname">
</div>
</div>
</div>
I have a form which has two text boxes in the top followed by two select tags below them . Below is the code. How can I modify the width for the select tags so that they align with the text boxes above.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Title">Title</label>
<input type="text" class="form-control" name='p_Title' value='' ng-model="reports.title" class='requiredAttribute' placeholder="Title">
</div>
<div class="form-group">
<label class="sr-only" for="subTitle">Sub Title</label>
<input type="text" class="form-control" name='p_SubTitle' value='' ng-model="reports.subtitle" class='requiredAttribute' placeholder="Sub Title">
</div> </form>
<br>
<form class="form-inline">
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</form>
Wrap them with Bootstrap's Grid System
Something along the lines of this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="sr-only" for="Title">Title</label>
<input type="text" class="form-control" name='p_Title' value='' ng-model="reports.title" class='requiredAttribute' placeholder="Title">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="sr-only" for="subTitle">Sub Title</label>
<input type="text" class="form-control" name='p_SubTitle' value='' ng-model="reports.subtitle" class='requiredAttribute' placeholder="Sub Title">
</div>
</div>
</div>
</form>
<br>
<form class="form-inline">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</div>
</form>