html 表单控制宽度无效_使用HTML5控制您的表单

html 表单控制宽度无效

“永远不要相信来自用户端的数据”。

此断言是正确的，尤其是当您作为后端开发人员使用表单时。 创建网站时，您总会走出一步，必须从未来的用户那里收集一定数量的数据（名称，位置，年龄等）。 您当然已经考虑过表单，但是真正的难题是如何保护这些表单。

根据您的WebHost服务器的容量和您希望损失的时间，您可以创建一个经典表单，而不必担心数据验证等问题，让用户输入所需的废话并将其发送给您服务器并无用地填充数据库。 或者甚至可以让数据到达服务器并编写一些较长的后端函数来逐一验证它们……但是，为什么要这么做呢？

是的，您需要先验证数据，然后再将任何内容发送到服务器。 最好的方法是使用HTML5表单验证器！ 我知道我知道您正在考虑使用Javascript和JQuery进行更动态的处理……但是在使用这些工具之前，您应该知道您不一定需要使用它们进行验证。 通过使用这些惊人的验证器，可以由浏览器为您完成工作，然后为Javascript及其子孙保留最复杂的验证！！！

和我一起检查一下，这里有一些很棒的 HTML5验证器链接 ，我相信您以前并不在意。

是的，您可以在其中看到一些有趣的信息，是的，表单验证器是您从未关心的那些属性：minLength，maxLength，required，pattern…输入的某些属性（如“ type”）可帮助您强制用户坚持使用数据格式。 让我们来看一个例子。 您正在尝试获取用户的电子邮件地址，如何确保他没有在此处输入“ ask-my-mom”？

< input type = 'email' name = 'email' placeholder = 'Enter your email, please' >

试试看，您会发现，它看起来很简单！ 另一个属性是“必需”。 此属性可确保用户在提交表单之前填写指定的字段。 是的，有些朋克可能只提交了一个空表格！

您可以通过在输入中放置“ required”属性来避免这种情况，如下所示：

< input type = 'email' name = 'email' placeholder = 'Enter your email, please' required >

当然，没有任何泄漏！

您可能会告诉自己，您已经看完了！！ 但是，不，您还没有。 我想向您介绍其中最酷的表单控件：'pattern'属性！

模式是一个属性，可帮助您强加数据格式，甚至是用户必须在输入中输入的字符。 它以正则表达式（通常称为regex）作为值。 它适用于电子邮件，文本，电话甚至密码输入。 迫使用户选择一个复杂的密码，或者强迫他输入正确的电话号码，这是很好的。 如果您对正则表达式一无所知，可以通过以下链接了解更多信息并构建正则表达式： https : //regex101.com/

例如，我要强制用户选择至少包含一个大写字母，一个数字和一个特殊字符的密码。 如下所示：

< input type = "password" id = "password" name = "password" pattern = "[a-zA-Z](\d+)(\W+)" maxlength = "32" required >

您可以尝试它，也可以创建自己的正则表达式并在其他表单类型上对其进行测试。

HTML5确实为您提供了一些很好的工具来保护表单，其中包含错误消息，这些错误消息会适应错误的类型和用户的语言。 如果您是CSS爱好者，则可以根据情况使用一些伪类，例如'：required'或'：optional'来设置表单字段的样式。

提供了基本的表单控件，尽管您可能仍需要Javascript作为个性化验证器（例如，匹配的密码字段），但强烈建议您事先使用它们。 节省一些时间和一些功能，并使用HTML5表单验证器。 检查此仓库以查看其中一些的用法： https : //github.com/Luckyaremu/html-form

如果您发现回购有趣，请给它一些星星。 我们也感谢您的贡献和评论。

翻译自: https://hackernoon.com/take-control-of-your-forms-with-html5-gq7436io

html 表单控制宽度无效