i am creating user_edit_profile for that i need to show the details when user filled the details when he was signing up.Show Users all details are stored in django admin but i can't fetch it only i can fetch thing was a username
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" value={{user.get_username}} required>
</div>
Problem Image below:-
https://drive.google.com/file/d/1q_aJYbhYmXj_j7LKKM7_XFTTKUpN7Hpe/view?usp=sharing
i got the username printed in box but with other only printed required
so please somebody help to get out from this headache.
edit_profile.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Edit Profile</title>
<style>
.form-control {
display: block;
width: 66%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
#left{
margin-left: -218px;
width: 36rem;
}
</style>
</head>
<body>
<div class="container">
<div class="col-lg-12 my-4 mx-2">
<h1>Update Profile</h1>
<form action= "############" method='POST'>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" value={{user.get_username}} required>
</div>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" name="fname" value={{request.user.get_firstname}} required>
</div>
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" id="lname" name="lname" value={{user.get_lname}} required>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" value={{contact.get_Email}} required>
</div>
<!-- <div class="form-group">
<label for="pass1">Choose a password</label>
<input type="password" class="form-control" id="pass1" name="pass1" placeholder="Choose Your Password" required>
</div>
<div class="form-group">
<label for="pass2">Confirm Password</label>
<input type="password" class="form-control" id="pass2" name="pass2" placeholder="Enter your password again" required>
</div> -->
{% csrf_token %}
<button type="submit" class="btn btn-primary mt-3">Update</button>
</form>
<div class="change">
<h1>Change Your Password</h1>
<div class="col-lg-12 my-4 mx-2">
<div class="col-md-12"><label for="pass2">Old Password</label>
<input type="password" class="form-control" id="pass2" name="pass2" placeholder="Enter your password again" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="pass1">New Password</label>
<input type="password" class="form-control" id="pass2" name="pass2" placeholder="Enter your password again" required></div>
<div class="col-md-4" id="left">
<label for="pass2">Confirm Password</label>
<input type="password" class="form-control" id="pass2" name="pass2" placeholder="Enter your password again" required></div>
</div>
<button type="submit" class="btn btn-primary mt-3">Update</button>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
</body>
</html>
views.py
def handlesignup(request):
if request.method=='POST':
username=request.POST['username']
fname=request.POST['fname']
lname=request.POST['lname']`enter code here`
email=request.POST['email']
pass1=request.POST['pass1']
pass2=request.POST['pass2']
myuser=User.objects.create_user(username,fname,email)
myuser.fname=fname
myuser.lname=lname
myuser.email=email
myuser.save()
messages.success(request,'Your account has been created {{Users.username}}')
t.sleep(2)
return redirect('/')
I think it should be without request in request.user.get_firstname? Maybe that's the error?
Finally it's Worked.Thank you all for Helping
But the Solution Was:
For User Name---{{ user.get_username }}
For Email -------{{ user.email}}
For First name----{{ user.get_full_name }} OR {{user.get_short_name}}
For Last name-----{{ user.last_name }}
Related
I'm trying to inline input and checkbox using Bootstrap
My code is:
<!-- Bootstrap-3.4.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Body -->
<form class="form " style=" width:250px; height:250px;">
<div class="form-group">
<input class="form-control " id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"> <input class="form-control" maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label>
</div>
<div class="form-group">
<input class="form-control" id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"><input class="form-control date-picker" id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label>
</div>
<div class="form-group">
<input class="form-control " id="manifestDateCheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"><input class="form-control date-picker" id="txtManifestDate" maxlength="50" placeholder="Manifesto Tarihi" type="text" disabled /></label>
</div>
<div class="form-group ">
<a class="btn btn-success">Güncelle</a>
</div>
</form>
But it looks like this:
Just set display:inline-flex !important;
<style>
form div.form-group{
display:inline-flex !important;
}
</style>
.form-group {
position: relative;
}
label {
position: absolute;
top: 0;
left: 35px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<form class="form " style=" width:250px; height:250px;">
<div class="form-group">
<input class="form-control " id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"> <input class="form-control" maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label>
</div>
<div class="form-group">
<input class="form-control" id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"><input class="form-control date-picker" id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label>
</div>
<div class="form-group">
I am working on a personal project, and I need to make some changes to my current form but I cannot get it working so far.
I need the label and input to be inline. Here is a screenshot how the form should look like.
And here is my current code:
.personal_details {
max-width: 503px;
float: none;
margin: 0 auto;
padding: 40px;
border-radius: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="personal_details">
<form class="personal_details">
<div class="form-group">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="inputFirstName" />
</div>
<div class="form-group">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="inputLastName" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="inputEmail" />
</div>
<div class="form-group">
<label for="phone_nummber">Account type</label>
<select class="form-control" name="profile_type">
<option value="Basic" selected>Freelancer</option>
<option value="Company">Employer</option>
</select>
</div>
<button class="btn btn-primary mt-4 px-5" type="submit">EDIT</button>
</form> <!-- Form ends here -->
</div>
i need some help for front end side. i have below picture i want to design form like below picture in bootstrap but in bootstrap how do this please help check my below html.
<div class="col-sm-2">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
i want like this
my bootstrap
Need to Update with this CSS and HTML. It's Responsive so you can check properly. I hope this one help you.
.form-group,
.form-group label,
.form-group input { float:left; display:inline; }
input{
width:100px;
}
label{
padding:5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<form class="form-inline">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name" >
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</form>
</div>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
#media (min-width: 768px){
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
display: inline-flex;
}
}
</style>
</head>
<body>
<div class="col-md-12 form-inline">
<div class="col-md-2" style="display: inline-flex;">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
</div>
</body>
</html>
label {
margin-bottom: .5rem;
display: contents !important;
}
.form-control {
display: initial !important;
width: auto !important;}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="col-sm-2">
<label>Flight No</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
<div class="col-md-2">
<div class="form-group">
<label>Departure Date</label>
<input type="text" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="exampleInputEmail1">D/Time</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Arrival Date</label>
<input type="email" class="form-control" placeholder="Sub-Agent Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>A/Time</label>
<input type="text" class="form-control" placeholder="Agent Name">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Arrival Sector</label>
<input type="text" style="width: 20px;" class="form-control" placeholder="Voucher No">
<input type="text" style="width: 30px;" class="form-control" placeholder="Voucher No">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="exampleInputEmail1">Terminal</label>
<input type="email" class="form-control" placeholder="Reference">
</div>
</div>
</body>
</html>
image
So My text goes around the left and my form on the right. This is exactly what I want but everything is out of my jumbotron.
I have listed my HTML and CSS code below. Please review it .
<div class = "jumbotron">
<div class = "cmpnt"><h1 style="font-family: 'Pacifico';"class="logo" > Mesmere</h1><h5> A safe social network <br>for <b>Everyone.</b><br>Build your Online presence <br>from the ground up.<br></h5></div>
<div class="cmpnt" >
<h3>Sign Up</h3>
<form id = "signup" action="/signAction" method="POST" >
<input type='hidden' name='csrfmiddlewaretoken' value='yr9j1vpQzJsfZXriKQLpU6GjqkdDZpSQeDlbwp5ENBaSLKZZDOrDq25iONXVjfXf' />
<div id="div_id_username" class="control-group"> <label for="id_username" class="control-label requiredField">
Username<span class="asteriskField">*</span> </label> <div class="controls"> <input type="text" name="username" placeholder="Make it Creative" class="textinput textInput" required id="id_username" /> </div> </div> <div id="div_id_password" class="control-group"> <label for="id_password" class="control-label requiredField">
Password<span class="asteriskField">*</span> </label> <div class="controls"> <input type="password" name="password" placeholder="We won't sell it" class="textinput textInput" required id="id_password" /> </div> </div> <div id="div_id_email" class="control-group"> <label for="id_email" class="control-label requiredField">
Email Id<span class="asteriskField">*</span> </label> <div class="controls"> <input type="email" name="email" class="emailinput" required id="id_email" /> </div> </div>
<br>
<input type="submit" class="btn btn-info" value="Submit">
</form>
<p>Already have an account?Login </p>
</div>
</div>
CSS-
html,body{
overflow-x:hidden;
width:100%;
height: 100%;
font-family: "Open Sans"
}
.jumbotron{
background-color:#23103a;
color:#FF6C00;
}
.cmpnt{
float:left;
}
.btn{
background-color: #a0204c;
border-color:#a0204c;
}
~Thanks in advance
Is this you want ??
html, body {
overflow-x: hidden;
width: 100%;
height: 100%;
font-family: "Open Sans"
}
.jumbotron {
background-color: #23103a;
color: #FF6C00;
}
.cmpnt {
float: left;
}
.btn {
background-color: #a0204c;
border-color: #a0204c;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class = "jumbotron clearfix">
<div class="container">
<div class = "cmpnt">
<h1 style="font-family: 'Pacifico';"class="logo" > Mesmere</h1>
<h5> A safe social network <br>
for <b>Everyone.</b><br>
Build your Online presence <br>
from the ground up.<br>
</h5>
</div>
<div class="cmpnt" >
<h3>Sign Up</h3>
<form id = "signup" action="/signAction" method="POST" >
<input type='hidden' name='csrfmiddlewaretoken' value='yr9j1vpQzJsfZXriKQLpU6GjqkdDZpSQeDlbwp5ENBaSLKZZDOrDq25iONXVjfXf' />
<div id="div_id_username" class="control-group">
<label for="id_username" class="control-label requiredField"> Username<span class="asteriskField">*</span> </label>
<div class="controls">
<input type="text" name="username" placeholder="Make it Creative" class="textinput textInput" required id="id_username" />
</div>
</div>
<div id="div_id_password" class="control-group">
<label for="id_password" class="control-label requiredField"> Password<span class="asteriskField">*</span> </label>
<div class="controls">
<input type="password" name="password" placeholder="We won't sell it" class="textinput textInput" required id="id_password" />
</div>
</div>
<div id="div_id_email" class="control-group">
<label for="id_email" class="control-label requiredField"> Email Id<span class="asteriskField">*</span> </label>
<div class="controls">
<input type="email" name="email" class="emailinput" required id="id_email" />
</div>
</div>
<br>
<input type="submit" class="btn btn-info" value="Submit">
</form>
<p>Already have an account?Login </p>
</div>
</div>
</div>
I want to create a form that the textarea field is next to many inputs lines:
<form class="form-inline">
<table id="table_form">
<tbody>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="text" class="form-control" id="login" placeholder="login">
</div>
</td>
</tr>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
</td>
</tr>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
</div>
</td>
</tr>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
</td>
</tr>
</tbody>
</table>
<div class="col-sm-4">
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</form>
But this code display the blocks one after the other and I want to display login, email and address on the same column and the textarea on another column.How to fix that?
Try this code, it will solve your problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form" role="form">
<div class="col-sm-4">
<input type="text" class="form-control" id="login" placeholder="login">
<input type="email" class="form-control" id="Email" placeholder="Email">
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
<div class="col-sm-8">
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</form>
Your textarea is already to the right of the other input fields. If you want it to become as wide as possible, use the class col-sm-8 for its container and give it width: 100%, like in my codepen :
https://codepen.io/anon/pen/jmZZQY
(It won't work well in a snippet, since it uses bootstrap, so please look at the codepen, where bootstrap is included)
I hope this works fine for you
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="row">
<div class="col-sm-4 col-md-4 col-xs-4">
<div class="form-group">
<input type="text" class="form-control" id="login" placeholder="Login" name="login">
</div>
<div class="form-group">
<input type="text" class="form-control" id="email" placeholder="Email" name="email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone" placeholder="Phone" name="phone">
</div>
<div class="form-group">
<input type="text" class="form-control" id="address" placeholder="Address" name="address">
</div>
</div>
<div class="col-sm-4 col-md-4 col-xs-4">
<textarea rows="3" class="form-control">
</textarea>
</div>
</form>
please follow the bootstrap inline form that is the good method to clear this issue...
http://getbootstrap.com/css/#forms-inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Please check it..
Do not use tables for positioning elements on the page! This is depricated. Use block-level elements instead. For example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form" role="form">
<div class="col-xs-4">
<div class="form-group">
<label for="login">Login</label>
<input type="text" class="form-control" id="login" placeholder="login">
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
<div class="form-group">
<label for="Phone">Phone</label>
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="comments">Comments</label>
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</div>
</form>
If you don't need labels, then use
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form" role="form">
<div class="col-xs-4">
<input type="text" class="form-control" id="login" placeholder="login">
<input type="email" class="form-control" id="Email" placeholder="Email">
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
</div>
<div class="col-xs-4">
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</form>
See Bootstrap documentation for details.