I'd like to label the extremes of a range input for ordinal data (0-10) to unambiguate the UI. Mozilla documentation suggests that I should be able to use a datalist within my form like this:
<datalist id="ord">
<option value="0" label="Identical"></option>
<option value="10" label="Very different"></option>
</datalist>
...
<input type="range" list="ord" min="0" max="10" value="5" name="name"/>
The documentation then warns that:
Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the tag has to be styled with CSS as its display property is set to none by default, hiding the labels.
My testing confirms this --- in Chromium (Brave), QtWebEngine (Qutebrowser), and Firefox, either nothing was displayed or tickmarks were displayed without lables. Is there a standard and minimal way to add labels to a range slider?
You can add separate elements, probably <label> elements, on either side of your input, then use CSS to position them appropriately.
As far as tick-marks are concerned, there isn't a standard way to add those. However, with the concept of progressive enhancement in mind, feel free to add the <datalist> without the label attributes (since you'll have those set using the above-referenced elements) so that users who access your site on browsers that do support the tick marks can see them.
Related
I am creating a dropdown with AngularJS.
here is the code..
<div class="col-md-9">
<input type="text" placeholder="Enter Module" list="names"
ng-model="data.Name" />
<select id="names" class="form-control" ng-model="data.Name"
ng-change="SetCategory(data.Name)" name="name">
<option value='' disabled selected>------------- select an option ----------</option>
<option ng-repeat="e in BrData | filter:data.Name "
value="{{e.Name}}">{{e.Price}}</option>
</select>
</div>
NOTE: List is Dynamic and i am using AngularJS to get data.
I need To create a searchbar inside select tag.
But Input tag can't nested in select tag.What should I do?
You can use typeahead from UI Bootstrap: https://angular-ui.github.io/bootstrap/#!#typeahead
Or if you need more advanced features along with search like multi-select, select all, deselect all, disable options, keyboard controls and much more try this: http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main
The way I see it, there are three options here.
Option One - Input outside the dropdown
Get the input outside the dropdown, and filter the values based on that value from the outside. I know that this is not your intended functionality exactly, but it would save you some trouble.
Option Two - Use some kind of third party dropdown library
As Mohd mentioned https://angular-ui.github.io/bootstrap/#!typeahead is a good fit and UI select too
Option three - Create something of your own
It need not even be using <select> tag. This is by far the most difficult, but also the most customizable and suitable for individual needs. The select tag will not be used as it does not support input inside of it, so some high end css will need to be used, as well as some backwards compatibility multiple browser testing that the already made libraries have already done.
Dealing with the <select> nightmare
From the Docs:
<select> Element Technical summary1
Permitted content: Zero or more <option> or <optgroup> elements.
Tag omission: None, both the starting and ending tag are mandatory.
Permitted parents: any element that accepts phrasing content
The short answer is that <input> elements can not be placed inside <select> elements.
<datalist> Element2
The datalist element is intended to provide a better mechanism for this concept.
<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
<option value="A">
<option value="B">
</datalist>
For more information, see
HTML combo box with option to type an entry
MDN Learn HTML Forms - Dealing with the select nightmare
Use select2 as a dynamic option instead of HTML select option:
here is link for select using js:
https://select2.org/tagging
Creating a simple form.
Curious as to why the type='number' has different default size than type='text'?
Form looks like this. I believe with all defaults. Fiddle link below.
<form>
<label for='number' >Age:</label>
<input id='number' type='number' placeholder='Enter your age'>
<label for='name' >Name:</label>
<input id='name' type='text' placeholder='Enter your name'/>
</form>
https://jsfiddle.net/fnbkjcd3/2/
Short answer: that's just the way it is. Different browsers can - and will - implement different <input> types differently - sometimes VERY differently:
Numeric Inputs – A Comparison of Browser Defaults
MDN: input The Input (Form Input) element
MDN: input type="number"
PS:
I looked at your JSFiddle in FF and Chrome and - at least for me - the text input looked identical to the number input. I'm not sure why you're seeing them rendered "differently".
SUGGESTION:
Try to set font/size explicitly in CSS, and see if that makes a difference.
In case you didn’t know, every browser has its own default user agent stylesheet, that it uses to make unstyled websites appear more legible. So field size may vary among browsers, see the following two screenshot:
Firefox:
Chrome:
To apply a standard stylesheet among all 'user-agent' you can use cssrest.
In my html form, I currently have a text input as follows:
<input list="BMUnits" name"BMUnitID" value"<?php echo $chosenBMU ?>" autocomplete="off">
<datalist id="BMUnits">
<option value="1">
...
<option value="300">
</datalist>
When the user types the drop down that shows the datalist goes off the screen, is there a way to define a certain number of elements in the datalist to be shown at once?
It seems that it is not possible. The current <datalist> tag does not support any special HTML attribute nor you can use CSS to style the dropped list. This means that only the browser can decide how the dropped list will look like. For example, IE (now called MS Edge) will show a scrollbar if the list is too long, but chrome won't. All we can do is waiting until browsers support that.
Alternativly, you can use jQueryUI Combobox or Chosen for more flexible drop list.
What's the purpose of the label attribute in the <option> tag in HTML5?
All the spec has to say is:
Specifies a label for the option.
MDN provides an explanation I cannot understand:
This attribute is text for the label indicating the meaning of the
option. If the label attribute isn't defined, its value is that of the
element text content.
Usage note: the label attribute is designed to contain a short label
typically used in a hierarchical menu. The value attribute describes a
longer label designed to be used near a radio button, for example.
I wrote a simple case I thought that could shed some light:
<select name="country">
<option value="ES" label="Spain's label">Spain</option>
<option value="FR" label="France's label">France</option>
</select>
... and only found that browsers seem to:
Ignore it (Firefox 26)
Completely replace tag content with it (Explorer 11, Chrome 32, Opera 12)
What is the attribute meant for?
Note: original question assumed the attribute was new. That's incorrect. It's only been enhanced due to newer tags introduced in HTML5.
In practice, it is meant for use inside a datalist element. The idea is that when browsers that do not support this element encounter it, they render its content, by normal principles, and if you want that fallback content to be empty, you need to use elements with empty content there. The label attribute lets you specify a human-readable string for an option, and modern browsers still implement the datalist with option elements properly.
Consider the following example in HTML5 CR:
<label>
Sex:
<input name=sex list=sexes>
<datalist id=sexes>
<option value="Female">
<option value="Male">
</datalist>
</label>
It is implemented so that there is just the text box, but if you type “f” there, the modern browsers suggest “Female”. (There is differences in details here, but that’s not relevant to the question.) Here you don’t need the label attribute.
But if you wanted to have values like 2 and 1 (the ISO/IEC 5218 standard codes for sexes) in the submitted form data, instead of strings “Female” and “Male”, what would you do? Inside a select element you could use <option value=2>Female</option>, but inside a datalist, that would result in the string “Female” being displayed by old browsers, and that would look odd.
Using the label attribute, you can write the datalist element as follows:
<datalist id=sexes>
<option value="2" label="Female">
<option value="1" label="Male">
</datalist>
This is meant to use human-readable words in the user interface and to submit the coded value 2 or 1 as part of form data. In practice, it does not work quite that well. The browser also has to show the coded value, since that’s what will appear in the textbox when the user selects a suggestion made by a browser. Different browsers have solved this in different ways, all with some drawbacks. E.g., on IE, focusing on the text box opens a menu with the alternatives “Female” and “Male”, which is fine, but then, if you click on “Female”, the menu closes and the character “2” appears in the box. It is difficult to say how browsers should deal with this. Anyway, this is where the label attribute is meant to be used.
Looking at this: http://blog.paciellogroup.com/2012/08/notes-on-html5-accessibility-support-in-ie-10/
It's looks like it's more used when you define a separate <datalist> for use as a list for an input.
My other thoughts are around usage for screen readers, however, I can't find any evidence of that.
Remember that <option> isn't limited to use in a <select> element, therefore some properties are more useful when included as part of <optgroup> et al.
Hope this helps.
I've had a quick look and couldn't find what I needed. I expect it to be something simple. I have an input text box whose type is set to a number with range between 1 to 20. This works perfectly.
However, the user can just type in abc or 21, which defeats the point. How can I set it so that the text box doesn't allow that?
maybe you can use "pattern"
<input type="text" pattern="[0-9]+" />
input type="number" and "range" not supported in Firefox.
You might want to solve using javascript, or, if it is only a matter of 20 numbers (ie 1-20), why not use a drop down?
such as:
<select>
<option>1</option>
</option>
etc...
HTML5 has a 'number' type input element. It looks like this:
<input type="number" name="quantity" min="1" max="5">
You can see it in action here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_number
However, not every browser supports this, so you you may need to validate the input given by the user. This page will tell you which browsers support this feature:
http://www.w3schools.com/html/html5_form_input_types.asp