A strange problem/situation with a form on my site

[tayiper]

In this post I'll write about a confusion regarding some particular form on my website. As a result of things mentioned in this post of mine (http://forums.digitalpoint.com/showpost.php?p=5101556&postcount=34) in some thread on DP forums, I checked the code of some particular form on my website: http://tadejpersic.50webs.com/index.html (please visit it to actually see what I am talking about)


I am talking about that line/row of buttons, while the problematic one is the first one, which uses an external .js file and which function is to bookmark the current page (the other two buttons with <input type="image" in this line/row are to open a search and contact pages); here below is the original code of the "bookmark page" form:

<form action="#">
<input type="button" value="Bookmark us!" onclick="bookmark('http://javascript.internet.com/','JavaScript Source')">
</form>

Well, and then I checked the code as it is currently on my website, and I noticed that (not sure why/when, but as you can see, this is the only way to show them all in one line; please see below) I changed it so that it looks like (compare to the original "bookmark page" form code above) I forgot to close it with the "</form>" ending tag. So here below is the code of the "bookmark page" form (and I also included the code of buttons that open search and contact pages) as it is on my website, and it surely works as it should, and the page is validated by the W3C checker:

<form action="#" /><input type="image" src="save.png" title="bookmark page" onclick="bookmark('index.html','Tadej Persic\'s website | index')" />&nbsp;<input type="image" src="search.png" title="search site/web" onclick="window.open('search.html','search','height=560,width=440')" />&nbsp;<input type="image" src="contact.png" title="contact me" onclick="window.open('contact.html','contact','height=560,width=440')" />

But if I change the code to remove the " /> part (i.e. to become ">) and add the closing "</form>" tag as you can see in the first example below, then the "bookmark page" button is placed in its own line above the line/row with the rest of the buttons. Here below are examples of the code of the "bookmark page" form (with the code of buttons that open search and contact pages removed for you to easily see the change); in the first example there's the code as it is after I modified it (i.e. I changed the " /> part to become ">, and added the closing tag, as mentioned above), and as it was/and still is originally on my website:

<form action="#"><input type="image" src="save.png" title="bookmark page" onclick="bookmark('index.html','Tadej Persic\'s website | index')" /></form>&nbsp;...

<form action="#" /><input type="image" src="save.png" title="bookmark page" onclick="bookmark('index.html','Tadej Persic\'s website | index')" />&nbsp;...

Therefore I am curious: is the form of the code like I modified it afterwards correct, or should I close it with the ending tag "</form>" as it is in the original code (it's an example from some tutorial I guess)of the mentioned form??!


tayiper

[WebJoel]

You need to close "form" with a proper closure tag, because:
<form action="#"><input type="image" src="save.png" title="bookmark page" onclick="bookmark('index.html','Tadej Persic\'s website | index')" />...

Currently, you only properly-closed "<input...." with " />"

There will be a missing-expected "</form>" warning, as written above.

<form action="#" /> is wrong, because it 'closes' "<form>" before input. You want <form> <input ... /> </form> :)

[tayiper]

You need to close "form" with a proper closure tag, because:


Currently, you only properly-closed "<input...." with " />"

There will be a missing-expected "</form>" warning, as written above.

<form action="#" /> is wrong, because it 'closes' "<form>" before input. You want <form> <input ... /> </form> :)

Thanks much WebJoel, so then it is as I thought (i.e. that the right form is as it's in original example from that tutorial), but anyway, the strange thing is that it works correctly even now (i.e. with from not closed) as it is ...


And do you have any idea on how to align this "bookmark page" (after I fix it of course, because now they are aligned, but the form is as mentioned not propery closed) from with the rest of the buttons??!


tayiper

[tayiper]

Oh and one more question: what about other <input type="image" do they all require on the beginning??!


tayiper

[tayiper]

Oh and one more question: what about other <input type="image" do they all require on the beginning??!

Sorry, the text should read: ... do they all require <form action="#"> in the beginning??!


tayiper

[WebJoel]

Sorry, the text should read: ... do they all require <form action="#"> in the beginning??!


tayiper
If some action (like a submit button to click), they do require action="#" and a filename URL is the "#"

I found this:

http://www.w3schools.com/html/html_forms.asp

[tayiper]

If some action (like a submit button to click), they do require action="#" and a filename URL is the "#"

Thanks much for the additional explanation... I only have one question left: what's the difference between, or in other words, is it possible to use <a href="" instead of <a href="#" (and similarly for the form <form action=""> instead of <form action="#">), same as I do to open such popup window below under the "Copyright notice" for the disc (http://creativecommons.org/licenses/disclaimer-popup?lang=en) link where it says:

The website is licensed by Creative Commons (deed (http://creativecommons.org/licenses/by-nc-nd/2.5/deed.en)/code (http://creativecommons.org/licenses/by-nc-nd/2.5/legalcode)/disc (http://creativecommons.org/licenses/disclaimer-popup?lang=en)) license. Some Rights Reserved.


1. Namely, I've found out that indeed don't need to use form (nor <input type="... of course) for the other two mentioned elements (i.e. for buttons that open the "search" and "contact" pages, beside the one that bookmarks the page, which does require it) in the line/row of the buttons!! Actually, I am not sure why I did use them in the first place.

Here's the old code:

<input type="image" src="search.png" title="search site/web" onclick="window.open('search.html','search','height=560,width=440')" />

<input type="image" src="contact.png" title="contact me" onclick="window.open('contact.html','contact','height=560,width=440')" />

And here the new one:

<a href="#" onclick="window.open('search.html','search','height=560,width=440')"><img class="button" src="search.png" alt="search site/web" title="search site/web" /></a>

<a href="#" onclick="window.open('contact.html','contact','height=560,width=440')"><img class="button" src="contact.png" alt="contact me" title="contact me" /></a>


2. And secondly regarding the other problem that I had (i.e. that there is not possible to align this "bookmark page" button that uses a form with the rest of the buttons), I simply moved this particlar button elsewhere, namely under the title (i.e. <h1> headline) of the respective page.


But anyway, if anyone does know for a way to do it as it was before (i.e. all the buttons in the same line/aligned to the same row), I would be glad to hear it.


P.S. - Finally, just a note on one strange thing. You see, it's that the page in question strangely did validate even before (with one form not propery closed, and with two <input type="... without form "around them"); see for instance the W3C Markup Validator results here: [Valid] Markup Validation of .../sample/index-old.html (http://validator.w3.org/check?uri=http%3A%2F%2Ftadejpersic.50webs.com%2Fsample%2Findex-old.html&charset=%28detect+automatically%29&doctype=Inline&group=0) for the sample file of the: index-old.html (http://tadejpersic.50webs.com/sample/index-old.html) page that still had the mentioned things coded in a wrong manner (and btw. it also still had an old layout)


tayiper

[WebJoel]

<a href="#"> simply means "self", and is 'skipped' as being a warning if validated. The absence of the "#" throws a validation warning. Nothing more complicated than simply this is how I write it when a link is not provided (or I need to post-up and do not want to divulge the client's URL to the web, else it shows up here in WD archive base in a few weeks on Google SEARCH, usually to the client's dismay.. :( ).

Another way is "<a href="#nogo">" which means of course, you 'no go' anywhere when clicked.

Others include alt="#", title="#", etc. These would validate, but for Accessibility, should have actual text.
I don't think that action="#" would serve the same purpose, as some action is required and "self" or "nogo" is not a viable option. Not sure... haven't done alot with "<form>"s myself other than copy&paste existing ones.