Interactive Card Details Form

Community feedback

• 

  Miran Legin•680

  @miranleginPosted about 2 years ago

  Hi Yunus,

  regarding input fields you can do some improvements

  1. use appropriate input types for form fields MDN documentation on Input Types especially for mobile users because keyboard is different for every input type
  2. for numbers you can go with both input type="number" or input type="tel", there are couple of differences though so you can explore more on the link
  3. also there is a way to limit number of characters in form fields with maxlength atribute; for example maxlength="2"
  4. for MM field you know the minimum and maximum values accepted so you can add min or max attributes aswell
  5. another attribute worth considering is pattern where you can specify accepted values as a regex pattern; for example pattern=="[0-9]{1,2}"

  Before: <input type="text" class="form-control" id="month" placeholder="MM" autocomplete="off">

  After: <input type="number" maxlength="2" min="1" max="12" pattern=="[0-9]{1,2}" title="Only numbers from 1 to 12" placeholder="MM">

  Keep coding!

  Marked as helpful

  0

  ---

  

  Yunus Emre Çınar•360

  @yunusemrecinarPosted about 2 years ago

  @miranlegin I searched about the pattern but I only found js ones. Thanks!

  0