I want to display a form in different lines but i am getting it in same line.
Code -
<form action="/compose" method="post" autocomplete="off">
<label for="">Title</label>
<input type="text" name="postTitle">
<label for="">Post</label>
<textarea cols="40" rows="5" name="postPost"></textarea>
<button class="btn btn-sm btn-primary" type="submit" name="submit">Publish</button>
</form>
This is what I am getting. Do i need to add container-fluid class of bootstrap?
Do add each input tag inside its corresponding Label, after that set the label styles to display: block.
<form action="/compose" method="post" autocomplete="off">
<label for="">
Title
<input type="text" name="postTitle">
</label>
<label for="">Post
<textarea cols="40" rows="5" name="postPost"></textarea>
</label>
<button class="btn btn-sm btn-primary" type="submit" name="submit">Publish</button>**strong text**
</form>
There are many ways to do this simplest is to use <br> tag
This tag break the code into line
<form action="/compose" method="post" autocomplete="off">
<label >Title</label>
<input type="text" name="postTitle">
<br/>
<label for="">Post</label>
<textarea cols="40" rows="5" name="postPost"></textarea>
<br/>
<button class="btn btn-sm btn-primary" type="submit" name="submit">Publish</button>
</form>
There are many ways to achieve this.
1. Use a break after each input:
<form>
<label for="title">Title</label>
<br>
<input type="text" name="title" value="">
</form>
2. Use CSS
form {
display: flex;
flex-direction: column;
}
Related
EDIT: I had CSS code that prevented the <br> tag from inserting a single line break
I've been trying to create a login page, and I wanted to center the Username inserting block and the Password inserting block, I have used the tag to accomplish that, but it doesn't work; see screenshot. Any help is appreciated, thank you
here is the code:
<div class="login">
<form action="#">
<label for="username">Username: </label>
<input type="text" name="username"><br/>
<label for="password">Password: </label>
<input type="password" name="password"><br/>
<input type="submit" name="submit" value="LOGIN">
</form>
</div>
here's how the code renders
<div class="login">
<form action="#">
<label for="username">Username: </label>
<input type="text" name="username"><br/><br/>
<label for="password">Password: </label>
<input type="password" name="password"><br/><br/>
<input type="submit" name="submit" value="LOGIN">
</form>
</div>
try this
<div class="login">
<form action="/new_url" method="POST">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="button" value="Login">
input class is declared.
the problem is the even though the button is clickable,i cant get it to open new_url.
You forgot to mention input type submit.
try below code
<div class="login">
<form action="/new_url" method="POST">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" value="Login">
</form>
</div>
Use <input type="submit" value="Login">
instead of
<input type="button" value="Login">
You just need to add one more input value
<input type="Submit" value="login">
I'm using Bootstrap and Laravel.
I would like to align two buttons "Update" and "Delete" next to each other.
BUT the Delete button has its own route and fields. So I created two forms.
Of course, the Delete button is now below the Update button.
Question: How can I make them next to each other instead?
I think a form inside of a form is not standard. Plus, it actually messes with the fields being sent.
Are there CSS rules I could apply for this to work?
I created a JSFiddle if you want to try it out: https://jsfiddle.net/0e5jk8yr/
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="/route2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
If it's not possible with CSS, feel free to comment and suggest UI design for item update/deletion.
Thanks to everyone reading and trying to figure this out.
Side note: I'm tagging this as Laravel, in case someone knows tricks I could use with Laravel/Blade for forms leading to deletion.
If CSS doesn't work, one solution would be to use only one form leading to update(), then call the destroy() method if the delete button was pressed.
Method 1
If you want to keep the way it is right now you can give the forms the property of display: inline;.
form {
display: inline;
}
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="route2" id="form2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
Method 2
However, having two forms is not necessary because you can give the inputs a name attribute and then call the functions with the name. So when the form is submitted it will either return $_POST['submit'] or $_POST['delete'].
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button name="submit" type="submit" class="btn btn-success">Update</button>
<button name="delete" type="submit" class="btn btn-danger">Delete</button>
</form>
Try this.
#form2 {
position: absolute;
top: 74px;
left: 80px;
}
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
</form>
<form method="post" action="route2" id="form2">
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
Or like this:
.btn-danger {
position: absolute;
top: -33px;
left: 90px;
}
form {
position: relative;
}
https://jsfiddle.net/0e5jk8yr/1/
Here is your corrected code. Please check it
<form method="post" action="/route1">
<!-- More code here -->
<div class="form-group">
<label for="field1" class="required">Field #1</label>
<input type="text" class="form-control" id="field1" name="field1" value="value">
</div>
<button type="submit" class="btn btn-success">Update</button>
<!-- More code here -->
<button type="submit" class="btn btn-danger">Delete</button>
</form>
When I enter the email and click on Submit. Nothing happens.
Thanks for your help.
Please find the html code.
<form method="post" action="contact.php" name="contactform" id="contactform">
<fieldset>
<label for="email" accesskey="E"></label>
<input name="email" type="text" id="email" size="30" value="" placeholder="Please enter your email address" />
<button type="submit" class="submit btn btn-custom" id="submit" value="Submit">
<i class="fa fa-envelope"></i>
Subscribe
</button>
</fieldset>
</form>
<div class="tex-center">
<div id="message"></div>
</div>
Try using <input type="submit" class="submit btn btn-custom" id="submit" value="Submit"> instead.
hi all i am try to apply bootstrap css in my mvc application
i want reconstruct this example http://getbootstrap.com/examples/signin/ in my application
i code my login page like
<form id="loginform" method="post" class="form-signin" role="form">
<h3 class="form-signin-heading">Login</h3>
<input type="text" name="user_NA" class="form-control" placeholder="User ID" />
<input type="password" name="user_pwd" class="form-control" placeholder="Password" />
<input type="submit" name="Submit" value="Login" class="btn btn-lg btn-primary btn-block" />
</form>
but i got the output like
i am not done any changes in bootstrap.css
i want tha black header(default). but here shows a button. please someon help me
You can try this..
Fiddle here
<div class="container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
Good Luck..