What purpose would a form server that did not have an action ,,
nor did it have a submit or button, and no javascript anywhere on the page..
<form method="post">
<input type="hidden" name="dtsg" value="AQAdsMJX" autocomplete="off" />
<i class="imgprofpic">
<img src="http://abc.com/img.jpg" class="imgCrop img" />
</i>
<a href="/test">
test
</a>
<input type="hidden" autocomplete="off" name="page" value="0" />
<input type="hidden" autocomplete="off" name="last_page" value="0" />
</form>
I would use it for css
<style>
form{
border:1px solid gray;
}
</style>
Still serves a purpose
It may be designed to be read into another page by an ajax call in which the JS would exist on the reading page.
Related
I've got a table with few forms. The date is submit button:
And this is the same table without form tag(only input type="submit"):
As you can see, form tag adds new line. How can I avoid this?
The code:
<form id="command" action="/wifi/selection" method="POST">
<input type="hidden" name="beginDate" value="2014-06-30">
<input type="hidden" name="endDate" value="">
<input type="hidden" name="apId" value="1824">
<input type="hidden" name="ssidId"
value="42">
<input type="submit" class="btn btn-link"
value=" 2014-06-30" />
<input type="hidden" name="_csrf" value="812810c6-9e41-434c-baec-b4db1680ce7a" />
</form>
Set style="display: inline;" on the form might do it.
try this:
<style type="text/css'>
form {display:inline; margin:0px; padding:0px;}
</style>
This link will help: How to prevent newline/line break within a <form></form>?
I have a simple HTML form with multiple submit buttons and I want my application to act differently on whichever submit button I click.
Example:
<form method="POST">
<input type="submit" value="test" name="test" />
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="text" name="search_query2" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search2" />
<input type="submit" value="GO" name="next" />
</form>
This works for me, and I know how to distinguish which button I clicked. The problem I have is that if I push Enter while editing the text-field then the first submit button gets clicked (the one named test). Is this possible to let the browser know (with HTML only - the whole point of this is to make it work with NO JavaScript) that I pushed Enter and it should send search with POST, not test?
So is there some kind of binding of text field to the submit button?
A solution to this problem would be to have multiple form elements, including your different submit buttons and the corresponding textfields.
I can't think of a solution with just one formular but no Javascript in use.
You could move the one you want to be submitted to first in that list, like so:
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="submit" value="test" name="test" />
<input type="submit" value="GO" name="next" />
</form>
But it seems that your HTML is just poorly formed, I'd recommend Merguez's answer
Since your edit, there is no way to do this without Javascript/jQuery.
This would not be hard to do with PHP.
First: Change your buttons to actual controls:
becomes
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some
text" />
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Search">Search</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Test">Test</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Go">Go</button>
</form>
Now, when the form is submitted, check the returned value of actionB. If it's "Search", then piece together your search URL using the returned value of search_query.
There is NO way to read variables using only HTML. JavaScript is required if you're not going to use a scripting language to do this. You can totally do this in native JavaScript. JQuery is NOT required for this relatively simple function.
<script language="JavaScript">
function checkBtn() {
var btnX=document.getElementById("actionB").value;
if (btnX=="Search") {
// compose your new URL here
}
// repeat for each of the possible buttons
</script>
Hope that helps somewhat!
Steve
ttI know this is a lame question but in order to do it right i need your help.
this is my html code
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
</form>
<div style="width:100%; font-size:14px;text-align:center;">Click here to subscribe
</div>
<div class="subscribe">
</div>
and here is the fiddle
http://jsfiddle.net/V8RB2/
how can i associate the "Click here to subscribe" text and the button with this form?
If i understood you correctly, you want to submit the form when the link is clicked. To do this, you'll have to use JavaScript.
A quick way of doing it is by telling the form to submit itself in the onclick attribute of the link.
<a onclick="form1.submit()" href="#">Click here to subscribe</a>
What happens is, that when the link is clicked, you trap its onclick event and then you tell form1 to submit itself.
The easiest way would make this a button within the form and use CSS to style it however you want.
<input type="submit" id="button1" class="button1" name="subscribe" value="Click here to subscribe!" />
Then to style:
form input.button1 {
style here
}
The below will work.
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
Click here to subscribe
</form>
Change your link's href to:
href="javascript:document.forms['form1'].submit()"
Or add that as an onClick attribute.
Updating with a technique to route around disabled javascript.
<script>document.write('Click here to subscribe</div><div class="subscribe">');</script><noscript><input type="submit" value="submit"></noscript>
I am experiencing an issue with Firefox (tested with FF5/win, FF6/win, FF5/mac) having wider margins than any other browser I've tested. (IE9/win, Chrome/win, Opera/win, Safari/win, Safari/mac).
Admittedly, the HTML is unusual, I have 5 forms in a row, but I cannot find any documented problems with the idea, or any warning against it.
Here is the code:
HTML
<div style="background-color: rgba(255, 0, 0, 0.5); float: left; height: 82px; padding-left: 5px; padding-top: 12px; width: 502px;">
<span style="color: #514536; font-weight: bold;">Search By Destination:</span><br />
<div id="regions" style="margin-top: 5px;">
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Caribbean" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_carrib_region.jpg" alt="Caribbean" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Mexico" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_mexico_region.jpg" alt="Mexico" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Thailand" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_thailand_region.jpg" alt="Thailand" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Southern US" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_southus_region.jpg" alt="Southern US" />
</button>
</form>
<form action="/view-the-collection/" method="post" style="margin-right: 0px;">
<input type="hidden" id="dest" name="dest" value="Mustique" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_mustique_region.jpg" alt="Mustique" />
</button>
</form>
</div>
</div><br style="clear: both;" />
CSS
#container #regions form {
float: left;
margin: 0px 14px 13px 0px;
padding: 0px;
}
For most browsers, it renders like this:
Except in Firefox, which looks like:
I've made sure to remove padding and margins from every element in each of these forms, and it has no effect. I can't for the life of me figure out what is causing this, whether it is a browser incompatibility, or whether what I've coded is completely out of line. Can anyone advise?
Thanks in advance.
Heres a fix. Instead of adding margins to the forms, just set their widths to 97px each, and align the buttons/images to the left!!
Most likely a browser compatibility issue. I would suggest you using a CSS-reset like the HTML5 Boilerplate: http://html5boilerplate.com/
The extra space looks just about wide enough to be inter-word spaces. Does it go away if you try and cull away all whitespace between your HTML tags (ie between the <form>s and between the various parts of each form)?
You can use a very good and well referenced css package called Formalize CSS - Teach your forms some manners! to make the look and feel of your html form elements cross browser and cross os compatibility.
Can someone please tell me why this will not validate strict?
<div>
<form method="post" action="/search/keywords" />
<input type="text" id="keyword" name="keyword" />
<input type="image" src="/images/go.gif" alt="Search" />
</div>
The problem is that I have two <form>s in my page and when I use the "/" to close the form tag, the browser executes the same action url for both even though they are different urls. When I close the form as the page will send to the proper url but it won't validate. I'm using XHTML 1.0 Strict doctype. Can someone please help?
<div>
<form method="post" action="/search/keywords">
<input type="text" id="keyword" name="keyword" />
<input type="image" src="/images/go.gif" alt="Search" />
</form>
</div>
<div>
<form method="post" action="/search/keywords222">
<input type="text" id="keyword" name="keyword" />
<input type="image" src="/images/go.gif" alt="Search" />
</form>
</div>