A banal question on two variants of 'form' code

[tayiper]

Hello all, I have a simple and banal question about the two variants of the "form" code (well, and I guess that it's quite similar in case of "input" elements), i.e. one with and one without the closing </form> tag ...


The code variant number 1:

<form action="#" />bookmark: <input type="image" src="save.png" title="bookmark page" onclick="bookmark('http://tadejpersic.50webs.com/about-site.html','Tadej Persic\'s website | about site')" />

The code variant number 2:

<form action="#">bookmark: <input type="image" src="save.png" title="bookmark page" onclick="bookmark('http://tadejpersic.50webs.com/about-site.html','Tadej Persic\'s website | about site')" /></form>

Therefore I am curious: is there any difference at all between the two??!


P.S. - You can also check out the A strange problem/situation with some particular form and A bookmark form adds 'Load in sidebar' in Firefox (see under the last "P.S." paragraph in my first/initial post) threads that I opened here on the Digital Point forum and in which I also sort of mentioned this particular thing.


tayiper

[innovati]

Yes! there is a difference, one it written in XHTML (version 1) and the second is written in HTML (version 2)

Although both will render perfectly in all browsers, XHTML is more recent and smarter code (see how it takes out some of the redundancy)

I'd recommend of course to go with variant 1, because it's more recent and smarter, but they both do exactly the same thing.

hope this helps!

[Stomme poes]

Huh?
<form action="#" />

The above does not exist as far as I know. XHTML does indeed have some tags that can be "self-closed" with /> (actually, it's not really the way to self-close, but it's the only way we can have the HTML Null End Tag versions that almost nobody supports which is the / that closes and not the > while satisfying XML's need to close all tags <foo></foo>)... however, FORM is NOT one of them that I know. The first one might work, as browsers sure do allow a lot of stuff to get by them, but it is NOT good code (as far as I know... I've been building a lot of forms in the last several months, both XHTML and HTML... the only difference being the ends of the INPUT tags... those are self-closing in XHTML <input type="text" id="blah" name="blah />).

Forms must be this way:
<form method="something" action="something">
<some block or flow element such as DIV or FIELDSET... FIELDSET requires a LEGEND in XHTML>
<label for="something">LABEL</label>
<input type="text" id="something" name="somethingelse">
<close block or flow element>
</form>

Forms may not have NAMEs but the must have METHODs and ACTIONs. The must be closed with a full closing tag.

List of so-called "empty" elements: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param. No others.

[tayiper]

Originally Posted by Stomme poes

Huh?
<form action="#" />

The above does not exist as far as I know. XHTML does indeed have some tags that can be "self-closed" with /> (actually, it's not really the way to self-close, but it's the only way we can have the HTML Null End Tag versions that almost nobody supports which is the / that closes and not the > while satisfying XML's need to close all tags <foo></foo>)... however, FORM is NOT one of them that I know. The first one might work, as browsers sure do allow a lot of stuff to get by them, but it is NOT good code (as far as I know... I've been building a lot of forms in the last several months, both XHTML and HTML... the only difference being the ends of the INPUT tags... those are self-closing in XHTML <input type="text" id="blah" name="blah />).

Well, it surely does work as intended (though in case of type="image" like here instead of input type="button" like here it redirects to some strange URL; for more info please see the A problem with one variant of the bookmark form thread that I opened yesterday), and above all, it surely validates as a Valid XHTML 1.0 Transitional. /UPDATE: in fact both variants do validate, I've just checked it ...


I guess I was experimenting with the two variants only to fix that "redirect problem" (i.e. a redirect after visitor presses the "Bookmark" image), however unfortunately it doesn't fix it at all!!


P.S. - Oh and yes, regarding some other similar problem with redirecting (i.e. a redirect after visitor presses the "E-mail me" button), see the A problem with 'E-mail me' input button redirecting thread that I also opened yesterday here on DP forums.


tayiper

[Stomme poes]

and above all, it surely validates as a Valid XHTML 1.0 Transitional.

A lot of "crap" validates as Transitional. And actually I've been discovering lately that a lot of things also pass Strict validation that shouldn't as they don't pass XML validation (which supposedly XHTML was going to be able to do).

I don't know what bugs there might be with bookmarking scripts, but there is indeed a difference between input type="image" and input type="button". You can read about it on the W3c page (you probably already have) but the main difference is that input type="image" is, for all intents and purposes, a submit button, and has all the properties thereof. Buttons are much much looser thing. They don't have the restrictions of submits, and actually I try to avoid them when I can just because I'm not so comfortable with them. For any form submitting, I would stick to the type="image" one. The button one... I guess could be for anything that's not supposed to trigger the ACTION of a form.

I'm thinking Transitional is validating <form /> because it thinks the / is truly closing the tag as it would if it were a null end tag. But it's not. All your browsers are merely ignoring the mistake : ) They do that. An XML parser wouldn't. It would take one look and puke up an error message.

[tayiper]

Originally Posted by Stomme poes

For any form submitting, I would stick to the type="image" one.

OK, thanks much for the extensive explanation. However since you're already recommending to use type="image" over the input type="button", would you be then so kind and explain to me (if you have any idea of course) why the am I getting redirected (see for instance this page) after pressing on that image to bookmark the current page, as explained in details in A problem with one variant of the bookmark form thread already linked above, and not if I use the "button method" (like I do on this page)??!


Thanks again, tayiper

[Stomme poes]

Unfortunately I know nothing of scripting. I only know that input type="image" are synonymous (sp?) with input type="submit", and that if you had <form /> or <form></form> (the equivilant) then any inputs you have afterwards are not even in the form anyway! It's possible that a "button" will do the action of the form while in the form, and does something completely different when sitting somewhere else on the page (when the form is closed before the button).

But I know nothing of bookmarking scripts, and surely it's in the script? Or, the script looks to see if the button is supposed to do the form action or not? That would likely explain why two different things happen depending on where you close the form.

Look:

<form action="something" method="post"></form> (the equivilant of <form />)
<input type="blah" />
<input type="button" />
other stuff...

Neither of those inputs are actually INSIDE the form. So I'm guessing that when you change it to this:

<form action="something" method="post">
<input type="blah" />
<input type="button" />
</form>

That now the script might be looking at action="something".

Oh and I doubt this has anything to do with anything, but when I'm desperate I go with anything... one of the pages you get sent to has this huge "XML prologue" in front... and the other doesn't. Maybe possibly somehow that has something to do with this?? But otherwise, I'm out of guesses.

[tayiper]

Well you know what I've just discovered?? That the "form" element (with or without the closing part) is actually not needed at all nor in type="image", nor in input type="button" case, similarly to that "E-mail me" input button (for its code see this thread) which is/I use without it from the very beginning, i.e. meaning that I got it like this originally!!


And above all, if I don't use it (i.e. don't use the "form" element) that problem with redirecting (as described in this thread) disappears completely!!


While regarding the bookmarking script (btw. I got it here: http://virtualipod.tripod.com/bookmark.html), its code is quite straight-forward, please see here below:

function bookmark(url,title){
  if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {
  window.external.AddFavorite(url,title);
  } else if (navigator.appName == "Netscape") {
    window.sidebar.addPanel(title,url,"");
  } else {
    alert("Press CTRL-D (Netscape) or CTRL-T (Opera) to bookmark");
  }
}

tayiper

[Stomme poes]

I can count the number of people I know using Netscape Navigator 4 on my fist (zero) : )

There's surely a more up-to-date script out there?

[tayiper]

Originally Posted by Stomme poes

I can count the number of people I know using Netscape Navigator 4 on my fist (zero) : )

There's surely a more up-to-date script out there?

Yeah I suppose you're right because you see, another problem with this particular script is that loads a bookmarked page in a sidebar (at least in Firefox) as I described in the A bookmark form adds 'Load in sidebar' in Firefox thread that I also opened here on DP forums back then ...


tayiper