<td>
<form name="search_form" action="" method="POST">
<input type="text" name="search_text">
<input type="submit" name="search_bt" value="Go">
</form>
</td>
now when ever we use this code it adds an extra line after it ends.... see the image below
see the red boxed area... there is nothing there... nothing but that space is added for no reason by the FORM
BUT... BUT.. if i use the code like this
<form name="search_form" action="" method="POST">
<td>
<input type="text" name="search_text">
<input type="submit" name="search_bt" value="Go">
</td>
</form>
everything is fine... the space disappears..
WHY SIRE !!!! WHYYYYYYYYYYYYYYYYYY
thats just the way most browsers treat the form element
use css padding/spacing to tell it that it shouldnt added extra space for form elements.
in your css file just add
form {
margin: 0;
padding: 0;
}
and you'll be fine.
This page has a good write-up on what's occurring.
http://www.cs.tut.fi/~jkorpela/forms/extraspace.html
Browsers typically leave some empty
space, roughly corresponding to one
empty line, after a form. The problem
discussed here is often classified as
“extra vertical space after a submit
button”, but this is not the correct
diagnosis. Rather, it’s about spacing
below the entire form, but it is
observed especially often when a form
contains just an input button (often
inside a table cell.
Oddly enough, form elements have CSS styling attached to them. Margins, padding, etc. That's why.
Related
My apologies in advance, I have VERY modest coding experience and am trying to get to grips with HTML...
While applying some basic code for a contact form from insightly (below/attached), I'm trying to incorporate whats discussed here
Can't seem to get it right though, would just like the field titles on the left with the actual fields behind them aligned, with a return between each and while sticking to the coding needed for it to work with Insightly..
Thanks in advance for any help!
[EDIT 1]
Thanks a lot, I have now managed to make it appear more or less as wanted with a bit of CSS (attached). Unfortunately I can't quite get it to behave as need be though, it submits to insightly fine but it doesn't clear the fields upon submit, nor have I found a working method to provide confirmation that it was sent, other than a particularly ugly alert window (especially in chrome)..Any help on 'resetting on submit' and a way of telling the user that it was sent would be great! I did try a bit of CSS from here but to no avail...
<style type="text/css">
/*************CHSE Stylesheet ***/
body {
background-color: transparent;
height:360px;
width:280px;
}
textarea {
height:70px;
width:273px;
}
</style>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>
The key to attractive layouts is DIVs and CSS.
First, use DIVs to group the various input areas, and to divide each area into left/right (via float).
For example, you might want the label and the input fields to be nicely aligned:
.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}
<form>
<div class="frmGroup">
<div class="frmLeft"><label for="fn">First Name:</label></div>
<div class="frmRight"><input id="fn" type="text" /></div>
</div>
<div class="frmGroup">
<div class="frmLeft">Last Name:</div>
<div class="frmRight"><input type="text" /></div>
</div>
<div id="thisone">
<textarea cols="50" rows="5"></textarea>
</div>
</form>
The float instruction is particularly useful, as it allows you to align the DIVs side-by-side. However! It also removes the DIVs from the HTML "flow", meaning that they take zero vertical space. To counter that, add overflow:____ to the parent DIV. In example, I used overflow:hidden]. In the jsFiddle at bottom, experiment by deleting/adding that line.
You can also give an ID to a specific DIV and style it to have either margin or padding above/below/left/right.
DIVs have the added advantage of being block elements, which has the same effect as adding a <br> to the end.
*Also note that the <label> tag is really only useful for buttons, checkboxes, etc. because they allow the user to click the button/checkbox by also clicking on the text label.
Here is a jsFiddle of the above demo that you can experiment with.
I mean: I have an upload form:
<g:form method="post" enctype="multipart/form-data">
<input type="file" name="cv" id="cv" style=" max-width:120px"/>
<g:actionSubmit action="upload" name="upload" value="Upload" />
Once tag is rendered in the final page, i have
<input type="submit" value="Upload" name="_action_upload">
That is, the "Upload" button. But, in the input named "cv", as you can see, i have som css to keep the text box to grow too much. (max-width:120px)
My problem is, the Upload button appears now mounted over the text box where the name and path of the file to upload is written, once selected. And I don't know how to manage that, how to move that button and ONLY that button. Is it that possible?
I've tried to add css to the actionSubmit tag itself, but it moves the whole form.
Thank you.
Float left your input file. Inputs are inline-block. That is why it was causing the whole line to drop down with the button. Floating it will change it to block.
<input id="cv" type="file" style=" max-width:120px; float:left;" name="cv">
The way to make the submit button move independently of another button depends on how you need it to be positioned.
You can add a <br/> before it; or wrap the form content into a <table> and make the two buttons lie in two different <td>s. Or use "vertical-align: top;" for form elements:
form * {
vertical-align: top;
}
I have a simple form with two hidden inputs that is causing extra white space in Firefox. I've been in trouble with this for few days.
<form name="DemoForm" method="get">
<input type="hidden" name="isposted" value="">
<input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
It is rendered in cell. After that, there is a div with content, but in firefox there is a extra white space above the div. Only in Firefox.
I try to fix this putting the form in a div with display:none, its elements in div with "dispay:none" and other things that I have found in the net, but nothing help...
Has anyone met this issue before?
I have fix this issue using div container with "display:none" but removing the "type:hidden" from each element.
The final code looks as follows:
<div style="display:none">
<form name="DemoForm" method="get">
<input name="isposted" value="">
<input value="2" id="SelectedTab" name="SelectedTab">
</form>
</div>
Sure, this could be useful for someone. :- ]
Try removing all white spaces and newline characters within the form, like this:
<form name="DemoForm" method="get"><input type="hidden" name="isposted" value=""><input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
Similar idea to gotqn.
Make data field intended to be hidden an ordinary text field.
Just "hide" the input field by making it the same background-color as the form background.
If you want to hide the field data, use a text color the same as the background.
If you want to display some message/number in it, use a text color that is contrastingly different.
Let say we have the following form code
<form action="post" method="post" name="form">
Your Name : <input name="name" type="text" id="name">
<input type="submit" name="Submit" value="Submit">
</form>
what if i want it to be viewed as image
Why ! in fact i've text-area where i will put some HTML codes and i want the output of that code appears normally as web-browser view but as image , means no way to click on it or operate just appears as image
I do not know if it possible or not but i wonder it it can be and here is example for exactly how this forms i wants to appears
output of the html codes appears as image
so any method any help any function or class can do like this ?!
Thanks
You can do it two ways
Put and transparent block element over it (position: absolute and so on)
disable every input element (disabled:disabled attribute)
see:
http://www.w3schools.com/tags/att_input_disabled.asp
For a standard "add item" form page it is desirable to have two submit buttons: an "OK" button and a "cancel" button, where the former POSTs the form to one URL, and the latter GETs some other URL.
This obviously means that two separate FORMs are needed, and, if laid out with tables, the markup would go as follows:
<form action="add.html" method="post">
<table>
<tr>
<td>Enter data:</td><td><input type="text" name="data"/></td>
</tr>
</table>
<input type="submit" value="OK"/>
</form>
<form action="index.html" method="get">
<input type="submit" value="Cancel"/>
</form>
However, this would result in the two buttons being placed below each other. It would be desirable to have them placed side by side. The following works:
<form action="add.html" method="post">
<table>
<tr>
<td>Enter data:</td><td><input type="text" name="data"/></td>
</tr>
<tr>
<td><input type="submit" value="OK"/></td>
</form>
<form action="index.html" method="get">
<td><input type="submit" value="Cancel"/></td>
</tr>
</table>
</form>
But although I've seen it used on commercial websites, I guess it's not quite legal HTML.
So thus:
1) Since the second methods works, are there any good reasons for not using it?
2) Are there any better solutions?
EDIT: This was a silly question. The second method is unnecessary. Solution: add to the first method a CSS rule of:
form
{
display: inline;
}
You broke my mind.
There are many and varied problems with what you have here, but I'll start by pointing out that Cancel/Reset are not considered good things generally.
I'll follow that by pointing out that you could use CSS to style the buttons side by side in your first example, and follow that by pointing out that a simple type="button" could have any arbitrary script attached to it to do your cancel navigation, and follow that by the fact a simple anchor tag would be even more straightforward.
And I'm not going to mention the table, because that'll just start some trouble.
Don't use a second form. Wrap both buttons in the same form, and do something like this with the cancel button:
<input type="button" text="Cancel"
onclick="document.location.href='index.html';return false;" />
1) When you create a page using "legal HTML," you can have an expectation that what works in today's browsers will work in tomorrow's browsers, or in some other user agents that you might not have checked the site in. But in the example you've given, the degree to which different browsers agree on how to "fix" the HTML for display is much less certain. It adds a level of predictability to the how the page will display when "valid HTML" is used. Plus, who knows how a user agent such as a screenreader would describe the code in question.
2) Is using a regular anchor tag an option?
<td><input type="submit" value="OK"/></td>
<td> or Cancel</td>
Or you could use CSS to move a second form and its submit button up into the first form, but the specifics of this might be tricky.
Add a row to your table
<tr>
<td><input type="button" value="Cancel" onClick="window.location='./index.html'"/></td>
<td><input type="submit" value="OK" name="submit"/></td>
<tr>