I'm trying to get the Search Form Hero to look like this:
https://revolution.themepunch.com/wordpress-search-form-hero/
But the search button is always below the input field like this:
http://cheeky.travel/landing-2/
My hunch is it has something to do with vertical-align but not sure. This is the HTML:
<form role="search" method="get" id="searchform" class="revtp-searchform" action="https://cheeky.travel"><input type="text" value="" name="s" id="s" placeholder="What are you looking for?" /><input type="hidden" value="product" name="post_type" /><input type="submit" id="searchsubmit" value="Search" ></form>
Any ideas? I've tried to use span and row and nothing changes. Thanks!
You'll have to add float:left to the input field.
Related
I am trying to mirror the google image search.
so far I know that q is the name for the actual google search (or query).
On the address it will look: www.google.com/search?q=parrot
but on the google image search also appears /search?q=parrot&tbm=ish
I looked and found out that tbm stands for "to be match" and is a filter and I guess is the filter to match the images... but I don't have a clue how to put inside my html code.
So far I have done this:
<form action="https://www.google.com/search" class="form">
<input type="text" name="q" class="search_bar"
<input type="submit" value="Search" class="submit">
</form>
How do I add the tbm filter? Thanks!
You can add a hidden input field and set the value of it.
example
<form action="https://www.google.com/search" class="form">
<input type="text" name="q" class="search_bar">
<input type="hidden" name="tbm" value="ish">
<input type="submit" value="Search" class="submit">
</form>
I've got this code in html:
<form action="/login/" method="post">
<input type="text" name="login">
<input type="text" name="pass">
<input type="submit" value="login" name="type" >
<input type="submit" value="register" name="type" >
</form>
When I submit this form it sends a get request with the value of the field of the button clicked. However I want to change the label of the button without changing the value sent in get. Is it possible or not?
Use a button element:
<button type="submit" name="type" value="register">Sign up for an account</button>
Note that old IE has problems with this.
Using <form method="get"> element including <input type="submit"> element, we can have a way to GET a web page with some fields specified by the <input type="text" name="studentId"> elements, but can I customize those fields?
For example: I always want to add a action=true to the GET url to let the URL be something like this: http://example.com/?studentId=123&action=true?
Use <input type="hidden" name="action" value="true" />
inside your form.
You can add a hidden form field, though the name action is not a good one, as form has an action attribute and this name can conflict when scripting the form:
<input type="hidden" id="something" name="something" value="somthingelse" />
<div id="gbqffd">
<input type="hidden" value="en" name="h1">
<input type="hidden" value="d" name="tbo">
<input type="hidden" value="search" name="output">
<input type="hidden" value="psy-ab" name="sclient">
</div>
Google always has the answer; in this case I never had to do a search just look at the source :)
I don't know how to put it exactly, so here goes.
I've created a search bar on my webpage that uses your input text to search another website.
This is what I've got (things have been censored):
<form name="search" class="form-search" method="get" action="http://www.nameofwebsite.com/search.php?">
<input name="searchbynum" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<button type="submit" class="btn btn-primary">Search</button>
</form>
When searching on the actual website, the search URL looks like this:
http://www.nameofwebsite.com/search.php?searchbynum=search+phrase&searchbydesc=&Submit=Go
Where "search+phrase" is what is searched. To get to the point,
What would I have to do to add the "&searchbydesc=&Submit=Go" at the end of the search?
Add hidden fields to your page.
<form ...>
<div>
<input type="hidden" name="searchbydesc" value="" />
<input type="hidden" name="Submit" value="Go" />
</div>
</form>
Note that your HTML as it is, is invalid. A <form> element cannot have <input /> elements as immediate children, they must be wrapped in a <div> or <fieldset> or other similar elements.
How do I get the textfield and button attached to each other
Here is my demo
http://jsfiddle.net/dgWqL/2/
You can simply remove the whitespace between #textfield" and input[type="button"].
(Whaaat?) Well, this is your html:
<input type="text" name="textfield" id="textfield" value="Search here" />
<input name="" type="button" value="Go">
This is the same as having...
abc
def
...which, as you'd never question, gets rendered as abc def.
It's the exact same thing.
As I've suggested you can simple delete that whitespace by putting the second input right in front of the first one in the html, as so...
<input type="text" name="textfield" id="textfield" value="Search here" /><input name="" type="button" value="Go">
Another option is to comment out the whitespace - that's if you prefer to have each input on it's own line:
<input type="text" name="textfield" id="textfield" value="Search here" /><!--
--><input name="" type="button" value="Go">
Here's a fiddle - http://jsfiddle.net/dgWqL/3/
You can do it this way : http://jsfiddle.net/dgWqL/2/ The key is using float
Suggestion:
Do not use table for layout. (It is bad practice.)
Write your CSS properties on separate lines. (Easier to read) and make it easier to
avoid repeatition like you did with display: inline-block;
Hope this help.