Working html code: UPDATED
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
<form class="form-horizontal ng-pristine ng-valid ng-valid-required" role="search">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label col-md-6" for="inputEmail">Employee Name:</label>
<div class="col-md-4">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
</div>
<div class="col-md-2">
<button class="form-control btn btn-info">Hello world</button>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label col-md-6" for="inputEmail">My Owning Location:</label>
<div class="col-md-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
</div>
</div>
</div>
</form>
How can I format my lable/input field align? below is html along with screen shots how it renders after I run the page:
what I want the output to be is:
Employee Name: XXXXXXXXXXXXX
My Owning Location: XXXXXXXXXXXXX
Manager Name: XXXXXXXXXXXXX
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
<form class="navbar-form form-horizontal ng-pristine ng-valid ng-valid-required" role="search" style="padding:0">
<div class="col-md-12" style="margin: 10px;">
<div class="form-group">
<label class="control-label col-md-6" for="inputEmail">Employee Name:</label>
<div class="col-lg-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
</div>
</div>
</div>
<div class="col-md-12" style="margin: 10px;">
<div class="form-group">
<label class="control-label col-md-6" for="inputEmail">My Owning Location:</label>
<div class="col-lg-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
</div>
</div>
</div>
</form>
I've solved this for you and created a codepen editor for this.
The code will look lke,
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
<form class="form-horizontal ng-pristine ng-valid ng-valid-required" role="search">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label col-md-6" for="inputEmail">Employee Name:</label>
<div class="col-md-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label col-md-6" for="inputEmail">My Owning Location:</label>
<div class="col-md-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
</div>
</div>
</div>
</form>
What I've done is wrap your form group elements into row classes which makes children appear in a row, and for the form-group classed element I've set it to col-md-12 which does make it full width of the grid.
I've also removed navbar-form class from your form element
I've heard my colleague (front-end guy) saying to use row and child elements of them as grid columns as a standard, i don't know the validity of that statement, but it works for real! :)
And a note, do not use inline styles which makes things lot worse and untraceable while looking at the code itself.
I added the corresponding row-fluid to reset the grid for the label and input boxes.
https://jsfiddle.net/gyod/7mgtfk3k/4/ Here is one example.
<form class="container row-fluid navbar-form form-horizontal ng-pristine ng-valid ng-valid-required" role="search" style="padding:0">
<div class="col-md-12" style="margin: 10px;">
<div class="row-fluid">
<label class="control-label col-xs-3" for="inputEmail">Employee Name:</label>
<div class="col-xs-9">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
</div>
</div>
</div>
<div class="col-md-12" style="margin: 10px;">
<div class="row-fluid">
<label class="control-label col-xs-3" for="inputEmail">My Owning Location:</label>
<div class="col-xs-9">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
</div>
</div>
</div>
</form>
Try to put the label tag inside div class="col-xs-6". Then you can get a horizontal aligned elements of each div.
If you want to make it properly align, you can set default width for the label and use bootstrap built-in class for alignment.
Related
I am trying to get a description as to how to use the form directly next to the form.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<h1 class="form-inline" style="text-align: center;">Tester</h1>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput1">Full Name</label>
<input type="name" class="form-control" id="FormControlInput1" placeholder="John Doe">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput2">Phone Number</label>
<input type="phone-number" class="form-control" id="FormControlInput2" placeholder="403-213-4312">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlTextarea1">Required Services</label>
<textarea class="form-control" id="FormControlTextarea1" rows="3"></textarea>
</div>
</div>
</form>
Was hoping to be able to get the "tester" message to the right of the form.
How do I solve the problem?
You can use Bootstrap's grid layout system to manage the layout.
For example:
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<form class="col">
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput1">Full Name</label>
<input type="name" class="form-control" id="FormControlInput1" placeholder="John Doe">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlInput2">Phone Number</label>
<input type="phone-number" class="form-control" id="FormControlInput2" placeholder="403-213-4312">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-5">
<label for="FormControlTextarea1">Required Services</label>
<textarea class="form-control" id="FormControlTextarea1" rows="3"></textarea>
</div>
</div>
</form>
<h1 class="col" style="text-align: center;">Tester</h1>
</div>
</div>
</body>
</html>
This would create:
- A container to manage the layout
- A row to manage the form and the h1 as elements that should be positioned next to each other
- The form and the h1 each marked with the col class so that they are auto laid out. You can also use different classes like col-2 col-md-2 etc. to have more control over how many columns each control is allowed to use.
This might be something simple that I am missing but I cant get though this. I am using bootstrap 3 in my application. In my form I have some controls like dropdowns, textbox, labels etc. See example as below:
<div class="modal-body">
<form role="form" name="form" class="form-body">
<div class="form-group">
//form label here
<div class="m-grid-col-sm-5">
//form element here
</div>
</div>
</form>
<div>
Above is just a example. The issue is when I run my app, I can see is the label is always above the control. What I want is the label on the left and the form control (dropdown,textbox etc) on the right.
You can see I created a sample jsfiddle at:
https://jsfiddle.net/aman1981/xprh2tno/8/
Please ignore the modal class as the issue is not I am having is not at the modal but other forms within my app as well.
I have tried adjusting and using different class but looks like its not adjusting well.
You need to refer the Horizontal Form section in the documentation here: http://bootstrapdocs.com/v3.0.3/docs/css/#forms
HTML:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Demo: https://jsfiddle.net/xprh2tno/12/
You Can try this Code here
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="name" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="sex" class="col-xs-2 control-label">Sex</label>
<div class="col-xs-10">
<select name="sex" class="auto-width setup-inline form-control input-medium" required>
<option value="">---Please select---</option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 text-right">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
Does anyone know if this kind of thing is possible?
I've tried using inline-group and form-inline but then it doesn't seem to conform to fit the full grid width.
Whereas form-horizontal seems to expect the entire form on one row.
This code creates the desired output (two form controls on one row) but form-groups are required around each one for viewing in sm mode.
NB: This is for a 16 col grid.
<form>
<div className="form-group row">
<!--form group needed here -->
<label className="col-form-label col-md-2" htmlFor="formGroupExampleInput">First Name*</label>
<div className="col-md-5">
<input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
<!--form group needed here -->
<label className="offset-md-2 col-form-label col-md-2" htmlFor="formGroupExampleInput">Last Name*</label>
<div className="col-md-5">
<input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
</div>
</form>
I don't think this is a duplicate of:
Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?
...because this isn't leaving me with full control of grid columns within via form labels etc.
Place your form-groups into .col-* containers to align the groups in a horizontal layout, for example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form>
<div class="col-xs-6 form-group">
<label for="inputEmail3" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword3" class="control-label">Password</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</form>
If controls of a form group should be aligned in a horizontal layout too, use .form-horizontal class for the form. In this case .form-groups behaves as grid rows. Thus, it is possible to apply Nesting columns template for your form:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-horizontal">
<div class="col-xs-6">
<div class="form-group">
<label for="inputEmail3" class="col-xs-3 control-label">Email</label>
<div class="col-xs-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="inputPassword3" class="col-xs-4 control-label">Password</label>
<div class="col-xs-8"><input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</div>
</form>
My bad, I just hadn't understood nested rows properly:
https://v4-alpha.getbootstrap.com/layout/grid/#nesting
This works fine:
<form>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label class="col-form-label col-md-4" for="formGroupExampleInput">First Name*</label>
<div class="col-md-10">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group row">
<label class="offset-md-2 col-form-label col-md-4" for="formGroupExampleInput">Last Name*</label>
<div class="col-md-10">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
</div>
</div>
</div>
</form>
I want to build a form in Bootstrap 3 like this:
My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.
I cannot find any doc about this type of form on getbootstrap.com.
Could anyone tell me how to do this? Only 'Username' would be OK.
Thanks.
PS There is a similar question but it's using Bootstrap 2.3.2.
I have created a demo for you.
Here is how your nested structure should be in Bootstrap 3:
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.
Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
Another option is to put all of the fields that you want on a single line within a single form-group.
See demo here
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</form>
This Bootply example seems like a much better option. Only thing is that the labels are a little too high so I added padding-top:5px to center them with my inputs.
<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-1" for="inputEmail1">Email</label>
<div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
</div>
<div class="form-group">
<label class="col-sm-1" for="inputPassword1">Password</label>
<div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
</div>
<div class="form-group">
<label class="col-sm-12" for="TextArea">Textarea</label>
<div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
<div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
</div>
<div class="form-group">
<label class="col-sm-12">Phone number</label>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
</div>
<div class="form-group">
<label class="col-sm-1">Options</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
<div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-info pull-right">Submit</button>
</div>
</div>
</form>
<hr>
</div>
To make it work in Chrome (and bootply) i had to change code in this way:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" />
<input type="text" class="form-control" placeholder="month" />
<input type="text" class="form-control" placeholder="day" />
</div>
</div>
</div>
</form>
A much simpler solution, without all the inside form-group elements
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" style="width:70px;"/>
<input type="text" class="form-control" placeholder="month" style="width:80px;"/>
<input type="text" class="form-control" placeholder="day" style="width:100px;"/>
</div>
</div>
</div>
... and it will look like this,
Cheers!
I had problems aligning the label to the input(s) elements so I transferred the label element inside the form-inline and form-group too...and it works..
<div class="form-group">
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
What's the best way to design a form that looks like this (please see link below) in twitter bootstrap without any homemade classes ?
Is it possible to set a inner form-inline inside a form-horizontal like the below example:
Don't nest <form> tags, that will not work. Just use Bootstrap classes.
Bootstrap 3
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
You can achieve that behaviour in many ways, that's just an example. Test it on this bootply
Bootstrap 2
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
For bootstrap 3 example above works but is overcomplicated, rather than using form-group use form-inline for the fields you want inline.
Eg:
<div class="form-group">
<label>CVV</label>
<input type="text" size="4" class="form-control" />
</div>
<div class="form-inline">
<label>Expiration (MM/YYYY)</label><br>
<input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
This uses twitter bootstrap 3.x with one css class to get labels to sit on top of the inputs. Here's a fiddle link, make sure to expand results panel wide enough to see effect.
HTML:
<div class="row myform">
<div class="col-md-12">
<form name="myform" role="form" novalidate>
<div class="form-group">
<label class="control-label" for="fullName">Address Line</label>
<input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
</div>
<div class="form-inline">
<div class="form-group">
<label>State</label>
<input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
</div>
<div class="form-group">
<label>ZIP</label>
<input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="country">Country</label>
<input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
</div>
</form>
</div>
</div>
CSS:
.myform input.form-control {
display: block; /* allows labels to sit on input when inline */
margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
Since bootstrap 4 use div class="form-row" in combination with div class="form-group col-X". X is the width you need. You will get nice inline columns. See fiddle.
<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-sm-2" for="naam">Naam: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
<div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-5">
<label class="control-label col-sm-4" for="telefoon">Telefoon: *</label>
<div class="col-sm-12">
<input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
<div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
</div>
</div>
<div class="form-group col-5">
<label class="control-label col-sm-4" for="email">E-mail: </label>
<div class="col-sm-12">
<input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
<div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="titel">Titel: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
<div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
</div>
</div>
<from>
I know this is an old answer but here is what I usually do:
CSS:
.form-control-inline {
width: auto;
float:left;
margin-right: 5px;
}
Then wrap the fields you want to be inlined in a div and add .form-control-inline to the input, example:
HTML
<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
to make it simple, just add a class="form-inline" before the input.
example:
<div class="col-md-4 form-inline"> //add the class here...
<label>Lot Size:</label>
<input type="text" value="" name="" class="form-control" >
</div>