我的-input--不可能这么可爱

作者：陈大鱼头github：KRISACHAN标签是我们日常开发中很常见的替换元素，但是最近在浏览whattwg和MDN的时候发现有很多相关的属性，选择器一直用的不多，所以就从这篇文章开始整理一些有趣或者实用的知识点。本文默认大家已经知道了标签的基本用法，就不做过多的基础讲解了~没想到这些选择器其实和input一样...，一共有3个类别，16个与输入相关的选项。其实它们还是挺有用的，用好它们会让我们的用户体验更好。下面分享一下这三类选择器的作用：第一种：InputControlStates选择器作用：enabled选择可用状态的元素：disabled选择不可用状态的元素：read-onlyselectsthatelementsthatnoteditable(notjust):read-writeselectsthatelementsthatareeditable(notjust):placeholder-shownselectwhentheplaceholdertextisdisplayed元素：default选择默认状态在、、和类型2：输入值状态选择器功能：选中选择处于选中状态：indeterminate选择状态不确定且的表单元素第三种：调查（InputValue-checking）选择器功能：空白选择为空value尚不被浏览器支持：valid选择表单通过验证的元素：无效选择验证失败的表单元素on:in-range选择指定范围内的:out-of-range选择不在指定范围内的:required选择需要的表单元素:optional选择可选的表单元素:user-invalid选择当用户输入但是这个值是无效的，浏览器还不支持可怕的是，除了选择器，其实和这些属性有关。除了很多相关的选择器之外，还有不同的属性可以与不同的类型结合使用。它们的作用如下：属性函数maxlength可输入的最大长度minlength可输入的最小长度输入框的大小输入框的长度readonly输入框是否为只读required输入框是否为只读ismandatory多输入框是否可以多选pattern输入框验证规则minyes输入的最小值max可以输入的最大值step输入框每次的增量输入绑定的可选值数据boxplaceholderinputbox预选文本通过以上三种类型的描述，我们对标签的相关信息有了一个大概的了解，但是你以为我是来列一个清单的吗？当然不是，还有实际操作~纯CSS实现表单提交功能先来看一张效果图。以上效果是纯CSS实现的表单提交功能。这是如何实现的？接下来直接看源码，再一步步拆分（不想看的可以直接在CV下测试源码~）账户：请输入正确的账号
密码：请输入正确的密码
第一步：编写基本结构首先我们来编写基本结构，代码如下：帐号：请输入正确的acc数量
密码：请输入正确的密码
看看吧，嗯，挺简单的，就是常用的东西咦，不对，这是什么图案？这里重点分享pattern属性，它是用来验证input[value]是否合法的属性。里面的内容和值匹配，语法是正则语法。示例如下：当然是不同的输入[type]默认也会有对应的pattern，比如input[type="email"]默认匹配如下规则：/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/第2步：关键功能输入[类型=“文本”]：无效?输入[类型=“提交”]，输入[类型=“密码”]：无效?输入[类型=“提交”]{显示：无;}输入[需要]:focus:invalid+span{display:inline;}input[required]:empty+span{display:none;}input[required]:invalid:not(:placeholder-shown)+span{display:inline;}的以上是核心交互的实现。首先，第一类是保证两个输入框在不通过时隐藏，即当输入框的值为空或者不满足验证规则时，提交按钮隐藏。第二类和第三类是控制当用户在输入框中输入内容时，如果不符合验证规则，则显示错误信息，否则隐藏。第四个类使用占位符是否存在来控制错误信息的可见性。如果不显示占位符，则证明用户正在键入，根据用户输入的值判断错误信息。否则，它是隐藏的。状态切换我们上面提到了一个选择器：indeterminate，用于选择状态不确定的表单元素和。玩过扫雷的都知道，右键不仅可以选择红旗，还可以选择问号，也就是Selected，但不确定；和悬而未决的状态类型的承诺，在解决和拒绝之间。添加:indeterminate会给我们带来很多有趣的体验。首先让我们看看它的用例。基本用法先看效果代码如下：

点击左边这里其实没有复杂的实现，只是一个中间状态的判断，很容易实现三种状态的切换收音机。头皮发麻先看效果（这个展示的效果来自BenSzabo的codepen，有兴趣的可以仔细研究一下，我什么时候能和boss一样好，呵呵~）的绑定输入框可以先选择值，看看效果。其实代码很简单：这里的原理是使用绑定需要下拉的数据列表。那么当我们要实现输入关联时，我们也可以通过修改的子元素来实现，而不用写一大堆操作函数。综上所述，标签还有很多有趣的功能可以挖掘。不同的类型，搭配不同的选择器和属性，可以有更多精彩的体验。如果你有兴趣，不妨放开脑洞，自己实现一些有趣的功能，或者你有什么有趣的想法，可以在下方给鱼头留言或者加鱼头微信“krisChans95”聊天。如果你喜欢讨论技术，或者对本文有什么意见和建议，非常欢迎你加鱼头微信好友一起讨论。当然，鱼头也非常希望能和你聊聊生活，聊聊爱好，聊聊世界。鱼头微信公众号是：krisChans95，也可以扫描二维码加好友，备注“顺丰”即可