More usable form elements

cwgordon7@drupal.org's picture
public
group: SoC 2008
cwgordon7@drupal.org - Mon, 2008-03-24 01:27

Moved to ideas list

Drupal's forms API is completely extendable through the use of hook_elements(). Drupal is also (as is any project) trying to become much more usable. One way to do this is provide new, easy-to-use, user-friendly form elements. If they're easy to use, chances are module developers will use them. They would ideally use jQuery, jQuery UI, etc, for increased ease of use.

See also:
http://drupal.org/project/elements — this is the module that will be extended to do this
http://drupal.org/project/ui — this is the module that integrates jQuery UI with Drupal.

Suggested elements:

  • Altering the 'date' element to use jQuery UI date selectors: http://docs.jquery.com/UI/Datepicker
  • Adding a 'number' element which can specify a minimum, a maximum, and only allows numbers to be entered. (e.g. you can't type "a" in it)
  • Adding a 'decimal' element which can specify a minimum, a maximum, and a precision, and only allows decimal values to be entered.
  • Adding a 'slider' element which uses http://docs.jquery.com/UI/Slider . Possibly integrate this with the 'number' element.
  • Add a 'color' element. This should produce the exact same effect as the color module's colorpicker, but should be easily extendable.
  • A 'tabs' element. This should work similarly to the 'fieldset' element in that it contains elements, but should use http://docs.jquery.com/UI/Tabs instead.
  • Same thing for the accordian: http://docs.jquery.com/UI/Accordion.
  • Similarly, something for http://docs.jquery.com/UI/Dialog dialog boxes. This is slightly different in that there is only one place for content.
  • An element for side-by-side multiselect lists: http://drupal.org/project/multiselect implements this as a cck field, but it should be turned into a general element for reuse
  • An element that allows you to cycle through a series of options easily. This should be similar to the select element, but would cycle through the options on click/keystrokes.

Feedback and/or other element ideas appreciated!


Form Logic

denverdataman - Mon, 2008-03-24 05:01

Adding form logic would also be of value to many users. An API that could do log proccessing of forms would be a big step for Drupal. For example here is a forum post from today about the need http://drupal.org/node/233978

I would be glad to write up more detailed specs if there is an interest.

Very Interesting.

sykora's picture
sykora - Mon, 2008-03-24 13:33

I'm stepping up to say that as a student I'm definitely interested in working on both these ideas. I'm especially wondering why I didn't think of form logic myself :| .

I suppose the main focus would be on :
-- Making new form elements as easy to use as normal form elements.
-- Making sure all jQuery elements gracefully degrade to something meaningful in the absence of js.


Please note

cwgordon7@drupal.org's picture
cwgordon7@drupal.org - Tue, 2008-03-25 02:57

Please note that the form logic idea was completely irrelevant to this project. They are definitely not related. Also, um, form logic already exists. It's called FAPI. It includes support for variable multistep forms.

That said, yes! Degradability and ease of use is quite important! Glad to see you're interested! :D


Are you sure FAPI is that usable?

giorgio79@drupal.org - Thu, 2008-07-17 10:30

I believe the previous mention does stand that Drupal could be much more usable (as the original post title mentions) with regards to Form Logic. Not sure FAPI is the right answer, as the average Drupal user does not even know php I guess.

Many people have expressed their views on this, the most extensive is probably here:

http://ocdevel.com/blog/web-form-logic-drupal

I tried to do an if checkbox selected show these fields else show those others and it was such a pain, even though I finally did find

http://drupal.org/project/conditional_fields
http://drupal.org/project/dependent

Even though they are not 100%.

Also I find all the core modules, and CCK modules make a mess of form field management, as some fields appear under the Edit tab in Content type editing, while others under the Manage Fields...Quite unintuitive.

Cheers,
G

Also note that there is a

KarenS@drupal.org - Wed, 2008-03-26 12:07

Also note that there is a module that implements the date picker -- date_popup, which is a part of the Date API. There are extra challenges in that one -- you have to split a date out into separate date and time elements because the datepicker doesn't handle time, and then combine it back into a single date during validation, which involves some serious FAPI mojo. You also need to incorporate Drupal's translation for the month and day names, and there are lots of other challenges that are unique to using dates. All that is now addressed in Date Popup. It's in the Date API instead of the jquery UI package because you also need to do date manipulation and the API helps with that.

I'm not saying it shouldn't be in project/ui, but lots of the work has already been done, and I'd like to be involved if it is moved to make sure we don't lose anything in the transition.

Interested as a student

abhaga - Sat, 2008-03-29 19:47

Hi,

I see that somebody is already interested in doing this but this is definitely something that I have become interested in while trying to build good looking and usable forms for my website.

If mentors think that there might be enough meat for more than one person here, I would like to work on this too. I will post here a more concrete proposal of what I would be interested in working on.

Abhaya Agarwal
www.pothi.com

First cut at a proposal

abhaga - Sun, 2008-03-30 22:01

Hi,

I know it is very late but I have started cutting out a proposal for this task. It is still very sketchy but in the spirit of Release early, release often, I am putting it up here and would love to have comments and feedback while I work on this.

One place where I can use some help is, what new elements do people think would be most useful for adding to the current set of form elements available through FAPI.


Problem:

Using drupal means using a lot of forms, both in the admin area and in the user facing areas. These forms essentially come in 2 flavors:

  1. Custom forms built by modules using FAPI. These include settings forms, block forms or extended node forms.

  2. Extended node forms using CCK fields. There are many CCK fields available that support richer functionality than simple form elements (like having a minimum and maximum value for a integer field) but they are not reusable beyond node forms.

In general, FAPI provides a structured and consistent way of form handling in Drupal but it is limited to basic form elements. A lot of functionality that is expected to be present in any well designed form now a days (immediated validation and feed back, dynamic fields, inline help) is not supported and needs to be built by the FAPI user for himself/herself. Same is true for fields like color picker, date picker that are not basic form elements but are needed in a lot of places. There are contrib modules available that provide some of this functioanlity.

Solution Proposed:

I propose to build a module that adds some of the things described above to the FAPI. The aim would be to make available CCK widget like functionality but in a form usable with FAPI. There are 3 main areas of contribution:

  1. Add more functioanlity like various styles of displaying help (inline help that is only shown when user requests for it), adding client side validation, inplace validation through AHAH functionality etc to already available form elements. Now with the introduction of AHAH capabilities in FAPI in Drupal 6, a lot of this things can be supported out of the box.

  2. Adding new elements like slider, modal dialogue boxs (thick box like functionality), color picker etc. This would primarily involve integrating the already available jQuery plugins that provide them into Drupal.

  3. Provide easy to use interface to non-developers to use these additional capabilities. For example, people should be able to add simple validations to their forms easily through an admin page. There are some modules available that let users create a form through a GUI. Those can be used as a starting point and enhanced to use these additional capabilities.

Timeline:

I would go after these task in the order described above. First aim would be to add more functioanlity to already available form elements and see what can be achieved through the use of AHAH capabilities. Then I will work on integrating a pre decided set of elements for which JQuery implementations are available and actively maintained. Final part would be to expose these capabilities to a non-developer through a point and click interface.

Bio:

I am a 2nd year PhD candidate in computational linguistics. I am a new entrent to Drupal world. I came across Drupal while looking for a suitable cms for developing a Lulu style website. In an effort to develop that kind of capability without writing all of it from the scratch, I have spent considerable time going thorugh the internals of many contrib modules like CCK Taxonomy, Workflow, Workflow-NG and writing pieces of missing functionality thorugh my own custom module. In doing all this, I have come to realize that forms hold a very central place in the Druapl structure and that, we are a little lacking when it comes to building modern day web 2.0 style websites. I think with AHAH enabled FAPI in Drupal 6, we can now push ahead and fill that gap. Working through SoC and getting feedback from community will allow me to work towards that in a more generic manner so that it will benefit the whole community rather than ending up in yet another contrib module that nobody would use again.

regards,
Abhaya Agarwal
www.pothi.com