I have a website with an anchor tag at the bottom I want to jump to from the top. But I want to put the jump link inside a form element.
<form name=sortby onClick='submit()' method='get'>
<div>
<input type=radio name=sortby value=name onClick='submit()'>
Sort By Name
</div>
<div>
<a href='#bottom'>There are 587 entries on this page</a>
</div>
<div>
<input type=radio name=sortby value=date onClick='submit()'>
Sort By Date
</div>
<input type=hidden name=artist value=''>
</form>
<a id='bottom' href='#top'>Back to the top</a>
I have done a test where I place the anchor link outside the form code and it works. Is there some no-no about putting it within the element?
What I'm experiencing is that the page jumps to the bottom and immediately back to the top using each of Chrome, Firefox, Internet Explorer browsers in windows 7. Note that in Firefox, there is a delay before it jumps to the top as if the browser is processing something.
The link itself won't do anything to affect the form functionality, if that's the question. This is more or less a case of semantics. It's not a great practice but it's also not going to break anything.
I found my problem... The top line should be changed to this:
<form method='get'>
Getting rid of the onClick='submit()' was the key. Basically clicking anywhere in the form element submitted the form. It never let me actually click the link which was "behind/under" the form element.
Related
I came across this weird behavior difference between Chrome and Safari. If there is label with input and button inside of it, clicking the button will make input get focus in Safari, but in Chrome it won't.
I figured out that adding e.preventDefault() to button click handler makes Safari behave same as Chrome.
Here is the minimal code example:
<label>
<input />
<button>add</button>
</label>
Is this a bug in Chrome/Safari or some documented "feature"? What's the "correct" way this html should behave?
Don't know why your button is sitting inside the label. Input and button both are actionable (on which some actions could be done) elements. By default actionable elements gets focus in browser. So, you should keep both elements separate. labels could be wrapped or could not be wrapped with input, refer "Is it better to wrap the label tag around a form item or use the "for" attribute in HTML? for details.
<body>
<label>
<input />
</label>
<button>add</button>
</body>
the following code works in FF, but it does not work in IE8.
<a class="sub">
<input type="submit" a="" none;<="" display:="">
</a>
The button is displayed, but the button is not clickable in IE8. What is going on?
Here is a correctly formed input submit button:
<input type="submit" value="Submit">
I noticed the words display and none usually you'd find it in the following form:
<input type="submit" value="Submit" style="display:none;"> // this however will hide the button
The attribute of type= with the value of "submit" makes our input tag into a submit button.
The attribute of value= with the value of "Submit" displays "Submit" text on our input button.
The attribute of style= allows us to do some inline css like "display:none;" which hides a html element its declared on.
I recommend checking out W3Schools for more on html input tags.
Additionally you are trying to make the button into a link using the <a> tag, this is invalid, please take a look at this Html forms and input page to see how to use the submit input type.
If you just want a link then I'd recommend looking at an <img> for a button and an <a> tag around that.
I do not have comment privileges on this SE yet but I would say that IE is incapable if interpreting: <input type="submit" a="" none;<="" display:="">
When you open "input" you do not close it until after display. the addition of the "none;<" is probably interpreted as another attempt at a tag and breaking html. I'm not sure what you are trying to accomplish but get rid of this:
none;<=""
The code is a mess, but it actually works in IE8, so any problem you are seeing is caused by something outside the code you posted.
Browsers will ignore the crap inside the input tag and recognize it simply as <input type="submit">. Some browsers might conceivably choke on the “<” character there, but IE8 doesn’t.
The a element wrapper outside it has no effect as such.
I stumbled across a strange behavior in Firefox. I have a dynamically created text, into which I have inserted a form element including a link in order to be able to pass parameters via the post method. Ideally, it should just flow with the text and look like a normal anchor.
However, whereas it displays normally in IE, Firefox terminates the paragraph just before the form, which inserts an undesired line break.
Does anyone have an idea why this happens and have a workaround / alternative solution ?
Result in IE (ok):
<p class="article" >This is my paragraph and here goes my
<form style="display: inline" name="link_form" action="link.html" method="post">
<input type="hidden" name="lnk_id" value="1" /><a class="link" href="#" onclick="link_form.submit()">link</a></form>**</p>**
Result in Firefox (ko):
<p class="article" >This is my paragraph and here goes my**</p>**
<form style="display: inline" name="link_form" action="link.html" method="post">
<input type="hidden" name="lnk_id" value="1" /><a class="link" href="#" onclick="link_form.submit()">link</a></form>
Thanks in advance
It's perfectly normal, a P tag can only contain inline elements, which is not the case of a form. (see http://www.w3.org/TR/html401/struct/text.html#h-9.3)
Since HTML4 specs allow you not to close the tags, Firefox assumes you forgot to close your P tag before the beginning of your form, hence the closing tag you can see when inspecting the DOM with Firebug, for example.
on this page in IE 8, there is the famous phantom element bug. I have researched for two days all possible things I can find that might cause this, including hidden inputs (present) floated elements (not present) and HTML comments <!--...--> (present).
The "phantom element" is the grey div between the login div and the "ny kunde" button.
When trying to view this is the IE dev tools (F12) it cannot be selected, nor viewed. I believe it is because of a rendering issue in IE8.
Removing these did not help at all. Plus we apparently need the hidden input for form validation.
It's worth mentioning that this eCommerce solution doesn't validate out of the box.
I have exhausted every solution I can think of, and it is still present.
Does anyone have any suggestions?
Thanks :)
Starting at line 348, there is this code:
<input type="hidden" name="return" value="/checkout/selectAddress" />
</form>
</div>
If I change it to this:
<input type="hidden" name="return" value="/checkout/selectAddress" />
</div>
</form>
Then the problem is solved.
Simplifying (removing stuff from) your HTML:
<div id="user-wrapper">
<form action="/user/doLogin" method="post" id="loginForm" />
<div id="user-kundelogginn">
</form>
</div>
</div>
You can clearly see the form tag is being closed inside the div.
How did I figure this out?
I used the W3C Validator, which got me on the right track with this:
Line 350, Column 7: end tag for
element "form" which is not open
The form within the div is supposed to be hidden, but it isn't in FireFox. In Safari it is fine.
<div id="add_task" style="display:none;">
<form id="add_task_form">
<input type="submit">
</form>
</div>
Any ideas?
Chances are your HTML is malformed somewhere else in the page (like not closing a tag) causing the structure of the page to be randomly determined by the browser. Try validating it with the w3c validator.