I am trying to use HTML5 to offer some sort of live quiz on a webpage. I am not interested in submitting or storing the user inputs on a server, I just want to show the user a direct feedback on whether his inputs are correct or not. I want to use pure HTML5 and a purely client based evaluation, without any javascript or server evaluation.
Unfortunately, I am no HTML expert at all. The HTML5 code I have come up with so far is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exercise</title>
<style>
/*An incorrect input:*/
input:invalid{
color:red;
}
/*A correct input:*/
input:valid{
color:green;
}
*/
</style>
</head>
<body>
<p>
Complete the missing words using information from the following template:
<ol>
<li> This is a first test.
<li> This is a second test.
</ol>
<p>
<form action="#.ext" method="post" id="myform">
<ol>
<li>
<label for="GM">This</label>
<input required
type="text"
id="GM" name="GM"
pattern="is">
<label for="GM1"> a </label>
<input required
type="text"
id="GM1" name="GM1"
pattern="first">
<label for="GM2"> test.</label>
<li>
<label for="GM3">This is a </label>
<input required
type="text"
id="GM3" name="GM3"
pattern="second">
<label> test.</label>
</ol>
</form>
<button form="myform" type="submit">Check and show correct solutions.</button>
</body>
</html>
The HTML5 is already capable of checking inputs against a pattern which contains the correct solution and the change the color of the input element from red to green if the solution is correct.
What I have not managed to achieve so far:
I'd like the checks for all inputs to start only when the button is pressed (but without submitting the inputs to the server, I want to check locally against the patterns.)
I'd like to see correct solutions in all input fields as soon as the button is clicked, even if they have been empty before (however I cannot use the placeholders for that because they would be visible from the beginning)
I'd like to change to colors of the forms only after the button is clicked (e.g. red if solution was wrong and green if it was OK)
In the best case I'd like to additionally add the wrong user input in red and crossed out plus the correct input in green in one input field.
I am fully aware that I am not using those tools the way they are usually intended to be used, since I am not interested in actualy submitting the content of the input fields to the server.
Thanks for any feedback.
Related
I'm currently facing a situation that I have never faced before. I need to create a list of users, each item of the list is editable and automatically sends data to our backend.
The basic example that I can give is the following:
<ul>
<li>
<label for="username">User name</label>
<input id="username"/>
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox" />
</li>
</ul>
This is just a simple example, but it is basically the structure, as you can see I have not added any form and that is the question that I have.
Based on my knowledge of semantic HTML or each item is a form:
<ul>
<li>
<form>
<label for="username">User name</label>
<input id="username"/>
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox" />
</form>
</li>
</ul>
Or I would do a single form for the entire list:
<form>
<ul>
<li>
<label for="username">User name</label>
<input id="username"/>
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox" />
</li>
</ul>
</form>
But, my first attempt before coming here to ask, I tried to look on some websites, like youtube, twitch, gmail and even here, on stackoverflow to see how they do it, and I found this on Twitch that made me think if a form is even necessary. If you click on your avatar on twitch, it give you two options:
Inspecting the page I could only find a label and an input for each of those options, but looking at the remaining HTML I could not find any form nor a div with form role.
So I'm thinking, is semantically correct to have input outside of any forms? If so, what are the conditions to have a form or not?
Because as far I could understand, whenever you need to submit data somewhere, you should have a form for semantically reasons.
Although is a best practice, sometimes yout your input tag doesn't need to be inside a form or a div with form role. On this case you can simply create the elements and handle the inputs through JS. I don't think there's actually a clear rule for whether using form or not. It was most commonly used before along with the type="submit" to pass data easily on the URL, but with AJAX and web frameworks there's no more need for that and the action attribute might actually trick you.
Check out these references:
MDN article
This SO answer
One other reason you might not find a form or equivalent role on your HTML inspection is because most (if not all) of these platforms run on top of various javascript frameworks, like React, Angular, etc. and the role is injected through js.
Minimal repro example (jsfiddle, you need a credit card saved in your browser to see this issue):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="post" action="Test.html" autocomplete="off">
<div>
<label>Basisnummer</label>
<input type="text" />
<input type="text" />
<br>
<label>Markenname</label>
<input type="text" />
</div>
</form>
</body>
</html>
Both Chrome 85.0.4183.121 and Edge 85.0.564.63 think that this is a credit card form and decide to helpfully allow my users to enter their credit card data, which is not at all helpful (since this is not a credit card form) and confuses the heck out of my users:
I am aware of the following workarounds:
Obfuscating the first label:
<label>Basisnum<span style="display:none">x</span>mer</label>
That works, but I'd be a lot of work to implement this in our application (the labels are not hard-coded since they can be localized).
autocomplete="cc-csc" works (i.e., disables auto-completion), but it's semantically completely wrong (it's not a CC-CSC field!), so I'd rather avoid that to prevent further trouble down the road when browsers decide to do something "helpful" to cc-csc fields. For example, setting it as cc-csc could make mobile browsers show a numeric-only keyboard (makes sense, since a csc is always numeric), and I definitely don't want that.
In any case, I'd rather work with the browser than against it, hence my question:
Why does this happen? (Since it occurs in both Chrome and "new" Edge, it must be some Chromium issue, and since Chromium is open-source, we should be able to see what happens here, right?)
Bonus question: How can I (officially) tell Chromium that this is not a credit card form?
Notes:
autocomplete="nope" (or autocomplete="...some random data...") doesn't make a difference.
This is just a minimal example - the full page has names, classes, ids and whatnot.
I am grateful for people suggesting workarounds in the comments. I would, however, prefer to understand why it happens rather than trying random workarounds (if that is possible, of course...).
It's because Chome's auto-detection of German-language credit card forms is too aggressive. In particular, your form contains
three or more fields,
one of which is labeled as a ...nummer, and
another one is labeled as a ...name.
Here is an even simpler minimal example that reproduces the same issue with the current canary version of Chrome (87.0.4278.0):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<label>Nummer</label>
<input type="text" />
<input type="text" />
<br>
<label>Name</label>
<input type="text" />
</div>
</body>
</html>
Looking at the source of Chromium, we can see that the following regex is used to detect credit card number fields (components/autofill/core/common/autofill_regex_constants.cc):
const char kCardNumberRe[] =
"(add)?(?:card|cc|acct).?(?:number|#|no|num|field)"
"|(?<!telefon|haus|person|fødsels)nummer" // de-DE, sv-SE, no
"|カード番号" // ja-JP
"|Номер.*карты" // ru
"|信用卡号|信用卡号码" // zh-CN
"|信用卡卡號" // zh-TW
"|카드" // ko-KR
// es/pt/fr
"|(numero|número|numéro)(?!.*(document|fono|phone|réservation))";
We can see that (almost) every field labeled with "...nummer" (= German for "number") is considered a credit card number field!
Once a credit card number field is found, a subsequent field labeled "...name" is treated as a credit card name field (credit_card_field.cc):
// Sometimes the cardholder field is just labeled "name". Unfortunately
// this is a dangerously generic word to search for, since it will often
// match a name (not cardholder name) field before or after credit card
// fields. So we search for "name" only when we've already parsed at
// least one other credit card field and haven't yet parsed the
// expiration date (which usually appears at the end).
if (fields > 0 && !credit_card_field->expiration_month_ &&
ParseField(scanner, base::UTF8ToUTF16(kNameOnCardContextualRe),
&credit_card_field->cardholder_,
{log_manager, "kNameOnCardContextualRe"})) {
continue;
Unfortunately, there is no "official" way to tell Chrome that "this is really not a credit card field". The most common workaround is autocomplete="cc-csc", but this is semantically completely backwards (mis-labeling a field as a certain type of credit card field to prevent credit card field auto-detection).
I have submitted a bug report for this, let's hope it helps:
https://bugs.chromium.org/p/chromium/issues/detail?id=1133769
You can explicitly set autocomplete values to the closest approximations from the The HTML autocomplete attribute
I used "tel" for Basisnummer and "organization" for Markenname:
<form method="post" action="Test.html" autocomplete="off">
<div>
<label>Basisnummer</label>
<input type="text" autocomplete="tel"/>
<input type="text" />
<br>
<label>Markenname</label>
<input type="text" autocomplete="organization"/>
</div>
</form>
It does disable card number autocomplete.
JSfiddle
So, let's say this is the code I used in my html from W3CSCHOOL
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Select images: <input type="file" name="img" multiple>
<input type="submit">
</form>
<p>Try selecting more than one file when browsing for files.</p>
<p><strong>Note:</strong> The multiple attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
The action_page.php is going to display the files you have selected. But it will display it by name orders, not the selection orders. I am wondering if there is anyway to change the sequence of the file? Maybe based on the selection order?
There is no selection order.
The files are all being chosen all together.
You can dynamically add more image inputs as far as the user asks for.
I have a form that I would like to have chrome autofill or prefill (I'm using Mac Chrome 26.0.1410.65 on Mountain Lion). The purpose of this is to demonstrate the autocomplete standards: I'd like to show either the fields prefilled on load, or if the user starts typing their first name it will auto-fill both names.
I'm using autocomplete and the entire page is below, with just two fields.
I submit, then the next time I visit the page, I have to start typing into each field to get the drop-down for auto-complete. No matter what I do on the first field, I have to tab to the second and start typing there.
I'd like it to fill in all the fields (well, both) when I accept a value in the first field. How do I get that? I see it happening in commercial websites, where starting to type in a single field and it pre-fills many other fields. (even if there is a yellow background)
<!DOCTYPE html>
<html>
<head><title>Autofill test</title></head>
<body>
<form name="nameform" action="?go" method="POST">
<input type="text" name="givenname" autocomplete="given-name">
<input type="text" name="familyname" autocomplete="family-name">
<button type="submit">Save values</button>
</form>
</body>
</html>
I've seen the other questions that indicate I have to use POST, and there cannot be hyphens in the name. I have also tried x-autocompletetype and autocomplete. I've also tried without the DOCTYPE (I'm getting desperate), and renaming the fields "fname" or "firstname" etc. Nothing appears to work.
Is there something I'm missing?
I have a HTML form that truncates the action parameter after the "?" mark - which is NOT the desired behavior I am looking for.
Here is a representative HTML snippet:
<form action="http://spufalcons.com/index.aspx?tab=gymnastics&path=gym">
<input type="submit" value="SPU Gymnastics"/>
</form>
In this case, the submit button takes you to the "http://www.spufalcons.com/index.aspx" page, effectively ignoring "?tab=gymnastics&path=gym" parameter. It appears that all HTML and PHP pages referenced in the action=URL work as expected. This behavior is consistent across all major browsers (IE, FF, Safari, Chrome, Opera).
Has anyone seen this problem before? Or can suggest an alternative and/or workaround consistent with my "pure" CSS/HTML/PHP web development approach? I have tried replacing the special characters with HTML entity values with no impact. I REALLY don't want to use abandon my CSS-styled submit buttons by using Javascript or button PNG's or image maps.
Environment:
Web Server: Apache 2.2.14
PHP: 5.2.10
OS: Mac OS X 10.5.8
HTML document info:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
TIA --
Trent
Put the query arguments in hidden input fields:
<form action="http://spufalcons.com/index.aspx">
<input type="hidden" name="tab" value="gymnastics" />
<input type="hidden" name="path" value="gym" />
<input type="submit" value="SPU Gymnastics"/>
</form>
Use method=POST then it will pass key&value.
This appears to be my "preferred" solution:
<form action="www.spufalcons.com/index.aspx?tab=gymnastics&path=gym" method="post"> <div>
<input type="submit" value="Gymnastics"></div>
Sorry for the presentation format - I'm still trying to learn how to use this forum....
I do have a follow-up question. In looking at my MySQL database of URL's it appears that ~30% of the URL's will need to use this post/div wrapper approach. This leaves ~70% that cannot accept the "post" attribute. For example:
<form action="http://www.google.com" method="post">
<div>
<input type="submit" value="Google"/>
</div></form>
does not work. Do you have a recommendation for how to best handle this get/post condition test. Off the top of my head I'm guessing that using PHP to evaluate the existence of the "?" character in the URL may be my best approach, although I'm not sure how to structure the HTML form to accomplish this.
Thank YOU!
I applied CSS styling to an anchored HREF attribute fully emulating the push button behaviors I needed (hover, active, background-color, etc., etc.). HTML markup is much simpler a-n-d eliminates the get/post complexity associated with using a form-based approach.
<a class="GYM" href="http://www.spufalcons.com/index.aspx?tab=gymnastics&path=gym">Gymnastics</a>