Today I Learned - form

David Hölkeskamp — Fri, 12 Jul 2019 09:07:43 +0000

TIL - form

12.07.2019

I had the requirement to create a page where there is a form displayed and the form buttons where placed inside a header, the template was something like this

<body>
  <header>
    Headline

    <!-- SUBMIT button should be displayed here -->

  </header>
  <main>
    <form>
      <label for="someinput">Some Label</label>
      <input type="text" id="someinput" name="someinput" />
    </form>
  </main>
</body>

There are several ways to solve this:

Using CSS
- everybody loves playing around with position: absolute and all it's children like top, left … - I know I do /s
Adding the header to the form
- This could be a solution but in my case I was building a vue app and the header id a reusable component, whereas the form is displayed inside a
Using a cool attribute this article is all about
- Using a builtin attribute could solve this problem (and in my case did)

Welcome form

The form attribute can be used to point an element to its parent form without beeing inside of it

<body>
  <header>
    Headline

    <button type="submit" form="myform">Submit</button>
  </header>
  <main>
    <form id="myform" action="myAction.php">
      <label for="someinput">Some Label</label>
      <input type="text" id="someinput" name="someinput" />
    </form>
  </main>
</body>

The form you'll want to bind your button to needs to have an id - thats it. In your control, in my example the submit button, the attrribute form should point to the id of your form element.

The form attribute can be used on a variety of elements and is not limited to buttons.

Sources

Today I Learned - maxlength

David Hölkeskamp — Wed, 10 Jul 2019 19:36:53 +0000

TIL - maxlength

10.07.2019

I was building a vue component, which should limit the amount of characters (alphabetical and digits) a user could enter. To implement this behaviour I did something like the following

<template>
    <input type="text" @keydown="handleKeyDown" v-model="value"/>
</template>
<script>
export default {
    name: 'BaseInput',
    data() {
        return {
            valuie: 'Lorem ipsum'
        }
    },
    methods: {
        handleKeyDown(e) {
            if(this.value.length >= 50 && e.keyCode >= 48 && e.keyCode <= 90) {
                e.preventDefault();
                return;
            }
        }
    }
}
</script>

What this should do is enable all keys Aa-Zz and 0-9 as long as the character limit, in this case 50 has not been reached. System keys like DEL, ENTER, TAB… should not be affected by this and always work.

At the first look this may seem to work fine but as always with user input there are a lot of edge cases that are unknown at the time of implementation and could lead to bugs.

Thanks to an a lot more experienced colleague I've learned about maxlength. This is a browser implementation of limiting an input to a character count, which works like this

<input type="text" maxlength="50" />

Same effect as above but with way less code.

Caveats

Setting the value programmatically

It's still possible to programmatically set the value of a limited field e.g.

<input type="text" id="testid" maxlength="10" />

<script>
    const el = document.getElementById('testid');
    el.value = 'Text with more than ten characters';
    // This will work just fine.
</script>

maxlength is (mostly) not a proper validator

If you're working with an API where the length of inputs it important, maxlength is no replacement for proper validation as data could still be manipulated for AJAX or similar.

DEV Community: David Hölkeskamp

Today I Learned - form

TIL - form

Welcome form

Sources

Today I Learned - maxlength

TIL - maxlength

Caveats

Sources