Re: [suggestion] Another field type for HTML form inputs

hi.

well, about that paragraph related to number formats that are already
supported by type "number"...
let's talk about what I faced here in Brazil(many other countries will have
the same situation):
- float number's format: 1234.56
- currency format: R$ 1.234,56

If I type "1.234,56" in a numeric input, it is not valid(triggers :invalid
styles in css and does not validate with the HTML form validate methods).

That's why inputs of type number, using float formats wouldn't be the best
solution.
Besides that, if I define the step attribute to "0.01", after typing that
value(the invalid one), if I click in any of the up or down arrows some
browsers render for the user to go step by step, it jumps to "0.01", once
the previous value was invalid...please, notice that js libraries apply
THAT mask into the input value, so, when the js lib tries to mask the value
as the user types, it gets invalid(or, in some browsers, is reset to
""...an empty value!). To use the js mask libs, we must use inputs of type
text! What is even worst!

Agreed! Currency symbols would represent a problem when persisting date
into a database, once it's impossible to "translate" an amount from one
currency to another...we might just ignore the symbols by now! :p

About css+html, I see this as thousand-separator existing for
input[type=currency] as list-style exists for lists, and :invalid for
invalid inputs in forms...but I may be seing it in a different way than W3C
intends to make HTML interact with CSS...

This way, programmers would also be able to ask the user what is the mask
the user wants to use, instead of just base the formats on what the OS
says...

I think it would be useful for me and, in a talk I gave around here, or
talking to other developers, I noticed that this is something most of
front-end programmers have faced!

I know programmers can use areas-x and role, microdata or RDF to "fix" it
to stay semantic, but wouldn't it be easier this way?

Regards.



On Wed, May 15, 2013 at 7:51 PM, Silvia Pfeiffer
<silviapfeiffer1@gmail.com>wrote:

> Hi Felipe,
>
> Other than the currency sign, input type=number allows for most of the
> requirements that you're stating.
>
> As for the currency symbol: You wouldn't want to change it based on
> locale, because a currency has a specific value, which is different
> when using a different currency. It's impossible to include currency
> conversion algorithms into the browser - they would need updating too
> often.
>
> As for the styling issues of numbers - that's a CSS issue. Things like:
>     thousand-separator: coma;
>     decimal-separator: point;
>     negative: visible; /* allows the negative symbol */
> would be attributes that needed to be added to CSS - we don't add
> attributes for styling into HTML.
>
> These ideas have been kicked around in the CSS WG before, e.g. see
> http://wiki.csswg.org/ideas/content-formatting . I don't know where
> the discussion of this is at right now.
>
>
> On Thu, May 16, 2013 at 12:10 AM, Felipe Nascimento de Moura
> <felipenmoura@gmail.com> wrote:
> > Hi Silvia.
> >
> > Well, currency is not necessarily a float value...in Brazil, currency
> uses
> > "comma" as decimal separator and point as the thousand separator.
> > Our Operational System(therefore, our browsers) know that, but float
> numbers
> > are still the same(point for decimal with no separator for thousand).
> >
> > I think the advantages would be:
> > * we could have the css possibilities, like :negative and :positive
> styles,
> > or offer the option for the browser to show/hide the currency symbol as
> the
> > user focus it or not.
> > * When building a webapp, I had to apply these features via javascript
> > loading extra libraries or building my own!
> > * Number fields do not accept characters like coma, so, to apply a mask
> to
> > it(in brazilian format) I had to use an input of type text :(
>
> That's a browser implementation limitation. The spec already says:
>
> "A user agent might support numeric input in the user's local format,
> converting it to the format required for submission as described
> above. This might include handling grouping separators (as in
> "872,000,000,000") and various decimal separators (such as "3,99" vs
> "3.99") or using local digits (such as those in Arabic, Devanagari,
> Persian, and Thai)."
>
> > * I believe it would be semantically useful and could help increasing
> > usability and customization, besides avoiding some other libraries to be
> > loaded unnecessarily!
>
> Agreed.
>
> > * Screen readers could read such fields differently...let's say, instead
> of
> > reading "two thousand dot eleven" (a float value), it could read "two
> > thousand dollars and eleven cents" or something like this.
>
> Interesting. This is a semantic interpretation of the number. I would
> encourage the use of microdata or RDFa to include the information that
> this is a number of type currency. Accessibility tools could make use
> of such semantic markup.
>
>
> > What do you think? Maybe, just some changes could be added to the number
> > input to fit these features, so there wouldn't be needed another input
> type?
>
> Maybe... what are you thinking of?
>
> Cheers,
> Silvia.
>
>
> >
> > Cheers.
> >
> >
> >
> > On Wed, May 15, 2013 at 6:46 AM, Silvia Pfeiffer <
> silviapfeiffer1@gmail.com>
> > wrote:
> >>
> >> Hi Felipe,
> >>
> >> The example under <input type=number> uses a currency example:
> >>
> >>
> http://www.w3.org/html/wg/drafts/html/master/single-page.html#number-state-(type=number)
> >>
> >> Is that not sufficient?
> >>
> >> Cheers,
> >> Silvia.
> >>
> >> On Wed, May 15, 2013 at 12:56 AM, Felipe Nascimento de Moura
> >> <felipenmoura@gmail.com> wrote:
> >> > Hi.
> >> >
> >> > This is something I see a lot of people doing by themselves across the
> >> > internet, or using libraries to do so. To format currency/money
> inputs.
> >> >
> >> > Therefore, I believe it would be useful if HTML could provide an input
> >> > with
> >> > type currency.
> >> >
> >> > Once the Operational System knows the user's preferences related to
> >> > currency, money symbols and format, the browser should be able to
> render
> >> > it
> >> > with a better solution.
> >> > Mobile devices could change their keyboards to only numbers, comas and
> >> > points..maybe the symbol($) as well.
> >> > These inputs, could have a mask applied, according to the currency
> >> > (let's
> >> > say, in Brazil, the currency format is 1.234,56 while in most
> countries
> >> > it
> >> > is 1,234.56).
> >> >
> >> > CSS could be able to change its "mask" as it changes list-styles, for
> >> > example.
> >> >
> >> > input[type=currency]{
> >> >     thousand-separator: coma;
> >> >     decimal-separator: point;
> >> >     symbol-visibility: focus; /* shows the symbol only when the input
> is
> >> > in
> >> > focus */
> >> >     symbol: none;
> >> >     negative: visible; /* allows the negative symbol */
> >> > }
> >> >
> >> > I wounder symbol might be a keyword like "real", for brazilian
> currency
> >> > (R$), dollar, us-dollar, aus-dollar, euro, etc...or it could be the
> >> > string
> >> > with the symbol, itself!
> >> >
> >> > Plus, there could be a few states for the element, such as:
> >> > input[type=currency]:negative{
> >> >     color: red;
> >> > }
> >> > input[type=currency]:positive{
> >> >     color: green;
> >> > }
> >> >
> >> > Also, those configurations could be defined in the HTML element
> >> > itself...something like:
> >> > <input type="currency" thousand="." decimal="," />
> >> >
> >> > Masks with JavaScript are expensive, there are thousands of them, each
> >> > working in different ways.
> >> > When building web-apps, it would make a lot of difference!
> >> >
> >> > So, I want to hear from you what is your opinion about it.
> >> >
> >> > Thanks for your time.
> >> >
> >> > --
> >> > Felipe N. Moura
> >> > Senior Web Developer
> >> >
> >> > Website:  http://felipenmoura.org
> >> > Twitter:    @felipenmoura
> >> > LinkedIn: http://goo.gl/qGmq
> >> >
> >> > Meet some of my projects:
> >> > BrazilJS Conference  |  BrazilJS Foundation  |  Power Polygon  |
> >> > TheWebMind
> >> > |  PHPDevBar
> >> > ---------------------------------
> >> > LinuxUser #508332
> >> > Changing  the  world  is the least I expect from  myself!
> >
> >
> >
> >
> > --
> > Felipe N. Moura
> > Senior Web Developer
> >
> > Website:  http://felipenmoura.org
> > Twitter:    @felipenmoura
> > LinkedIn: http://goo.gl/qGmq
> >
> > Meet some of my projects:
> > BrazilJS Conference  |  BrazilJS Foundation  |  Power Polygon  |
>  TheWebMind
> > |  PHPDevBar
> > ---------------------------------
> > LinuxUser #508332
> > Changing  the  world  is the least I expect from  myself!
>



-- 
*Felipe N. Moura*
Senior Web Developer

Website:  http://felipenmoura.org
 Twitter:    @felipenmoura <http://twitter.com/felipenmoura>
LinkedIn: http://goo.gl/qGmq

Meet some of my projects:
BrazilJS Conference <http://braziljs.com.br/>  |  BrazilJS
Foundation<http://braziljs.org>
|  Power Polygon <http://github.com/braziljs/power-polygon>  |
TheWebMind<http://thewebmind.org/>  |
PHPDevBar<https://addons.mozilla.org/pt-BR/firefox/addon/php-developer-toolbar/>
---------------------------------
LinuxUser #508332
*Changing  the  world*  is the least I expect from  myself!