Consider the code below that I copied from the MDN web docs:
<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="tickmarks" />
<datalist id="tickmarks">
<option value="0"></option>
<option value="25"></option>
<option value="50"></option>
<option value="75"></option>
<option value="100"></option>
</datalist>
As you can see the result is a nice looking range with tickmarks. However, when you try to select the value that is very close to the tickmark value, the range input will snap to that value when using a mouse-drag as input. One can use a workaround to use the keyboard to get those values, but this is not an intuitive or accessible one. This makes it in some cases impossible to select those values and is therefore not what I need since those values are valid options too.
Reading the documentation on those MDN web docs:
The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
Clearly I am experiencing something different here, at least for mouse-drag input that is. I have tried this code snippet on both Chrome and Firefox to rule out any browser implementation inconsistencies.
How can I add an input range with tickmarks while not including the snapping?
Related
Is it possible for <select>-lists to reference the same list of options, similar to <input> with <datalist>?
I generate a list of several entries, where (among other things) the user selects a value of a dropdownlist. The options in this list are the same for each entry, so I would prefer it, if the list of options doesn't need to be re-added for each dropdownlist.
I can't use <input> with <datalist>, since the user may only choose from available entries.
you could do this using jquery easily,
<datalist id="mylist">
<option value="a">
<option value="b">
<option value="b">
</datalist>
<select class="someSelect">
<select class="someSelect">
$(".someSelect").html( $("#mylist").html() );
this would replace all your select list from the datalist
This is not realy the good answer. There is a big difference between 'datalist' and 'select' which for as far as I read till yet stays unspoken : in a select the 'value' can be different from the visualized 'innerHTML', which is not the case in a datalist. So what we need is a kind of 'select' with an attribute like 'selectlist="countries' the selectlist then would look like this :
<selectlist>
<option value='1'>Belgium</option>
<option value='2'>France</option>
</selectlist>
and can be reused in more then one 'select' and send the value back to the server instead of the innerHTML.
I made an form in HTML and the autofill feature on Chrome successfully fills in the street address, city, and zip. If I leave the "state" input with type="text", then it gets autofilled successfully as well. However, if I use a select/option dropdown list, then it does not get autofilled.
For the options, I tried using state abbreviations for the value like:
<label>
<select>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<select>
State
</label>
and I tried using the state name for the value:
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
And neither one works.
Is there a way to get Google Chrome's autofill to automatically select a state from a dropdown list when it is auto-filling the address?
Notes:
I'm interested in getting it to work for any other
browsers/extensions that auto fill addresses for users, but I've only
tested in Chrome.
a javascript solution would be acceptable, but it's not what I'm wanting. But, no jquery.
<select autocomplete="state">
will work too
Embarassingly enough, 10 seconds after I posted this question, I realized that I didn't set the name on the select.
So, I changed it to:
<select name="state">
<option ...>
<select>
and it works now, whether using the abbreviations or the full state name
I have a basic form like so:
<form id="test-form">
<select id="multi" name="mymulti" multiple required>
<option value="">Choose a different Option</option>
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select><br>
<select id="single" name="myselect" required>
<option value="">Choose a different Option</option>
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select> <br>
<input type="submit">
</form>
The key point here is two selects, both required, but one is multiple and the other is not.
If you choose the default options (note you actually have to click on them), and then submit the form, it will tell you that the single select is required, but not the multiple select.
I looked at the relevant portion of the html5 spec, and although there is some talk about how the required select interacts with placeholder elements, I don't see anything about how multiple+required behaves.
The above behaviour is only in Chrome, other browsers seem to behave the same for both types. My question is, why? It seems... inconsistent. I understand how to work around it with some javascript, just not why I would have to? Can anyone explain the rationale behind this?
Demo (remember to actually choose the placeholder options).
Chrome is acting right here. While implementation in FF is simply simpel. But chrome's implementation does not only follow the spec, it is also simply logic. If a mutliple or size > 1 select is used, there is no placeholder by definition. And without a selected attribute there is indeed nothing :checked (i.e.: selected) initially.
In case of a single select with size=1. The select > option:first-child with an empty value is the placeholder option. And a single select has always one option :checked/selected.
Here is a definition of placeholder option in JS: https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L88-94 and here a definition of valueMissing for select: https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L128-130
I'm rendering a drop down box that contains a currently selected value using selected="true".
<select id="dropDown">
<option selected="true" value="1">value2</option>
<option value="2">value3</option>
<option value="3">value4</option>
</select>
Initially the selected value corresponds to the selected="true", but if I play around with the drop down box and then refresh the page the selected="true" is ignored and the displayed value is the last one I chose. I tried using selected="selected" with the same results.
Thanks for your help.
Change your select field to <select id="dropDown" autocomplete="off">
For best browser support it's actually (although it seems so dumb) better to use
autocomplete="nope"
To quote MDN:
In some cases, the browser will keep suggesting autocompletion values
even if the autocomplete attribute is set to off. This unexpected
behavior can be quite puzzling for developers. The trick to really
forcing the no-autocompletion is to assign a random string to the
attribute [...] Since this random value is not a valid one, the browser will give
up.
It's a binary value, not an attribute (for some reason). Use:
<option selected="selected" value="1">value2</option>
or:
<option selected value="1">value2</option>
I have a list of different items within a select multiple list and I want to auto-append to a form that a user submits.
HTML of category multiple select list:
<select name="category[]" size="4" multiple="multiple" id="group">
<option value='7'>Faculty</option>
<option value='8'>Staff</option>
<option value='6'>Students</option>
</select>
I want to do something like:
<input type="hidden" name="category[7,8]" />
This will automatically assign the submission to the appropriate selected list items from within category[], without them ever seeing it.
This is stored within a database, so I need to accomplish it this way.
I know this does not work, but this should give you an idea of what I am trying to do.
A successful multiple-select control just gets submitted as having multiple values. E.g., if you selected "Faculty" and "Staff" in your list, what gets submitted is something like:
category[]=7&category[]=8
You can replicate this (at least in Firefox, haven't tested elsewhere) with two hidden inputs:
<input name="category[]" value="7" type="hidden"/>
<input name="category[]" value="8" type="hidden"/>
I believe this could be accomplished using a Javascript library (such as jQuery) to handle the change on the Selections and append/update the items in your hidden field. You could then also use Ajax to update your database with the selection when necessary.
Your specific requirements might not allow for the above though. Some additional information would be helpful for those viewing such as what backend you're using (php, asp.net, or if it is just static html) and if you are currently using javascript (or a library) to assist you in any other tasks.
I'll try to check back on updates to see if I can be of more specific help. (Note: I think I'm too low of reputation to be able to post this as a comment at the moment so had to do an answer instead.)