Recent Posts

1

Accessible Design / Re: Multiple checkboxes vs MultiSelect

« Last post by jmrker on 6 Jun 2021, 01:36:39 pm »

...

@jmrker, that's some jacked up nonsensical markup. FIELDSET are for SETS of fields. You don't use fieldset and LEGEND for ONE field, that's LABEL's job. Most of the time if the value is the same as the content of the option, you don't need value="", and generally if you need scripting for click events there's something wrong with your form... and on that last set where are your LABEL? (only that last group qualifies as a fieldset)

Sorry if I offended you.  I only use FIELDSET to separate the 4 different examples with the legend as the descriptor for the contents of the individual element.  Example was for the author's question, not as a lesson in fieldset usage.  Fieldset usage here was just to delineate select options available.

2

Accessible Design / Re: Multiple checkboxes vs MultiSelectknight,

« Last post by John_Betong on 6 Jun 2021, 03:59:31 am »

@Jason Knight
If you think 52 options is too many then you won't like this page, which I thought was very innovative


https://www.johns-jokes.com/all-the-jokes

3

Accessible Design / Re: Multiple checkboxes vs MultiSelect

« Last post by Jason Knight on 6 Jun 2021, 03:45:23 am »

Generally if you have 52 options, you've got too many options and/or poor data planning. What's the data and why so many choices?

@jmrker, that's some jacked up nonsensical markup. FIELDSET are for SETS of fields. You don't use fieldset and LEGEND for ONE field, that's LABEL's job. Most of the time if the value is the same as the content of the option, you don't need value="", and generally if you need scripting for click events there's something wrong with your form... and on that last set where are your LABEL? (only that last group qualifies as a fieldset)

4

HTML / CSS / Re: Inserting text with javascript at the right location

« Last post by Jason Knight on 6 Jun 2021, 03:40:37 am »

Is this even something you need JavaScript for? What checks are you doing for valid/invalid? Remember in most cases this isn't JavaScript's job anymore.

This also REALLY isn't a situation where I'd be using SVG or innerHTML. IF this is something you need JS to do, a simple class swap with generated content might be more efficient.

5

HTML / CSS / Re: Inserting text with javascript at the right location

« Last post by AndrewTraub on 4 Jun 2021, 05:46:38 pm »

I got this fixed with the following:

Code: [Select]

    const showInlineError = (error) => {
        const msg = document.createElement("span");
        msg.classList.add("field-error");
        msg.innerHTML = '<svg width="1.3em" height="1.3em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#error-icon"></use></svg>' + escapeHtml(error.message);
        const o = document.getElementById(error.fieldName);
        const br = o.previousElementSibling;
        br.parentNode.insertBefore(msg, br.nextSibling); //equivalent to insert after
    }


6

HTML / CSS / Inserting text with javascript at the right location

« Last post by AndrewTraub on 4 Jun 2021, 01:16:59 pm »

If my code looks like this:

Code: [Select]

<label>
             Address<br>
            <input name="address" id="address" value="" type="text">
          </label>
<label>
           Address 2<br>
            <span class="muted">(Optional)</span><br>
            <input name="address2" id="address2" value="" type="text">
</label>
What is the best way to insert error text right before the input element?
Right now I'm creating a span, adding the class, setting the innerHTML, getting a reference to the input element, getting it's parents, and then looking for the label and then appending the element (which unfortunately puts the message below the input element).  Here's my code:

   

Code: [Select]

const getParents = e => {
        let result = [];
        for (let p = e && e.parentElement; p; p = p.parentElement) {
            if(p.nodeName === "FORM") break;    //no need to iterate above the form level
            result.push(p);
        }
        return result;
    }

    const showInlineError = (error) => {
        const msg = document.createElement("span");
        msg.classList.add("field-error");
        msg.innerHTML = '<svg width="1.3em" height="1.3em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#error-icon"></use></svg>' + escapeHtml(error.message);
        const o = document.getElementById(error.fieldName);
        const i = getParents(o); //returns array of parent elements
        let n, l = null;
        i.forEach(node => {
            if(node.nodeName === "LABEL") n = node;
            if(node.nodeName === "LEGEND") l = node;
        });
        !!l ? l.append(msg) : n.append(msg);
    }

7

Accessible Design / Re: Multiple checkboxes vs MultiSelect

« Last post by jmrker on 3 Jun 2021, 12:12:16 am »

Here is a non-sense display of the options you are debating.  Easy to modify.

1. Uses HTML 'title' attribute to show user options

2. Uses 1st option to display user actions available

3. Uses 'focus' of select element to show/hide user actions allowed.

4. Uses JS to show/hide checkbox displays.  Only limited (not 52) check boxes.
Probably could be modified to use CSS and label to display DIV of check boxes instead of JS button event

Choice is up to you as designer.  Add logic to act upon user choices.

Code: [Select]

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Multiple Selection Displays Test Page </title>
<!-- From: https://forums.cutcodedown.com/index.php?topic=512.msg2744;topicseen#new -->
<style>
 fieldset { width: 12em; display: inline; }

 #interestInfo { display: none; }          /* visibility: hidden; } */
 #interest:focus + div { display: block; } /* visibility: visible; } */

 #gradeInfo { display: none; }
</style>

</head><body>
<fieldset><legend>Pets (hover)</legend>
 <select name="pets" id="pet-select" multiple title="Single/Shift:range/Ctrl:picks">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
 </select>
</fieldset>

<fieldset><legend>Rate Level (option)</legend>
 <select id="rates" multiple size="5">
  <option value=""> Select-Single/Shift:range/Ctrl:picks </option>
  <option value="1"> 1 </option>
  <option value="2"> 2 </option>
  <option value="3"> 3 </option>
  <option value="4"> 4 </option>
  <option value="5"> 5 </option>
  <option value="6"> 6 </option>
  <option value="7"> 7 </option>
  <option value="8"> 8 </option>
  <option value="9"> 9 </option>
 </select>
</fieldset>

<fieldset><legend>Interest Level (focus)</legend>
 <select id="interest" multiple size="7">
  <option value=""> Select </option>
  <option value="1"> 10 </option>
  <option value="2"> 20 </option>
  <option value="3"> 30 </option>
  <option value="4"> 40 </option>
  <option value="5"> 50 </option>
  <option value="6"> 60 </option>
  <option value="7"> 70 </option>
  <option value="8"> 80 </option>
  <option value="9"> 90 </option>
 </select>
 <div id="interestInfo">Single:click<br>Shift:range<br>Ctrl:picks</div>
</fieldset>

<fieldset><legend>Grade Level (display)</legend>
 <input type='button' checked='false' id="grade" value='Proof'>
 <div id="gradeInfo">
  <input type="checkbox" value="100"> 100
  <input type="checkbox" value="200"> 200
  <input type="checkbox" value="300"> 300<br>
  <input type="checkbox" value="400"> 400
  <input type="checkbox" value="500"> 500
  <input type="checkbox" value="600"> 600<br>
  <input type="checkbox" value="700"> 700
  <input type="checkbox" value="800"> 800
  <input type="checkbox" value="900"> 900
 </div>
</fieldset>

<script>
 document.getElementById('grade').addEventListener(
   'click',
   (evt) => { let status = evt.target.checked; let info = evt.target.id+'Info';  // alert(info+'\n'+status);
              if (status == false) { evt.target.checked = true;  document.getElementById(info).style.display='none' }
                             else  { evt.target.checked = false; document.getElementById(info).style.display='block'; }
            }
 )
</script>

</body></html>



8

Accessible Design / Multiple checkboxes vs MultiSelect

« Last post by AndrewTraub on 2 Jun 2021, 05:06:16 pm »

In my experience, a lot of users don't know how to properly use the multi-select input.  As an alternative, I'm considering creating three columns of checkboxes, but there would be 52 checkboxes.  What are your thoughts on which to use?

9

Accessible Design / Re: Accessible Wizard

« Last post by AndrewTraub on 2 Jun 2021, 05:03:03 pm »

Thanks for the input.  It's a three step wizard.  The reason I decided to use a wizard was to make the process seem quicker but I take your point and will consider just one form.

10

Accessible Design / Re: Accessible Wizard

« Last post by Jason Knight on 1 Jun 2021, 10:19:44 pm »

Generally I'd have to see what it's doing, but as a USER I know that these "one or two question per page" setups often just piss me off. Generally I prefer when there's a bunch of options to have them all on one page.

What tabs CSS demo are you using? Generally if I were to implement such a thing I'd have it be hash link driven, in which case forward/back buttons would just be anchors href="#section1" and href="#section3" (if on #section2). See my x86 reference which is actually one giant page of markup despite looking like a SPA.

For example if you look at the page for the MUL instruction:

https://x86.cutcodedown.com/#opcode_MUL

You can see it has forward and back buttons to MOVZX and NEG respectively. In the code MOVZX is:

<div id="opcode_MOVZX">

And any link to that section would be:

<a href="#opcode_MOVZX">

No JavaScript needed, relatively easy to implement since it's all driven by CSS' :target psuedo-state.

That said, making it a single page with tabs is bad UX, and would make section validation a pain in the ass. I'd either make it one tall form so client-side validation is easier to handle. Playing around with fancy tricks is just going to harm the experience, not help it.

I don't know about anyone else, but when I'm 8 or 9 pages deep in some goofy form trickery, I have the habit of saying "screw this" and going to use something else.