A strange problem/situation with some particular form

[tayiper]

Hey all, this time I will write about a confusion in regards to some particular form on my website. You see, as a result of things mentioned in this post of mine in some other thread here 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;...

So 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

[tayiper]

OK folks, I already got some feedback here in this thread on WebDeveloper forums. Now I only need to know if I need to put <form action="#"> also to the beginning of others <input type="image" (namely for two buttons that open search and contact pages)??!


tayiper

[niktesla]

why use form elements?

is there a reason you have to use form elements?

seems like all you need are anchor wrapped images with onclick.

example:

<a href="#" onclick="bookmark('index.html','Tadej Persic\'s website | index')"><img src="save.png" border="0" /></a>

[tayiper]

Originally Posted by tayiper

OK folks, I already got some feedback here in this thread on WebDeveloper forums. Now I only need to know if I need to put <form action="#"> also to the beginning of others <input type="image" (namely for two buttons that open search and contact pages)??!

Oh and of course: beside that I am also interested is it possible to align this "bookmark page" button (after I fix it with "</form>" closing/ending tag of course) to the same line/row with the rest of the buttons as it is aligned/displayed currently (again, see the website linked in the original post) with form not yet fixed??!


tayiper

[tayiper]

Originally Posted by niktesla

why use form elements?

is there a reason you have to use form elements?

seems like all you need are anchor wrapped images with onclick.

Ahhh, thanks you soooo much, so if I understand you correctly I don't even need to use form in case of others??! OK then, if this is true then the only question that remains is: is it possible to align this "bookmark page" button to be displayed in the same line/row as the rest of the buttons??


tayiper

[niktesla]

yes it's possible. I think.

I'm not clear on the question.

[tayiper]

Originally Posted by niktesla

yes it's possible. I think.

I'm not clear on the question.

Well then please take a quick look at the website in question (and page on it, but best would probably be the http://tadejpersic.50webs.com/index.html one) and see the mentioned line/row of buttons for yourself ...


/UPDATE: Sorry niktesla but I totally missed your reply (i.e. I posted my post before checking if there are any new responses to the previous one)


tayiper

[niktesla]

It looks proper.

Is everything working the way you want it?

[tayiper]

Originally Posted by niktesla

It looks proper.

Is everything working the way you want it?

Yes, it indeed looked proper since I haven't actually changed it yet back then (and uploaded to the server), but yeah, luckily I managed to find solutions/fixes to/for most of these things by myself anyway ...


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 link where it says:

The website is licensed by Creative Commons (deed/code/disc) license. Some Rights Reserved.

1. Specifically, 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 is 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 code:

<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 regarding my other problem (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. - And finally, just a notice 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 http://tadejpersic.50webs.com/sample/index-old.html for the sample file of the: http://tadejpersic.50webs.com/sample/index-old.html page that still had the mentioned things coded in a wrong manner (and also still had an old layout)


tayiper