{"id":4024,"date":"2020-09-08T12:47:55","date_gmt":"2020-09-08T15:47:55","guid":{"rendered":"https:\/\/blog.websitego.com.br\/?p=4024"},"modified":"2021-11-18T12:09:23","modified_gmt":"2021-11-18T15:09:23","slug":"validacoes-de-campos-para-formularios-em-html5","status":"publish","type":"post","link":"https:\/\/blog.websitego.com.br\/validacoes-de-campos-para-formularios-em-html5\/","title":{"rendered":"Valida\u00e7\u00f5es de campos para formul\u00e1rios em HTML5"},"content":{"rendered":"<p><iframe title=\"Como validar campos de FORMUL\u00c1RIOS em HTML5 | WebsiteGO\" width=\"980\" height=\"551\" src=\"https:\/\/www.youtube.com\/embed\/8cZBmz51rTs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h3>Valida\u00e7\u00f5es de campos para formul\u00e1rios em HTML5<\/h3>\n<p>Voc\u00ea j\u00e1 teve problemas com spam preenchendo os campos de qualquer jeito dentro do seus formul\u00e1rios feitos com HTML5? Sim, n\u00f3s sabemos como isso \u00e9 horr\u00edvel, e por isso estamos compartilhando com voc\u00ea umas das nossas m\u00e9tricas de configura\u00e7\u00e3o dos sites dos nossos clientes. As valida\u00e7\u00f5es de campos para formul\u00e1rio em <a href=\"https:\/\/blog.websitego.com.br\/o-porque-nao-usamos-o-wordpress-para-sites-institucionais\/\">HTML5<\/a> \u00e9 somente uma das maneiras de evitar o preenchimento rob\u00f3tico, e at\u00e9 mesmo confundir um cliente que n\u00e3o leu corretamente o que deveria ser preenchido em um campo espec\u00edfico.<\/p>\n<h3>Valida\u00e7\u00f5es:<\/h3>\n<p>Ocorre muito a confus\u00e3o quando o campo \u00e9 apropriado para telefone, e-mail e at\u00e9 mesmo o nome ou sobrenome em alguns casos. A valida\u00e7\u00e3o ela permite refor\u00e7ar o que as vezes j\u00e1 vem diretamente setado no c\u00f3digo, como no caso o campo e-mail. Dessa forma estamos deixando abaixo algumas das mais importantes valida\u00e7\u00f5es que voc\u00ea pode aplicar de forma simples e r\u00e1pida em qualquer formul\u00e1rio em HTML5<\/p>\n<ul>\n<li><strong>Apenas letras:<\/strong><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;input type=\"text\" required=\"required\" name=\"text\" pattern=\"[a-zA-Z\\s]+$\" \/&gt;<\/pre>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Apenas n\u00fameros:<\/strong><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;input type=\"text\" required=\"required\" name=\"numbers\" pattern=\"[0-9]+$\" \/&gt;<\/pre>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Data:<\/strong><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;input type=\"date\" required=\"required\" maxlength=\"10\" name=\"date\" pattern=\"[0-9]{2}\\\/[0-9]{2}\\\/[0-9]{4}$\" min=\"2012-01-01\" max=\"2014-02-18\" \/&gt;<\/pre>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Hora:<\/strong><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;input type=\"time\" required=\"required\" maxlength=\"8\" name=\"hour\" pattern=\"[0-9]{2}:[0-9]{2} [0-9]{2}$\" \/&gt;<\/pre>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Telefone:<\/strong><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;input type=\"tel\" required=\"required\" maxlength=\"15\" name=\"phone\" pattern=\"[0-9]{2}-[0-9]{4,6}-[0-9]{3,4}$\" \/&gt;<\/pre>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>E-mail:<\/strong><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;input type=\"email\" required=\"required\" class=\"input-text\" name=\"email\" pattern=\"[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$\" \/&gt;<\/pre>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Desabilitar select autom\u00e1tico de campos com op\u00e7\u00e3o para selecionar:<\/strong><\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">value=\"\"  disabled selected<\/pre>\n<p>&nbsp;<\/p>\n<p>Voc\u00ea pode usar todo o <em>input<\/em> como no exemplo acima, ou apenas usar o <em>pattern=&#8221;&#8221;<\/em> isso porque em alguns casos o seu <a href=\"https:\/\/www.significados.com.br\/input\/\" target=\"_blank\" rel=\"noopener noreferrer\">input<\/a> pode necessitar de uma classe espec\u00edfica para funcionar com o estilo certo.<\/p>\n<p>Com isso voc\u00ea consegue inibir e dificultar o preenchimento incorreto do seus campos no formul\u00e1rio. Sim n\u00f3s sabemos que somente essa a\u00e7\u00e3o n\u00e3o ser\u00e1 100% eficaz contra spam, existem in\u00fameros rob\u00f4s for\u00e7ando o preenchimento a todo instante, ent\u00e3o assim como tudo na vida, precisamos evoluir constantemente os nossos m\u00e9todos.<\/p>\n<p>De toda forma voc\u00ea aplicando essas valida\u00e7\u00f5es de campos para formul\u00e1rios em HTML5 voc\u00ea come\u00e7a a desviar de spam com frequ\u00eancia em seus endere\u00e7os.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Valida\u00e7\u00f5es de campos para formul\u00e1rios em HTML5 Voc\u00ea j\u00e1 teve problemas com spam preenchendo os campos de qualquer jeito dentro<\/p>\n","protected":false},"author":3,"featured_media":4328,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"single-right-sidebar.php","format":"standard","meta":[],"categories":[32],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/posts\/4024"}],"collection":[{"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/comments?post=4024"}],"version-history":[{"count":0,"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/posts\/4024\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/media\/4328"}],"wp:attachment":[{"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/media?parent=4024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/categories?post=4024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.websitego.com.br\/wp-json\/wp\/v2\/tags?post=4024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}