title: How to allow two input values using an HTML pattern attribute
body: <p>I'm looking to constrain user input using an HTML pattern attribute on a text input, I didn't want to use a select or radio buttons tag for design purposes. I tried many approaches but none of them allowed me to get to what I want.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="" method="post"&gt;
  
  &lt;input type="text" class="study" name="study" placeholder="Enter your year of study L1-3,M1-2 "  pattern="[L-l-M-m]+[1-2-3]" maxlength="2" title="only L1,L2,L3 and M1,M2 are allowed" required&gt;
  &lt;button name="submit" class="btn" type="submit"&gt;Register&lt;/button&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>