I want to create a registration form with the following order on each line:
label input label input
label input label input
I wrote some code and managed to get the order right
The problem is that the labels and therefore the text inside them are not aligned between the different lines and the same goes for the inputs.
<div class="container" align="center">
<div align="center">
<h1> New patient </h1>
</div>
<br>
<br>
<form action="/action_page.php">
<div class="input-group">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div class="input-group">
<label class="label">Gender</label>
<label class="radio-container m-r-45">Maschio
<input type="radio" checked="checked" name="gender" required
value="M">
<span class="checkmark"></span>
</label>
<label class="radio-container">Femmina
<input type="radio" name="gender" required value="F">
<span class="checkmark"></span>
</label>
<label class="label">Birthday</label>
<input class="input--style-4 js-datepicker" type="text" name="birthday" required>
</div>
<div class="input-group">
<label for="cf">Fiscal Code</label>
<input type="text" id="cf" name="cf" placeholder="Fiscal Code..">
<input type="button" value="Calculate">
</div>
<div class="input-group">
<label for="fname">Via</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<label for="lname">Civico</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div class="input-group">
<label for="fname">Citta</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<label for="lname">CAP</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div class="input-group">
<label for="fname">Father's name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<input type="submit" value="Add">
</form>
</div>
.left-align-field{
display: inline-block;
float: left;
clear: left;
width: 300px;
text-align: left;
padding: 5px;
}
.right-align-field{
display: inline-block;
float: left;
padding: 5px;
}
<div class="container" align="center">
<div align="center">
<h1> New patient </h1>
</div>
<br>
<br>
<form action="/action_page.php">
<div class="input-group">
<div class="left-align-field">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label class="label">Gender</label>
<label class="radio-container m-r-45">Maschio
<input type="radio" checked="checked" name="gender" required
value="M">
<span class="checkmark"></span>
</label>
<label class="radio-container">Femmina
<input type="radio" name="gender" required value="F">
<span class="checkmark"></span>
</label>
</div>
<div class="right-align-field">
<label class="label">Birthday</label>
<input class="input--style-4 js-datepicker" type="text" name="birthday" required>
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label for="cf">Fiscal Code</label>
<input type="text" id="cf" name="cf" placeholder="Fiscal Code..">
<input type="button" value="Calculate">
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label for="fname">Via</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<label for="lname">Civico</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label for="fname">Citta</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<label for="lname">CAP</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div>
<div class="input-group">
<div class="left-align-field">
<label for="fname">Father's name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<input type="submit" value="Add">
</div>
</form>
</div>
Related
how can i place multiple inputs into a single row having responsive nature
I'm facing very difficult to place all inputs into a single row only 3 I'm able to place
I wanted to convert the below snippet into bootstrap so that I will be responsive:
here codepen:https://codepen.io/anon/pen/EpbjKL
html:
<div class="input-wrapper">
<div style="float:left;margin-right:20px;">
<label for="name">Company Name</label>
<input id="name" type="text" value="" name="name" style="width:200px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">GST Number</label>
<input id="email" type="text" value="" name="email">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Branch Address</label>
<input id="email" type="text" value="" name="email" style="width:300px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Tin Number</label>
<input id="email" type="text" value="" name="email" style="width:200px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">pin code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Date</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
</div>
css:
input, label {
display:block;
}
Question: how to convert above codepen output to bootstrap row,col-*
use this class col-md-auto to make width auto and d-inline-block to display column inline block (bootstrap 4)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-auto col-lg-auto d-inline-block">
<label for="name">Company Name</label>
<input id="name" type="text" value="" name="name" style="width:200px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block">
<label for="email">GST Number</label>
<input id="email" type="text" value="" name="email">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Branch Address</label>
<input id="email" type="text" value="" name="email" style="width:300px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Tin Number</label>
<input id="email" type="text" value="" name="email" style="width:200px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">pin code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Date</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
</div>
I think that you can see the example below,this may satisfy your need. Also,you can set the col-x-x property to place more that 3 input in one row.
row-col example
Please help me on this project. I want to align the Username and all the labels beside the textbox. Specifically on the left side of the textbox. I'm using the primary bootstrap from getbootstrap.com
This is my code:
<div>
<label>Username:</label>
<input type="text" class="form-control" placeholder="Username" tabindex="1"><br>
<input type="text" class="form-control" placeholder="Password" tabindex="2" float="right"><br>
<input type="text" class="form-control" placeholder="Company Name" tabindex="3" float="right"><br>
<input type="text" class="form-control" placeholder="Product Type" tabindex="4" float="right"><br>
</div>
You probably want to use the form-horizontal class for the form. Also, I noticed your inputs didn't have any name attributes, which I'm assuming you'll need. Documentation: http://getbootstrap.com/css/#forms
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="Username" tabindex="1" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="password" placeholder="Password" tabindex="2" />
</div>
</div>
<div class="form-group">
<label for="company_name" class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="company_name" placeholder="Company Name" tabindex="3" />
</div>
</div>
<div class="form-group">
<label for="product_type" class="col-sm-2 control-label">Product Type</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="product_type" placeholder="Product Type" tabindex="4" />
</div>
</div>
</form>
I am trying to position my form box. To see where I was going I just made some inline style. It is also looking like I want on the desktop version, but when I see it on mobile version the form box is out of the picture.
If I made the Inline CSS in an external stylesheet, and made a Mediaquery, it would not be the correct way to do it, would it? For me it seems like bad practice?
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="width:25%; top: 70px; left: 1000px;">
#Umbraco.RenderMacro("Ebook")
</div>
</div>
</div>
<div class="sign-up">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
Here's an example with the form floating to the right for larger screens, and showing full-width for smaller screens.
.floating-form {
background: #eee;
float: right;
padding: 20px 0;
width: 320px;
}
#media (max-width: 479px) {
.floating-form {
float: none;
width: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="floating-form">
<div class="container-fluid">
<div class="row">
<div class="sign-up col-xs-12">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
#Umbraco.RenderMacro("Ebook")
</div>
<div class="sign-up col-xs-6 col-md-6 col-lg-6">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
Fiddle
This Will Useful for you..
I'm using bootstrap to design web pages. I have two major problems.Firstly, can't really figure out how to align fields in a form.Secondly, adjusting the fields(the width height etc..) in a form tag. Do I have to use css for each and every field? I tried doing that, but then the alignment gets messed up. Here's my code .
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="form-control">In Out Specifier</label>
<select class="form-control" id="processInOutSpecifier" name="inOutSpecifier" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="callDateLabel">Call Date</label>
<select class="form-control" id="callDate" name="callDate" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="processCallDateFormatLabel" >Call Date Format</label>
<select class="form-control" id="callDate" name="callDateForamt">
<option>yyyy-MM-dd</option>
<option> yyyy/MM/dd</option>
<option> MM-dd-yyyy</option>
<option> MM/dd/yyyy</option>
<option> dd-MM-yyyy</option>
<option> dd/MM/yyyy</option>
<option>dd/MM/yy</option>
<option> MM/dd/yy</option>
<option> yyMMdd</option>
<option> MMddyy</option>
<option> dd.MM.yy</option>
<option> MM.dd.yy</option>
<option>MM.dd.yy</option>
<option>dd/MM</option>
<option>dd-MM</option>
</select>
</div>
<div class="form-group">
<label class="form-control">Call Time</label>
<select class ="form-control" id="callTime" name="callTime" >
<option></option>
</select>
</div>
<br><br>
<div class="form-group">
<label class="form-control" >Call Time Format</label>
<select id="callTimeFormat" class="form-control" name="CalltimeFormat">
<option>HH:MM:SS/12 HOUR</option>
<option>HH:MM:SS/24 HOUR</option>
<option> HH:MM/12 HOUR</option>
<option> HH:MM/24 HOUR</option>
<option> HH:MM/AMPM</option>
<option>HHMM/24 HOUR</option>
</select>
</div>
<div class="form-group">
<label class="form-control" >Trunk </label>
<input class="form-control" type="text" id="processTrunk" placeholder="Trunk">
</div>
<div class="form-group">
<label class="form-control" >Duration </label>
<input class="form-control" type="text" id="processDuration" placeholder="Duration">
</div>
</form>
</div>
Here's the fiddle
http://jsfiddle.net/core972/SMkZV/2/
Try this fiddle,
<div class="container">
<form name="registration_form" id='registration_form' class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password" />
</div>
</div>
</form>
</div>
Check this DEMO 1
<form name="registration_form" id='registration_form' class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
</div>
<div class="row" style="padding-top: 5px;">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="Username"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Password"/>
</div>
</div>
</form>
This another style you can create form Check this DEMO 2
You can try like this: Demo
<form name="registration_form" id='registration_form' class="form-horizontal col-md-8">
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<input id="firstname" class="form-control reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" />
</div>
<div class="col-xs-6">
<input id="lastname" class="form-control reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<input id="username" class="form-control reg_name" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" />
</div>
<div class="col-xs-6">
<input id="password" class="form-control reg_name" type="password" name="password" title="Enter password" placeholder="Password" />
</div>
</div>
</div>
</form>
Form with label Demo
For more details refer Bootstrap Forms
Check this
Demo
<form name="registration_form" id='registration_form' class="form-inline ">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
<div class="form-group col-xs-12">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
title="Enter username"
placeholder="Username"/>
</div>
<div class="form-group col-xs-12">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password"
title="Enter password"
placeholder="Password"/>
</div>
</div>
I trying to format my registration page with Bootstrap 3.1.1. I would like the first two inputs to be on the same line while the other inputs are one there own line. I have played around with the bootstrap classes "row", "form-inline", and "form-horizontal" to no avail.
Does anybody know how to do it?
Here is the Fiddle
<style>
.reg_name {
max-width:200px;
}
</style>
<form name="registration_form" id='registration_form' class="form-inline">
<div class="form-group">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
<div class="form-group">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
title="Enter username"
placeholder="Username"/>
</div>
<div class="form-group">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password"
title="Enter password"
placeholder="Password"/>
</div>
</form>
Use <div class="row"> and <div class="form-group col-xs-6">
Here a fiddle :https://jsfiddle.net/core972/SMkZV/2/
You can wrap the inputs in col-* classes
<form name="registration_form" id="registration_form" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name">
</div>
<div class="col-sm-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize="off" name="username" title="Enter username" placeholder="Username">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password">
</div>
</div><!--/form-group-->
</form>
http://bootply.com/127825
You can code like two input box inside one div
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="lastname" name="lastname" type="text" />
</div>
I resorted to creating 2 style cascades using inline-block for input that pretty much override the field:
.input-sm {
height: 2.1em;
display: inline-block;
}
and a series of fixed sizes as opposed to %
.input-10 {
width: 10em;
}
.input-32 {
width: 32em;
}