I'm a little confused as to what is considered valid markup for HTML5 input fields.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Site Name</title>
</head>
<body>
<form name="contact" method="post" action="/">
<p><input type="input" name="first_name" maxlength="255" /></p>
</form>
</body>
</html>
When I run this through the validator at w3.org I get the error Bad value input for attribute type on element input. with the /> highlighted in red. I look at the HTML-Tidy version it creates and it tells me to write it like this instead:
<p><input type="input" name="first_name" maxlength="255"></p>
But then when I validate that I then get the same error but with just the > highlighted in red. Then looking at the HTML-Tidy to see what it has corrected it to and it leaves is the same as if it's okay, but the error is still there. Is this considered valid HTML5 markup? Or is there a specific way of doing this?
type="input" is an invalid value of the attribute type of the input element.
This guide on the input element shows the allowed type attributes. Or check the HTML5 additional input types if you require one of those.
For a regular textfield you need to set the type attribute to type="text".
Input type "input" is not correct, you probably intented to use type="text".
Related
I would like to unambiguously describe (by using Wikidata URIs) what the subject matter of a blog post is using Schema.org.
Any pointers on how to do this?
You can use Schema.org’s about property:
The subject matter of the content.
While this property expects a Thing value, it’s possible to provide a URL value.
RDFa examples:
<article typeof="schema:BlogPosting">
<!-- URL value -->
<link property="schema:about" href="http://www.wikidata.org/entity/Q892" />
</article>
<article typeof="schema:BlogPosting">
<!-- Thing value -->
<div property="schema:about" typeof="schema:Person" resource="http://www.wikidata.org/entity/Q892">
<meta property="schema:name" content="J. R. R. Tolkien" />
</div>
</article>
On Google Search Console, I'm getting the error missing best and worst rating. But when I tested the link on testing tool, I am getting:
Failed to normalize the rating value.
Your rating value was out of the default range, you must provide best and worst values.
The code is given below:
<h3>Reviews</h3>
<div class="average-rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<p class="rating-title">Average Rating</p>
<div class="rating-box">
<div class="average-value" itemprop="ratingValue">0/5</div>
<div class="review-amount" itemprop="ratingCount">0 rating</div>
</div>
When I change in rating value to
<div class="average-value" itemprop="ratingValue">0/5</div>
or to this
<div class="average-value" itemprop="ratingValue">0/-454545</div>
it gives a warning:
0 rating (The value provided for ratingCount must be an integer.)
How can I solve this?
The min/max attributes are plain HTML attributes, they don’t affect the Microdata (and they can, by the way, not be used on div elements).
In Schema.org, the worst/best rating can be specified with worstRating and bestRating. If you don’t provide these properties, "0" and "5" are assumed.
If you fix the other errors (ratingCount would have to be "0", not "0 rating"; and it might be better to use "0" instead of "0/5" as ratingValue), you could omit worstRating/bestRating. But it’s typically better to be explicit, so you could add:
<meta itemprop="worstRating" content="0" />
<meta itemprop="bestRating" content="5" />
or:
<meta itemprop="worstRating" content="0" />
<span itemprop="ratingValue">0</span>/<span itemprop="bestRating">5</span>
I have a very simple JavaScript function that uses try/catch, though when the meta tag <meta charset="utf-8" /> is defined on the page, it doesn't work:
<!doctype html>
<meta charset="utf-8" />
<script type="text/javascript">
function demo(){
try{
undefinedfunction()
alert("I guess you do exist")
} catch(e){
alert("An error has occured: "+e.message)
}
}
</script>
<form method="post">
<b>Demo:</b> <input type="button" value="Click Me" onClick="demo()" />
</form>
In the above case instead of catching the undefinedfunction(), the console logs "Syntax Error: illegal character". If I remove the meta tag, the function behaves as expected, alerting a message.
Does anyone know why this is the case?
Ah nevermind, it seems the problem was with the spaces inside the function, instead of tabs. I guess "utf-8" is picky about those kinds of things.
i have a JSP with
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
in the head section, with following code i try to set the content to UTF-8:
<%#page contentType="text/html;charset=utf-8" %>
response.setCharacterEncoding("UTF-8");
request.setCharacterEncoding("UTF-8");
Within a form is an input field:
<input type="text" value="LastName*" class="input required" name="lastName" id="lastName" />
I have now problems with german special characters.
When i use request.getParameter("lastName"), this works fine in FireFox, but not in IE.
String encodedLastName = new String(request.getParameter("lastName").getBytes("iso-8859-1"), "UTF-8");
works on IE, but not in Firefox.
I tried to change everything to iso-8859-1, added accept-charset="UTF-8" to the form, ...
Now it is more guessing than working.
Can this only configured within the server (Tomcat) but why there is a difference between the behaviour of the browsers?
Thank, Markus
There were two problems which interfere with each other:
1) When using a normal post, i have to encode correct via
<%#page contentType="text/html;charset=utf-8" %>
and decode correct via
String encodedLastName = new String(request.getParameter("lastName").getBytes("iso-8859-1"), "UTF-8");
2) When using jquery, adding
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
in the $.ajax call.
I am getting validation errors with the inputmode attribute on text areas and text fields. The validator tells me Attribute inputmode not allowed on element input at this point but the HTML5 spec indicates that it is allowed.
Is there actually something wrong with this code, or is the validator at fault?
Here is a bare bones case which will produce exactly this kind of validation error (twice), in one case on an email input, and on the other on a textarea.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post" action="contactme.php">
<label class='pas block'>
Your E-Mail:<br/>
<input type='email' name='email' required inputmode='latin' placeholder='your e-mail here' />
</label>
<label class='pas block'>
Your Message:<br/>
<textarea name='message' required inputmode='latin' placeholder='and your message here!'></textarea>
</label>
</form>
</body>
</html>
Also, see the chart about which attributes apply to the different input types here:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-type
The "inputmode" attribute applies only to "text" and "search".
UPDATE 2019-09-04: "inputmode" is now a global attribute (per WHATWG) and can be specified on any HTML element: https://html.spec.whatwg.org/multipage/dom.html#global-attributes
Another reference page for "inputmode":
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
On another note, "inputmode" is not a W3C HTML5 attribute, but it is a W3C HTML 5.1 attribute (at least at the time I'm writing this). UPDATE 2019-09-04: "inputmode" has been removed from HTML 5.2 and HTML 5.3.
The HTML5 spec says
The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, max, min, src, step, and width.
It's under bookkeeping details at https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email)
Five years after the question was asked, some may wonder why some of the properties listed by #dsas doesn't trigger such errors, like enctype
The answer is simple support, while enctype for instance gained a wide support
inputmethod is supported only as of IE11 and Edge 14, for more infos click here