Forum Moderators: open
I handle a lot of my <input> and <select> boxes with JavaScript so I don't have to POST or GET from a <form>.
Can I just omit the <form> altogether? It works fine on IE6.
Take care,
Emperor
I use controls all the time that aren't within forms and they work just fine, but more importantly, they validate [validator.w3.org].
They do "assume" that is how they are going to be used, but nothing I found if hinted that it was improper to use them elsewhere. That being the case, what is the "technical source" of your "technically speaking" comment.
Feel free to do as you wish. After all, no two coders code alike. ;) That is the answer to this thread.
Here is what W3C has to say about this at
[w3.org...] :
17.2.1 Control types
[...]
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
Cheers,
Cook
[edited by: tedster at 6:37 pm (utc) on Oct. 14, 2004]
[edit reason] create hotlink [/edit]
If you're purely using JavaScript to interact with the controls, with no form submission - as Emperor is doing - then no form tags are necessary.
That's also how I understand it. Here is some more info from W3C - [w3.org...]
18.2.3 Intrinsic events
[...]
Control elements such as INPUT, SELECT, BUTTON, TEXTAREA, and LABEL all respond to certain intrinsic events. When these elements do not appear within a form, they may be used to augment the graphical user interface of the document.
For instance, authors may want to include press buttons in their documents that do not submit a form but still communicate with a server when they are activated.
The following examples show some possible control and user interface behavior based on intrinsic events.
In the following example, userName is a required text field. When a user attempts to leave the field, the onblur event calls a JavaScript function to confirm that userName has an acceptable value.
<INPUT NAME="userName" onblur="validUserName(this.value)">
Here is another JavaScript example:
<INPUT NAME="num"
onchange="if (!checkNum(this.value, 1, 10))
{this.focus();this.select();} else {thanks()}"
VALUE="0">
[...]
Here is a JavaScript example for event binding within a script. First, here's a simple click handler:
<BUTTON type="button" name="mybutton" value="10">
<SCRIPT type="text/javascript">
function my_onclick() {
. . .
}
document.form.mybutton.onclick = my_onclick
</SCRIPT>
</BUTTON>
Cheers,
Cook
[edited by: tedster at 6:35 pm (utc) on Oct. 14, 2004]
[edit reason] create hotlink [/edit]
Put them in Netscape 4 and they will not appear unless the form tag is there. There may be other browsers where this happens that may be in more common circulation. Don't forget - just because it works in IE for Windows, does not mean it works in IE for Mac. And it certainly could be different for Netscape/Opera/Firefox....
Put them in the from tags, just to be sure.
Netscape 4 does allow the form tag to be used with no parameters. So you could use <form><input....></form>, or maybe if there are lots you could even use <body><form>....</form></body>
The bottom line is simply 2 questions:
Q1) Is it valid html to use control elements that are not within form elements.
A1) According to the W3C (the authority here), yes.
Q2) Does it work?
A2) If the solution you're providing works in all the browsers and on all the platforms you need it to, it's a done deal. If it doesn't work in just NN4, do you care?
Additionally, in my opinion, if your control is just performing an action and not sending data to the server, it may even be semantically incorrect to wrap the control in a form element, and obviously a waste of bandwidth.
And taking it a step further...
On many of my pages, I provide for myself an interface to modify content "live and on the fly". When I "log in" to the site, each page will display various "Add", "Edit" and/or "Delete" controls that let me modify the data on the page remotely. Maybe this is a list of links that are read from a database, or a catalog of items for sale, or what ever.
I may have 30 items on a page that I want to have the ability to edit individually. I could do this for each one:
<form method="get" action="thispage.asp">
<input type="hidden" name="action" value="edit">
<input type="hidden" name="item" value="<%=item%>">
<input type="submit" value="Edit This Item">
</form>
Or I could do this:
<button onclick="location=?action=edit&item=<%=item%>">Edit</button>
Both those options do exactly the same thing, but of you multiply x 30, you can see the bandwidth savings.
And please note: The example I gave above is an extremely over-simplified statement of what I'm actually doing only to demonstrate the simplified code. I realize that just performing the task presented could be done even more effeciently using one form for the entire page.
<!ELEMENT INPUT - O EMPTY -- form control -->
P.S. The example above using <button> requires JavaScript to be enabled. There are more JavaScript disabled users than NN4 users - so this would be less likely to work. The example using <form> should work on all browsers. I think the extra bandwidth would be worth the end result.
17.2.1 Control types
[...]
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces.
In the above example, I mentioned that it was for in interface for my own use. Users never see it. But the broader point is any time you use control elements to perform actions, javascript will need to be enabled. I think we need to assume the author has already taken this into account or we would be discussing this thread in the first place.
