HTML5 multi="true" tag doesn't work - eclipse

i use Eclipse kepler
in dynamic web project
i create html(HTML5) file and use code for Multi select file upload system
<input type="file" multiple="true" />
but can't select multiple with ctrl+click
and my eclipse has warning
Multiple annotations found at this line :
-Undefined attribute value(true)
-Undefined attribute value(true)
any suggestion?

You need to use the attribute's name as its value:
If the attribute is present, its value must either be the empty string
or a value that is an ASCII case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace.
(http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes)
In other words, just use:
<input type="file" multiple>
or
<input type="file" multiple="multiple">

If it does not work, then the reason is that you are using a browser that does not support the multiple attribute, such as IE 9. To deal with such browsers, you can add some JavaScript that tests whether the input element has the multiple property and if it does not, creates some additional file input elements (possibly in a loop that lets the user specify any number of files).
The warning should really be an error message, since true is not a valid value for the multiple attribute. As #IlmoEuro explains, the value should be empty or multiple. However, the value has in practice no impact; browsers recognize just the attribute name and ignore the value (even if you write multiple="false" for example).

Related

Select an html input element by its current value with CSS or XPath?

Is it possible to select an html input element on its current value, using CSS or XPath selectors?
My input control is generated by a React App as
<input name="documents"
placeholder="Documents" required="" type="file" value="">
Or do the document.query… and document.evaluate() functions only query the initially loaded document?
In javascript I can get the current value of an input. But I am trying to write a selector for SeleniumIDE against a React app. My current efforts are
xpath=//input[contains(#value , 'document')]
or
css=input[value*='document']
but whereas I can easily select on name, I'm failing to select by value.
In the browser console I find that
document.querySelector("input[name=documents]").value
gives me a value "C:\fakepath\Upload a document.txt"
but
document.querySelector("input[value*=doc]")
gives me nothing

Generate <input type="search" /> using Play! framework

I'm using the Play Framework. I want to use the HTML5 input type 'search'. So, I want to output:
<input type="search" />
I've tried:
#inputText(field = myForm("myField"), 'type -> "search")
but it still kept the type="input"
the method inputText represents an HTML input text (see the source code here).
You have to define your own template to define the input of type search. Take a look at the Play documentation.
#helper.input(myForm("myField")) { (id, name, value, args) =>
<input type="search" name="#name" id="#id" #toHtmlArgs(args)>
}
Most probably your search field will not use many typical things from common form element (like constraints or error messages) so you can just use plain HTML to insert it, and add field's value in the proper attribute (if required at all):
<input type="search" name="myField" value="#myForm("myField").value" />
If it's just a search form (with this only field) you even don't need to wrap it with the Form class
(of course Nico's suggest is advisable in more sophisticated scenarios)
Some helpers you're looking for are avalaible in a play 2 module. The html5 input helpers are not in the core part of the framework because play authors want to keep it light.
Here is the module page on github : https://github.com/loicdescotte/Play2-HTML5Tags

Chrome/HTML5: Input type number not respecting max attribute?

I have the following markup:
<input type="number" max="99" />
In Google Chrome (and possibly other webkit browsers), this will restrict the spinner's up arrow from going over 99, but it does not prevent the user from typing a number higher than 99. Even onblur, the invalid value is not removed/replaced or even a warning given that the value is invalid.
Am I misinterpreting how it's supposed to work, or is this a bug? I am using the latest version of Chrome (19 at the time of writing).
Edit:
To clarify, I want to know why a number greater than the specified max is allowed to be input in the first place. I realize that it gives a tooltip on form submission telling you that it's invalid, but it seems like inconsistent behavior that the spinner will not allow you to go above the max, yet you can simply type a number above the max at any time to circumvent it.
If this is desired behavior for some reason, why is that? And is there a better option to enforcing the input range without resorting to JS?
It does work but you only see an error message (tooltip) if you put a submit button and a form into your code:
<form action="#" method="get">
<input type="number" max="99" />
<input type="submit" value="Submit!" />
</form>
jsFiddle
​
It's an old question, but I didn't find any relevant answers for this question anywhere.
this behaviour is still around in chrome (version 61).
I have found a little trick that can be used in some situation.
it's relevant for those who use data-binding libraries like aurelia, angular etc.. I tested only on aurelia - but that should work also for others.
the trick relies on the fact that input of type range enforce the min/max constraints.
we simply create another input (of type range) that is bounded to the same value as the regular input, and we hide it via css.
when the user inputs something that is greater than the max value, it will snap back to the max value.
here's a demo in aurelia: https://gist.run/?id=86fc278d3837718be4691acd5625aaad

How should boolean attributes be written? [duplicate]

This question already has answers here:
What values can appear in the "selected" attribute of the "option" tag?
(8 answers)
Closed 8 years ago.
I've been reading some articles about HTML, XHTML, etc. In most of them (i.e. My preferred syntax style) say that boolean attributes should be written without any value, like this:
<input type="text" required>
They even say that it is wrong to use this attributes like this:
<input type="text" required="required">
Some of this articles link W3 which says:
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
but in the examples shows like this:
Here is an example of a checkbox that is checked and disabled. The
checked and disabled attributes are the boolean attributes.
<label><input type=checkbox checked name=cheese disabled>Cheese</label>
This could be equivalently written as this:
<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>
You can also mix styles; the following is still equivalent:
<label><input type='checkbox' checked name=cheese disabled="">Cheese</label>
So, how should the boolean attributes be written? Based in your experience, which of the options are cross-browser and which are not?
Attribues without values are valid in HTML, but invalid in XHTML, because it's not allowed in XML. Perhaps that's where your confusion is coming from. So, which one is valid depends on the doctype of your document.
I always use checked="checked" and disabled="disabled". I don't really have a reason for adding it, but it has always worked in all browsers that I test in. This includes IE6+.

jQuery ajaxSubmit(): ho to send the form referencing on the fields id, instead of the fields name?

im pretty new to jQuery, and i dont know how to do that, and if it can be done without editing manually the plugin.
Assume to have a simply form like that:
<form action="page.php" method="post">
Name: <input type="text" name="Your name" id="contact-name" value="" />
Email: <input type="text" name="Your email" id="contact-email" value="" />
</form>
When you submit it, both in 'standard' way or with ajaxSubmit(), the values of the request take the label of the field name, so in the page.php i'll have:
$_POST['Your name'];
$_POST['Your email'];
Instead i'll like to label the submitted values with the id of the field:
$_POST['contact-name'];
$_POST['contact-email'];
Is there a way to do that with jquery and the ajaxsubmit() plugin?
And, maybe, there is a way to do it even with the normal usage of a form?
p.s: yes, i know, i could set the name and id attributes of the field both as 'contact-name', but how does two attributes that contain the same value be usefull?
According to the HTML spec, the browser should submit the name attribute, which does not need to be unique across elements.
Some server-side languages, such as Rails and PHP, take multiple elements with certain identical names and serialize them into data structures. For instance:
<input type="text" name="address[]" />
<input type="text" name="address[]" />
If the user types in 1 Infinite Loop in the first box and Suite 45 in the second box, PHP and Rails will show ["1 Infinite Loop", "Suite 45"] as the contents of the address parameter.
This is all related to the name attribute. On the other hand, the id attribute is designed to uniquely represent an element on the page. It can be referenced using CSS using #myId and in raw JavaScript using document.getElementById. Because it is unique, looking it up in JavaScript is very fast. In practice, you would use jQuery or another library, which would hide these details from you.
It is reasonably common for people to use the same attribute value for id and name, but the only one you need to care about for form submission is name. The jQuery Form Plugin emulates browser behavior extremely closely, so the same would apply to ajaxSubmit.
It's the way forms work in HTML.
Besides, Id's won't work for checkboxes and radio buttons, because you'll probably have several controls with the same name (but a different value), while an HTML element's id attribute has to be unique in your document.
If you really wanted, you could create a preprocessor javascript function that sets every form element's name to the id value, but that wouldn't be very smart IMHO.
var name = $("#contact-name").val();
var email = $("#contact-email").val();
$.post("page.php", { contact-name: name, contact-email: email } );
This will let you post the form with custom attributes.