CODEWITHSUNDEEP
javascripthtmlcssforms
Joshua
Joshua

Reputation: 446

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

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.

Upvotes: 4

Views: 12324

Answers (3)

Egor Stambakio
Egor Stambakio

Reputation: 18136

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"

Upvotes: 4

Don Bhrayan Singh
Don Bhrayan Singh

Reputation: 475

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

Upvotes: 4

kane
kane

Reputation: 6017

Yes, you can do this, but you don't really make a new type of input, you're simply creating a type that the browser/rendering engine doesn't know about and will ignore. But the CSS should apply to it as you have it.

However, I would suggest that you simply add a class to the input instead, if this is simply for styling purposes.

<input class="my-input" ...>

input.my-input {
  ...
}

Upvotes: 3

Related Questions