5 suggestions for forms in HTML 5

[JoonasLinde]

There are some things (esp. with Webforms) that are often used in today's web and done with Scripting. It would be better, if these things would be possible without Scripting, only declarative with HTML / CSS:

1. In search-boxes Javascript often is used for send every typed character to the server and the server returns search-suggestions "as-you-type". If this would be possible without Scripting only with HTML/CSS (maybe a special text-field or an option for all text-fields) this would be very cool.

2. I've seen this at the online-dictionary dict.leo.org: they made a JavaScript-function, that you can type the word to translate without the text-box marked and the characters get in there. So, you don't have to mark the right textbox before you type, but you can type, no matter to look, if the box is marked. I know of the autofocus-tag in HTML5, but this only sets the focus on start, but not even when you clicked elsewhere on the page, like dict.leo.org does and what is very cool.

3. The german library-catalog "KVK" (http://www.ubka.uni-karlsruhe.de/kvk.html) uses JavaScript in Forms, to toggle multiple check-boxes on/off by clicking only one check-box.
In detail: there are inferior check boxes you can toggle on/off separate. And superior check-boxes, that toggle on/off groups of those inferior check-boxes, with just one activation/deactivation of this superior check-box.

4. Often JavaScript is used to expand/collapse parts of a form (e.g. in Mail-Forms to expand/collaps the CC- and BCC-field).

5. And JavaScript is often used to mark the active text-box (from many text-boxes) with a colored line around it or something like that (e.g. in GoogleMail).

It would be fantastic, if future versions of HTML (maybe HTML5) would allow these things without Scripting, just declarative with HTML / CSS.

Greetings,
Joonas Linde

[JoonasLinde]

And additional to those Forms-related stuff, it would be nice if (not only in forms) parts of the page could be expanded/collapsed without Scripting, only with HTML / CSS.

(E.g. you have only headlines and then click on those headlines, you want to display the whole article. The user can choose how many and which of those additional contens he want to display and make "his own" page. But of course there are many more examples, where you could use it.)

Of course, if you don't want Ajax, but only declarative even the parts, that are not visible from beginning, must be loaded from the beginning. So, you have the whole page loaded, but expand/collapse what you want to see.

[lyosha]

For expanding and collapsing parts of the page, see the <details> element.

[JoonasLinde]

There is one more thing, that is very annoying on webforms:
At checkboxes/radiobuttons you have to click the widget exactly. It would be much more comfortable, if you could click the text-label of the checkbox / radio button. (Just like in normal applications.)

And I think, there is no new HTML necessary for this. Browsers could implement it, that you can click the widget itself or the text-label of the widget for activation / deactivation of the checkbox / radio button.

[mskinner]

In HTML4/XHTML1 you can already do this:

Code: Select all

<input type="checkbox" id="tickme" name="tickme" value="true" /><label for="tickme">Free beer?</label>


The "for" attribute on the label is the thing to note. When a user clicks on the label, the checkbox state (checked / not checked) will switch.

[JoonasLinde]

In HTML4/XHTML1 you can already do this:

Code: Select all

<input type="checkbox" id="tickme" name="tickme" value="true" /><label for="tickme">Free beer?</label>


The "for" attribute on the label is the thing to note. When a user clicks on the label, the checkbox state (checked / not checked) will switch.

But I think most sites don't use it (because most people don't know this). Why not make this the default? I see no disadvantage if users could also click the text-label of checkboxes and radiobuttons. It's the same, like they know it from local programs and it would increase the usability.

And if really someone wants the user to click the widget exactly, there could (and should) be an option for this, but the default should be that you can click both, the widget or the widget's text-label, for checking / unchecking the checkbox / radiobutton... (thus just reversed than it is today)

[lyosha]

What do you mean by default? This is standard functionality that has existed for years, but you can't force web developers to use it.

[Marius]

It would be fantastic, if future versions of HTML (maybe HTML5) would allow these things without Scripting, just declarative with HTML / CSS.

I totally agree with that:
as much as possible should be possible without scripting, only declarative with HTML and CSS.

There are many reasons for that:

1. Many people have Scripting deactivated (for security- or other reasons).

E.g. I only have activited JavaScript on a very small number of trusted sites (my online-banking, my email,...). But I don't want to activate it on all sites I surf on. Even unknows sites, etc. If other sites than those few don't work without Scripting, I leave them. (because for only seeing an information Scripting isn't needed)

2. On many computers (at school, university, work, internet-cafe, public terminals, friends' computers, and so on) you are often not able and/or not allowed to change settings.

3. The accessibility for handicaped people is often much better with pure HTML/CSS-pages than with scripting/programming.

4. One of the basic ideas of the WWW was that everyone could publish information very easily, without learning programming-/scripting-languages and without buying expensive software.

Today's HTML/CSS already is very complex. But programming-/scripting-languages are even more complex and difficulter to learn and to use.

5. Pure HTML/CSS is faster and with less errors in development than scripting/programming.

6. And for users HTML/CSS-sites are often faster (and with less errors) that scripting too.

...

Therefore (and some other reasons too) I totally agree that as much as possible should be able to do only declarative in HTML/CSS and without scripting / programming!!

Joonas has mentioned some examples, but there are much more things (not only Webforms, but also other things), that are made with scripting today, but could (and should) be possible pure declarative. Scripting should only be used for real online-applications (like online-games...), where pure declarative isn't possible. But as much as possible should be able to do only declarative with HTML/CSS.

I am convinced, that would be a great advancement for the Web and its users.

[lyosha]

Today's HTML/CSS already is very complex. But programming-/scripting-languages are even more complex and difficulter to learn and to use.

Well, if you move too much outside of scripting and make it all declarative HTML/CSS that does stuff, do you have any idea how complicated you will make HTML? It will be more complicated than scripting because it will basically do scripting in a language designed for markup.

We have to be very selective about what HTML and CSS we will allow to do things; IMHO that would only be simple widgets which are expected to be interactive. HTML and CSS should never get to the point where they start doing things to replace general scripting.

[Marius]

I was a little bit too ambiguous in what I wrote:

Of course I agree, that many things should be done with scripting and not everything is possible only declarative. E.G. online-games, etc. have to be done with scripting. But the beginner and those who only want to bring some infos online, don't make online-games or sophisticated things like that.

But there are some things, that are done with scripting today, but could be possible with declarative HTML/CSS without making it too complex. And these things (and only these things) should be possible only declarative as much as possible. (And of course, more sophisticated things have to be done with scripting.)


------------------------------------------------
Joonas has mentioned some examples:
#1: I've heard, that there was work für #1 (incremental search boxes without Scripting) what would be very nice, but it has be stopped. If this is true, it would be nice, if this thoughts could be started again.

#2 is something like the new target function, but I think Joonas means something else. The site dict.leo.org does something with scripting, that isn't possible with the new target-tag, because target only sets the target at the site, when you load it. Later, when you clicked anywhere else on the page, the target is gone. And dict.leo.org only has one text-box and therefore anything you type is into that box, even if you have clicked anywhere else on the page.

#3: As far as I know this is already planned for HTML 5 or for the next version after HTML 5. Somewhere I have read about this to come in the future of HTML.

#4: Is the details-tag suitable for this? I'm not the HTML5-expert yet, but I thought, that it is for additional info and the browser selects to display it as pop-up, footnote, or something like this. But Joonas means something else: e.g. cc and bcc in e-mail-frontends or other examples. And these things couldn't be done with pop-ups, and so on. But maybe this is possible with details too?

#5: Isn't that already possible with CSS?
------------------------------------------------------

As I mentioned before: I agree with you (lyosha), that HTML/CSS should be very basic and not allow everything that can be done with scripting. There will always be things, that have to be done with scriping. But there are also some things, that should be able without scripting what they are not yet today.

For the reasons I mentioned, of these things (and only these, where it makes sense) an much as possible should be done declarative with HTML/CSS. And I think Joonas' examples are very good, especially the first one (incremental search boxes without scripting) is one of my biggest wishes too. (#2 is not so important for me, #3 is already planned as far as I know and #5 already is possible today)

I hope, I have explained clearer now, what I mean, because I agree with you lyosha, but there are some things, where I agree with Joonas and wish that they could be done without scripting (for the reasons I mentioned in my comment before).

[zneak]

5. And JavaScript is often used to mark the active text-box (from many text-boxes) with a colored line around it or something like that (e.g. in GoogleMail).

What about:

Code: Select all

input[type="text]:focus {
    /* do whatever you want */
}

[Gabor]

There are some things (esp. with Webforms) that are often used in today's web and done with Scripting. It would be better, if these things would be possible without Scripting, only declarative with HTML / CSS:

1. In search-boxes Javascript often is used for send every typed character to the server and the server returns search-suggestions "as-you-type". If this would be possible without Scripting only with HTML/CSS (maybe a special text-field or an option for all text-fields) this would be very cool.

2. I've seen this at the online-dictionary dict.leo.org: they made a JavaScript-function, that you can type the word to translate without the text-box marked and the characters get in there. So, you don't have to mark the right textbox before you type, but you can type, no matter to look, if the box is marked. I know of the autofocus-tag in HTML5, but this only sets the focus on start, but not even when you clicked elsewhere on the page, like dict.leo.org does and what is very cool.

3. The german library-catalog "KVK" (http://www.ubka.uni-karlsruhe.de/kvk.html) uses JavaScript in Forms, to toggle multiple check-boxes on/off by clicking only one check-box.
In detail: there are inferior check boxes you can toggle on/off separate. And superior check-boxes, that toggle on/off groups of those inferior check-boxes, with just one activation/deactivation of this superior check-box.

4. Often JavaScript is used to expand/collapse parts of a form (e.g. in Mail-Forms to expand/collaps the CC- and BCC-field).

5. And JavaScript is often used to mark the active text-box (from many text-boxes) with a colored line around it or something like that (e.g. in GoogleMail).

It would be fantastic, if future versions of HTML (maybe HTML5) would allow these things without Scripting, just declarative with HTML / CSS.

Greetings,
Joonas Linde

I like all those ideas and support them very much!!

[loganeco]

just a little comfused.

[Niklas81]

Some of these ideas have their own threads already, but some of them don't have another thread. This thread here gives a nice overview of many very good ideas. I hope many of them will come true in the near future!

[Tobias Hanser]

I use the add-in NoScript and only allow scripting on very few trusted sites that need it (e.g. online-banking). Therefore I support this and highly hope for these features that they are not only be possible with scripting, but also only with HTML & CSS.