What's the best way to create an input field with custom type?


For a couple of plugins I’m working on, I want to add an <input> field in the configuration page with “color” as a type.

At the moment, to create a text <input> field one can use the helper FormText.php, but that comes with a fixed “text” type.

What’s the best solution to create a color (or any other type) field, then?
Easiest way could be to make the FormText.php open (via parameter) to different types, but that would mean changing the core (I’ve just submitted a pull request for it); so, in the meantime, what’s the best course of action?

Thanks in advance.

I responded on your pull request, but there’s an element and helper Omeka provides named FormInput that just takes the type as an attribute.

As for the color input, a little warning: it, like many of the “newer” (I guess they’re not so new by now) HTML5 inputs, is very inconsistent from browser to browser and OS to OS. It’s still not supported at all by classic Internet Explorer, if that’s a concern at all for you. We also provide a “HexColor” form validator for use with the standard “text” input that allows users to input #ffffff-style hexadecimal colors; this is used in configuration for some themes.

Thanks, John. I think FormInput will do the job.
Thanks also for the warning: I know all those types are not 100% consistent, so will try to combine it with the validator.
I was also considering the chance, for colors, to add a simple color picker, like http://bgrins.github.io/spectrum/ for instance, but if I was more experienced maybe a plugin that adds it automatically to every “color” input field would be nice…

Well, tried FormInput and it works absolutely fine, only problem is that (at least in Opera and Chrome) the browser turns the input field into a color picker button, that is not what I wanted (I’d rather have an input field, and the color picker button on the side).

So, I’ll stick to normal FormText for the moment.

Could you kindly point me to some example about the validation you were mentioning? I’ve found the HexColor one, but so far I found it mentioned only in file .ini for Omeka themes.


Are you using a form class or just the form helpers directly?

The validators are intended for use with a form class, but can be used independently… all it does is check, on the server-side, that the input looks like “#xxx” or “#xxxxxx”. This is a Zend Framework component, so you can see some documentation on its usage at their manual. The “HexColor” validator is an Omeka-specific class but otherwise the usage is the same.

For client-side validation you could just use the HTML5 “pattern” attribute.

Thanks, John.

I’ve opted for a client-side validation, in the end. For anybody interested, here’s the code:
$view->formText('simple_vocab_plus_fields_highlight', $simple_vocab_plus_fields_highlight, array('title'=>__('pound sign (#) followed by six hex values'),'pattern'=>'^#[0-9a-f]{6}$'))

Note: I deliberately ignored the 3 hex values option, although perfectly valid in HTML.

This topic was automatically closed 250 days after the last reply. New replies are no longer allowed.