是否可以在HTML表单中创建自己的自定义输入类型？

Question

我想知道我是否可以做这样的事情： <input type="secure"> 。 我想知道是否可以为我的网站制作自定义输入类型。 我打算用它来做一些你通常不能做的事情，然后用CSS来设置它并用它做我想要的JavaScript。 这是任何一个例子：

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;
}

我目前还没有决定用JavaScript做什么，但我认为你明白了。

Answer 1

不，这就是课程的用途。 即使“技术上你可以”，你也会破坏兼容性和HTML标准。

Answer 2

您可以创建此类输入，但浏览器会将未知type值视为默认text （已记录到控制台）。 如果你检查DOM，你会看到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" 

Answer 3

是的，你可以做到这一点，但你并没有真正做出新的输入类型，你只是创建一个浏览器/渲染引擎不知道并将忽略的类型。 但CSS应该适用于它，因为你拥有它。

但是，我建议您只需在输入中添加一个类，如果这只是为了样式目的。

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

input.my-input {
  ...
}