« Spice up registration page?
Using HTML5 form inputs
Notify Admin when a new member joins »

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Using HTML5 form inputs
« on February 27th, 2012, 04:06 PM »
This was something Nao mentioned to me based on my contact form plugin, so I thought I'd run with it a bit more.

There are quite a few places where numbers are required in the admin panel, and right now there's validation done behind the scenes on it, but it occurred to me that using HTML5, we could handle validating those things better in supported browsers, and unsupported browsers can cleanly fall back to what was there before.

I give you <input type="number">.

(This is from Chrome. There is zero JavaScript involved in making this bit work, the browser just does it when trying to save the page.)

I'm gushing a little, because I never really looked at this before but I'm loving what you can do with it, very easily and effectively for newer browsers. I also think it makes the interface more meaningful (because it's clear that you're working with numbers rather than just bare textboxes)

📎 using-html5.png - 17.07 kB, 640x236, viewed 192 times.

When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Using HTML5 form inputs
« Reply #1, on February 27th, 2012, 04:10 PM »
Yup, it's good :)
Opera was the first browser to implement all of these... One of the few areas where Chrome has been playing catchup, and isn't even up to par yet :P

I believe I added 'email' and 'url' input types wherever I could back when I converted the templates to HTML5, but I have to admit I never bothered to deal with number types, because they usually require some attention (boundaries, steps, etc), and are best implemented while writing a feature, not as an after-thought. But it's no reason not to do it, indeed :)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Using HTML5 form inputs
« Reply #2, on February 27th, 2012, 04:14 PM »
Well, this stuff was primarily about putting it into the admin panel core templates, so it's available everywhere in the admin panel. That is, assuming we don't have stupid stuff where you have multiple numeric fields combined together to make a composite text field, grrr.

But all 'int' fields in the admin templates now use type="number" and I've added a few more min/max places locally and I'll commit them shortly.

Interesting thing to note, at least in Chrome, that the size attribute is no longer respected (though I've left it in for browsers who will fall back to text boxes as standard), and that the presence of min/max (or, just max, not sure) is required to actually set the size of the textbox.

(This, of course, is no way a prelude to functionality for the settings-page support in plugins, of course :whistle:)

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Using HTML5 form inputs
« Reply #3, on February 27th, 2012, 11:31 PM »
Quote from Arantor on February 27th, 2012, 04:14 PM
But all 'int' fields in the admin templates now use type="number" and I've added a few more min/max places locally and I'll commit them shortly.
Smart, didn't even notice there was an int type ;)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Using HTML5 form inputs
« Reply #4, on February 27th, 2012, 11:41 PM »
Quote
Smart, didn't even notice there was an int type
Well, that's SMF/Wedge's type (there's a whole bunch of them) but I didn't know until I went looking that there was a type="number" in HTML5 that's modestly well supported.

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
Re: Using HTML5 form inputs
« Reply #5, on February 27th, 2012, 11:51 PM »
I think it introduced about 12 new types. Email, number, slider, the others escape me atm. Also, autofocus, and placeholder text.. I've read some tips from a website my brother recommended to me. I'll  dig it up.
Posted: February 27th, 2012, 11:47 PM

http://diveintohtml5.info/index.html
A confident man keeps quiet.whereas a frightened man keeps talking, hiding his fear.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Using HTML5 form inputs
« Reply #7, on February 28th, 2012, 12:04 AM »
Quote from live627 on February 27th, 2012, 11:51 PM
I think it introduced about 12 new types. Email, number, slider, the others escape me atm. Also, autofocus, and placeholder text.. I've read some tips from a website my brother recommended to me. I'll  dig it up.
I always loved placeholder, never used it enough though. I think I added it to the admin homepage... That must be all.

(Pete, I see you're in full "I'm going to overcome Nao's postcount" mode again :P :lol:)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Using HTML5 form inputs
« Reply #8, on February 28th, 2012, 12:07 AM »
Quote
I always loved placeholder, never used it enough though. I think I added it to the admin homepage... That must be all.
And I never even noticed?
Quote
(Pete, I see you're in full "I'm going to overcome Nao's postcount" mode again  )
What can I say? Three months of not doing a lot and now it's time to set that little record straight, so to speak :)

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Using HTML5 form inputs
« Reply #9, on February 28th, 2012, 12:14 AM »
Quote from Arantor on February 28th, 2012, 12:07 AM
Quote
I always loved placeholder, never used it enough though. I think I added it to the admin homepage... That must be all.
And I never even noticed?
"Quick search" ;)

BTW, I tested the PM settings page -- shouldn't there be a "min" setting of 0 for minimum number of PMs etc...? I can go under 0 by clicking the buttons, it's funny ;)
Quote
What can I say? Three months of not doing a lot and now it's time to set that little record straight, so to speak :)
Well, it's going to be... interesting, seeing whether I manage to put Wedge online here on March 1st as promised, or if I'll have to postpone it again because we're in the middle of some complex changes... :P

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Using HTML5 form inputs
« Reply #10, on February 28th, 2012, 12:17 AM »
Quote
"Quick search"
And here was me thinking you did that in JS.
Quote
BTW, I tested the PM settings page -- shouldn't there be a "min" setting of 0 for minimum number of PMs etc...? I can go under 0 by clicking the buttons, it's funny
Well, everywhere that uses an int type field gets automatically pushed to <input type="number">, I just didn't set minimums on everything, but it's certainly something that should be done.
Quote
Well, it's going to be... interesting, seeing whether I manage to put Wedge online here on March 1st as promised, or if I'll have to postpone it again because we're in the middle of some complex changes...
I have nothing up my sleeve that requires big DB changes. Though I'd encourage you to take a look at the stuff in loadBoard where 'privacy' is set based on the old membergroups - whether that's needed or not (since I don't remember what else that does)
« Spice up registration page?
Notify Admin when a new member joins »