How do I remove the bottom left icon from the button to search.
<form action="search.php" method="POST">
<input type="text" id="search" name="search" placeholder="Search something..." required>
<div id="close-icon"></div>
<button type="submit" name="submit-search"></button>
</form>
here is the html
Are you just trying to hide the tiny button on the bottom left? If so, this should sort you out!
<form action="search.php" method="POST">
<input type="text" id="search" name="search" placeholder="Search something..." required>
<div id="close-icon"></div>
<button type="submit" name="submit-search" style="display:none"></button>
</form>
You can also do this in css using the following:
<style>
.display-none { display:none; }
</style>
<form action="search.php" method="POST">
<input type="text" id="search" name="search" placeholder="Search something..." required>
<div id="close-icon"></div>
<button type="submit" name="submit-search" class="display-none"></button>
</form>
Related
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;
}
I have modal window with pure css. When I click submit button, my modal window does not disappear. How can I hide my modal window? Here is my code. Here is CSS and HTML code. Do you have any ideas?
<div class="banner-content text-center" >
<br/><br/>
ORDER
<div id="open-modal" class="modal-window" id="modal-window">
<div>
Close
<h1>Contact Form</h1>
<div>
<div class="container">
<form name="contactform" method="post">
<input type="text" id="fname" name="first_name" >
<input type="text" id="lname" name="email">
<input type="text" id="phone" name="phone" >
<textarea id="subject" name="subject" style="height:150px"></textarea>
<input type="submit" name="submit" id="submit" value="Send">
</form>
</div>
</div>
</div>
</div>
</div>
Using Bootstrap - try this:
$('#submit').submit(function(e) {
e.preventDefault();
$('#IDModal').modal('hide');
return false;
});
Also - I don't see a button type. I would recommend switching <input type="submit" name="submit" id="submit" value="Send"> to < <button type="submit" name="submit" id="submit" value="Send">.
Let me know your results!
<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 have a simple form with method="get" and action="?subject=search_result&":
<form class="form" id="searchform" name="searchform" action="?subject=search_result&" method="get">
<input type="text" name="search" class="form-control" placeholder="Search for...">
<button class="btn btn-default" type="submit">Go!</button>
</form>
it only return
?search=blablabla
instead of
?subject=search_result&search=blablabla
You can just do this:
<form class="form" id="searchform" name="searchform" action="" method="get">
<input type="text" name="search" class="form-control" placeholder="Search for...">
<button class="btn btn-default" type="submit">Go!</button>
<input type="hidden" name="subject" value="search_result">
</form>
Notice the <input type="hidden". This will give you both search and search_result inside your URL.
You can use the hidden input field to set the extra parameters and you can remove the action attribute. The default method is GET, that can also be avoided as shown below:-
<form class="form" id="searchform" name="searchform">
<input type="hidden" name="subject" value="search_result">
<input type="text" name="search" class="form-control" placeholder="Search for...">
<button class="btn btn-default" type="submit">Go!</button>
</form>
I'm using Bootstrap 3 and I'm trying to increase the width of my form.
My form:
<form accept-charset="UTF-8" action="/users" class="form-inline" role="form" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value=""></div>
<div class="form-group">
<input autofocus="autofocus" class="form-control" id="inputEmail3" name="user[email]" placeholder="Email" type="email" value="">
</div>
<div class="form-group">
<div><input class="btn btn-default" name="commit" type="submit" value="Create my account"></div>
</div>
<br>
</form>
I've tried using the following style:
.form-inline .form-group input {
width:440px;
}
However when I do this all my inputs including the Create My Account button increases its size along with all other inline-forms I have in my app.
Is there anyway possible to change the style for one single input in a particular form instead of all of them?
You can use a whole load of selectors, for example:
.form-inline .form-group input[name=commit] { ... }
#new_user .form-group input:nth-child(1) { ... }
There are many many more
One way is to use col-* on the form-group..
<form accept-charset="UTF-8" action="/users" class="form-inline" role="form" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value=""></div>
<div class="form-group col-sm-4">
<input autofocus="autofocus" class="form-control" id="inputEmail3" name="user[email]" placeholder="Email" type="email" value="">
</div>
<div class="form-group">
<div><input class="btn btn-default" name="commit" type="submit" value="Create my account"></div>
</div>
<br>
</form>
Demo: http://www.bootply.com/117635