8

Among the relatively new HTML form controls are the 'type=range' and 'type=color' controls. The spec states that when a form containing such controls is submitted, there will always be a value submitted for those controls. They can never be empty.

This differs from the type=text control, and other similar controls, whose value can indeed be the empty string.

It seems to be impossible for range and color controls to be used to reflect the state of nullable columns in a database.

Is there any workaround for this?

Edit: The behavior is specified by this link here: HTML5 Specification

4
  • where you read that there will always be a value submitted for those controls?
    – Talha
    Commented May 18, 2012 at 5:30
  • Did you ever try ? What's the behavior then ? Commented May 18, 2012 at 7:48
  • Opera 11.61 shows the behavior described in the Spec. For example, type='range' control will always submit a non-empty value.
    – John
    Commented May 18, 2012 at 19:44
  • Looks like in Chrome, you can specify value="#" and it will return that (#) on submitting the form. Commented Jan 22, 2015 at 10:05

2 Answers 2

0

For ranges, you could set the value of the range to a number that is out of bounds (of course, if you wanted the user to not mess with it):

var range = document.getElementById('rangeInput');
 //let's say your range is 0-10

 rangeInput.style.display = 'none';

 range.min = -1;

 range.value = -1;
 //-1 would be your "null" value

 //now, if you wanted the user to be able to edit the null range...

 range.style.display = '';

 range.addEventListener('change',function(){
     if(this.value < 0) this.value = 0;
     //this should keep people from setting it to "null"
 });

I'm still unsure as to how you would do this for color inputs, because there is no "out of bounds" for it.

0

Practically and semantically speaking, NULL often means “No value has been set, so use the default value”. Since a value exists (even if not on the record in question), this value could be given to the inputs’ initial state.

An unchanged range or color input could use custom styling to reflect its unset state (lowered opacity, for instance). To reset a range, a default range position of 0%, 100%, or 50% would probably solve most scenarios intuitively (short of adding a reset button). For a color input, any color with 0% alpha (e.g, transparent or #00000000 or hsla(20,50%,80%,0%)) could be the reset (short of adding a reset button).

Like with a checkbox used to toggle something “off”, backend validation performs the final step, transforming default values into SET input_field=NULL.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.