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.
Related
I must have this input with a text on the right.
So, it isn't a placeholder, it's a real input.
To do this, I must add a div for the text ?
I sought on the web but I didn't find any code :-(
You need to add value="something" and to pull it to the right, you need to add style="text-align:right"
<form>
<input type="text" style="text-align:right" value="abcd"><br>
<input type="text" style="text-align:right" value="efgh"><br>
<input type="submit" value="Submit">
</form>
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.
I need to pass this so a hardware engineer can do his work but it's not working. Any suggestions?
http://wfbscd13.cadence.com/cgi-bin/motd.cgi?msg=3&cmd=replace&text="
Here is my code...
<div class="messageform">
<fieldset>
<legend>Title 1</legend>
<form action=http://wfbscd13.cadence.com/cgi-bin/motd.cgi?msg=1&cmd=replace&text=" method="post">
<label for="mestext1"></label>
<input type="text" size="100" maxlength="80">
<div class="floatright">Titles can be up to 80 Characters... upload file if beyond 80 chars  <input type="submit" name="button1" id="button1" value="Replace"></div><br>
I thought I was good on this code but it's not working right, any ideas? Did I miss something?
Better like this:
<div class="messageform">
<fieldset>
<legend>Title 1</legend>
<form action="http://wfbscd13.cadence.com/cgi-bin/motd.cgi" method="GET">
<input type="hidden" name="msg" value="1">
<input type="hidden" name="cmd" value="replace">
<label for="mestext1"></label>
<input type="text" id="mestext1"" name="text" size="100" maxlength="80">
<div class="floatright">Titles can be up to 80 Characters... upload file if beyond 80 chars
<input type="submit" name="button1" id="button1" value="Replace">
</div>
</form>
</fieldset>
</div>
You need to be more careful with closing quotes and tags.
If a URL has a '?' in it, it probably means they want it as a GET not a POST.
Use hidden variables for the fixed params.
Don't repeat the text param.
The for of a <label> needs to point to the id of a tag.
If this is your entire code, then its not working probably because the code is not well-formed , i.e. there are places where you have missed to close the tags.
This is a pure semantic question.
On my website, I have a guestbook in which you can post a comment and edit it. For posting or editing your comment, there are two very similar forms. Javascript will choose whether the form for posting or the form for editing will be visible (since all happens asynchronously). These are the two forms:
<form class="comment">
<h1>Comment</h1>
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
<input type="submit" value="Comment" onclick="return addComment($(this).parent());" />
</form>
<form class="edit">
<h1>Edit your comment</h1>
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
<input type="hidden" name="id">
<input type="submit" value="Edit" onclick="return editComment($(this).parent());" />
</form>
First off, I'd like to optimize these forms so that they are the best HTML5 semanticly. So What do you think, should everything within a form be wrapped in fieldset and why? Shouldn't h1 be legend or label? And the error messages, is it legit that they are now a label or should they rather be span?
But my main question is: since these forms are so similar, I could do three things with it:
keep the forms separate and make javascript hide one and show the other at the right time (as in the code above)
combine the forms in one form, giving some tags class="only_for_commenting" and others class="only_for_editing" (as in the code below)
combine the forms in one form, wrapping the tags in fieldsets according to when they should be shown (as in the code at the very bottom)
combined using classes:
<form>
<h1 class="only_for_commenting">Comment</h1>
<h1 class="only_for_editing" style="display:none;">Edit your comment</h1>
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
<input class="only_for_editing" type="hidden" name="id">
<input class="only_for_commenting" type="submit" value="Reageer" onclick="return addComment($(this).parent());" />
<input class="only_for_editing" type="submit" value="Wijzig" onclick="return editComment($(this).parent());" style="display:none;" />
</form>
combined using fieldsets: Edit: I've been conviced that this solution is the worst
<form>
<fieldset class="only_for_commenting">
<h1>Comment</h1>
</fieldset>
<fieldset class="only_for_editing">
<h1 style="display:none;">Edit your comment</h1>
</fieldset>
<fieldset class="for_both">
<label>Title: <input type="text" name="title" size="50" maxlength="60" /></label>
<label class="title_error error">Required.</label>
<label>Author: <input type="text" name="author_name" size="25" maxlength="35" /></label>
<textarea name="content" cols="60" rows="8" maxlength="1500"></textarea>
<label class="content_error error">Required.</label>
</fieldset>
<fieldset class="only_for_editing">
<input type="hidden" name="id">
<input type="submit" value="Wijzig" onclick="return editComment($(this).parent());" style="display:none;" />
</fieldset>
<fieldset class="only_for_commenting">
<input type="submit" value="Reageer" onclick="return addComment($(this).parent());" />
</fieldset>
</form>
So which option is the best semantically?
Edit: so I'm still thinking of three different solutions. I could have two separate forms (first block of code), or these two forms in different fieldset tags enclosed in one form tag, or I could have one combined form with classes for every input so javascript can hide one class and show the other (second block of code). In order to be able to choose between them, I'd like some advice. Which one of the three options is true:
The comment and edit form are two totally different forms semantically
The comment and edit form are different fieldsets of one same form
The comment and edit form are in fact to be seen as one and the same form
Well semantics is always debatable, but i think what you could try is that wrap both the forms in different field sets as the purpose of both the forms are different and according to me that is the point of semantics. You could give both the forms different class names and switch accordingly.
And regarding the error message query you should use a label as if a screen reader is in place its more likely to detect the error than a non-label element.
But as i said semantics are always debatable, you could at the end choose what makes more sense to you.
I have done this a lot of times but I have a problem, I'm trying to do it with the google form, the google name have slashes so is not working on all browsers, is there a different way to do this?
Any clue is good :D
code:
<form action="http://www.webpage.com/search.php" id="cse-search-box" name="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-number" />
<input type="hidden" name="cof" value="FORID:number" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" class="form-search" />
<a name="sa" id="sa" href="javascript:document.cse-search-box.submit();"><img src="images/arrow.jpg" class="img-search"/></a>
</div>
</form>
<input type="image" src="path/image.png" />
<input type="image" ...> is what is used for images acting as submit buttons.
- is the minus operator, so document.cse-search-box doesn't mean what you think it does -- further, this way of accessing elements is obsolete. Use getElementById instead:
document.getElementById('cse-search-box').submit();
Actually, you don't even need JavaScript to do this. There are at least 2 ways to do it using HTML alone:
<input type="image" src="images/arrow.jpg" />
or:
<button type="submit"><img src="images/arrow.jpg" /></button>