Is it possible to make your own custom input types in an HTML form?

Question

I was wondering if I could make something like this: <input type="secure">. I want to know if it is possible to make a custom input type for my website. I was going to use it to do things that you cannot normally do and style it with CSS and make it do what I want with JavaScript. Here is any example:

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto");
input[type="secure"] {
  background-color: #b5d1ff;
  border: 0.5px solid #f4a460;
  height: 1.6rem;
  color: black;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  width: 8.62rem;
  font-family: 'Roboto', serif;
}

I haven't currently decided what I want to do with JavaScript but I think you get the idea.

Answer 1

No, that's what classes are for. Even if 'technically you can', you'd be breaking compatibility and HTML standards compliance.

Answer 2

You can create such an input, but unknown type value will be treated by browser as default text (logged to console). If you inspect DOM, you'll see type="secure":

const s = document.createElement('input');
s.setAttribute('type', 'secure');

document.body.appendChild(s);

console.log(s); // <input type="secure">

console.log('type: ', s.type); // type: "text"