HTML: How to control the Form ‘autofill’-autocompetion

Image Designed by Freepik

The ‘autofill’ feature of browsers is a blessing and a curse. The feature enables the browser to reuse the data the user has previously entered in forms. The trouble starts when a form does not fulfill the standard. Then the feature sometimes fills in the wrong information into the fields.

Why does autofill fail?

The standard implemented a feature to group fields. This was created by adding optional ‘8characters at the start of the name’. A field like “first-name” could be interpreted as the group: “first” and autofill-field: ‘name’(=> last name). To correct this you would need to rename the field to ‘given-name‘ as this is defined in the standard. However, if you would test ‘first-name’ in the browser you will discover that autocomplete works without problems. That is because even though it is not in the standard certain aliases are detected correctly. Depending on how the browser interprets the form. If you are not using the standard you basically are telling the browser to guess what the field is and let the browser decide what to autofill.

The Standard Keywords

If you want a pleasant user experience for the visitors of your site then you should take the time to make sure that your form confirms to the standard keywords:

  • “name”
  • “honorific-prefix”
  • “given-name”
  • “additional-name”
  • “family-name”
  • “honorific-suffix”
  • “nickname”
  • “username”
  • “new-password”
  • “current-password”
  • “organization-title”
  • “organization”
  • “street-address”
  • “address-line1”
  • “address-line2”
  • “address-line3”
  • “address-level4”
  • “address-level3”
  • “address-level2”
  • “address-level1”
  • “country”
  • “country-name”
  • “postal-code”
  • “transaction-currency”
  • “transaction-amount”
  • “language”
  • “bday”
  • “bday-day”
  • “bday-month”
  • “bday-year”
  • “sex”
  • “url”
  • “photo”

For Credit Card Information:

  • “cc-name”
  • “cc-given-name”
  • “cc-additional-name”
  • “cc-family-name”
  • “cc-number”
  • “cc-exp”
  • “cc-exp-month”
  • “cc-exp-year”
  • “cc-csc”
  • “cc-type”

To use these keywords with attribute autocomplete. However if the field autocomplete is not set browsers will automatically check the attribute-name. In this example both fields would be detected by autofill as ‘name’:

    <form>
    <input name="field1" autocomplete="name" />
    <input name="name" />
    </form>

As a personal preference, I would not set the autocomplete-attribute and simply use the keywords in the field name. This immediately eliminates the need to think of a more suitable name. If you are dealing with a backend you cannot modify I would use the field autocomplete.

Groups

Sometimes you need some of these fields multiple times. Let’s say you need a shipping and a billing address.  Then you simply add a prefix to the attribute.

    <form>
      <input name="billing-street-address" />
      <input name="billing-country" />
      <input name="shipping-street-address" />
      <input name="shipping-country" />
    </form>

How to disable autofill?

In the rare case that you do not need this feature at all you probably would want to disable it. To do this you have again two options:

Disable globally

Simply add the attribute autocomplete="off to the form-element. You then can re-enable the autofill on an individual component by using autocomplete=on.

    <form autocomplete="off">
      <input 
        placeholder="disabled Autocomplete" 
      />
      <input 
        placeholder="enabled for only this input" 
        autocomplete="on" 
      />
    </form>

Disable Individual Input

You can disable the autofill feature for an individual component by adding autocomplete="new-password" (This is because Chrome ignores the ‘off’ value)

    <form>
      <input 
        placeholder="disabled only for this component"
        autocomplete="new-password" 
      />
    </form>

Sources:

How to publish on Github Pages with create-react-app and react-router

Now I will be assuming a couple of things:

  • You have a GitHub account and you created a repository for your app.
  • You created a react app either with npx create-react-app <appName> or npx create-react-app <appName> --scripts-version=react-scripts-ts
  • Then let’s get started.

Add gh-pages

Run npm i -D gh-pages\

Configure your package.json

First, you need to tell the react app where it will be hosted. You need to add to your package.json the attribute ‘homepage’:

    { ...
    "homepage": "https://<UserName>.github.io/<RepositoryName>/"
    }

Additionally, you need to adjust the scripts attribute.

    "scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    },

Now you can run npm deploy and it will automatically create a branch, build the app and deploy it into your repository. It will even configure your github repository that the branch gh-pages will be now hosted.  So you can simply navigate to  https://<UserName>.github.io/<RepositoryName>/ and see the result. # Configure React-Router Before we can publish we probably have to change a couple of things in the configuration of the react-router.

  1. We need to set the basename. The basename ensures that all links of the Router are relative to this basename. To configure the basename you can use the variable process.env.PUBLIC_URL this ensures that you only need to configure the url via the package.json.
  2. We need to ensure that we are using aHashRouter instead of the typical BrowserRouter . The difference is that the hashRouter adds a ‘#’ into the url and upon a refresh of the page you will not see a 404 Github Error

Your index.js should look something like this:

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import { Router } from 'react-router';
    import createHashHistory from 'history/createHashHistory';
    
    const hashHistory = createHashHistory({ basename: process.env.PUBLIC_URL });
    
    ReactDOM.render(
        <Router history={hashHistory}>
          <App />
        </Router>,
      document.getElementById('root') as HTMLElement
    );

Deploy

Now can simply run `npm deploy` and your site should be published on https://<UserName>.github.io/<RepositoryName>/

Note: Since the build is published on a separate branch, your main repository may contain different src than what is published. So you still need to ensure that you commit your changes to your repository.

HTML 5: When to use or

tl:dr

  • <a> is used for page navigation
  • <button> is used for actions on the page
  • <input type="button" /> is used in a form and the value is used in the form

The Problem

Let’s take a look at this small piece of code:

<a id="btn" class="btn btn-default">Button</a>
<script>
  var btn = document.getElementById('btn');
  btn.addEventListener("click", function(e){
    e.preventDefault();
    console.log('awesome btn action');
});
</script>

Now half of the people I showed this piece of code, said: well there is nothing wrong with the code. That is a perfectly fine way of defining a button.

If you take a closer look, you will discover a couple of smaller issues with this piece of code.

First, you would notice that hovering over the button you get a text cursor instead of a ‘hand’-cursor. This is caused by leaving the attribute “href” undefined, you can fix it via defining something like ‘#’ or via CSS.

Then you would notice that by defining the “href” tag you would cause the browser to navigate to another page or the top of the page. To prevent this you would then need to add some Javascript code and call ‘event.preventDefault()’, or add to your previous hack and define the href as ‘#0’. This solves the problem by relying on the browser not knowing what to do with illegal element ids (ids can never start with a number).

Voila, you are now in the situation that you are using some hack pattern that degrades the readability of your code. Someone may come along and assume that someone made a mistake defining the href attribute /or used a placeholder and forgot to replace it.

The Solution

Now let’s improve the readability of the code:

<button id="btn" class="btn btn-default" type="button">Button</button>
<script>
  var btn = document.getElementById('btn');
  btn.addEventListener("click", function(){
    console.log('awesome btn action');
});
</script>

We are now using the correct tag <button>, no need for any hacks to fix the cursor or some wierd href, and no additional line of Javascript. You will need CSS to ensure that the button looks the same in all Browsers, however you would probably anyway used CSS to style your <a>-button.

But what about IE8? – for that we set the type=’button’, and IE8 is almost of no concern anymore (even for big corporate customers)

<button> vs <input type="button" />

Both types of buttons work in practice the same way. However, the Button element allows you to add content elements, like an image. And usually, you would use the <input type="text" /> tag in a </button>`.

As we are not working with a form and just want to have a button to execute some JS-Code I would use the Button tag.

Summary

  • <a> is used for page navigation
  • <button type="button"> is used for actions on the page, can contain other HTML elements
  • <input type="button" /> is used in a form

Some More Reading

Image: Designed by Freepik