{"id":12758,"date":"2023-12-31T06:35:41","date_gmt":"2023-12-31T09:35:41","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=12758"},"modified":"2023-12-31T06:36:35","modified_gmt":"2023-12-31T09:36:35","slug":"input-html","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/","title":{"rendered":"Input HTML: criando campos em um formul\u00e1rio HTML"},"content":{"rendered":"\n<p>Os formul\u00e1rios HTML desempenham um papel crucial na intera\u00e7\u00e3o com os usu\u00e1rios em p\u00e1ginas web. Dentre seus elementos fundamentais, <strong>os inputs HTML s\u00e3o ferramentas vers\u00e1teis para coletar informa\u00e7\u00f5es<\/strong>. Neste guia, exploraremos a cria\u00e7\u00e3o de inputs HTML, destacando sua import\u00e2ncia e funcionalidades.<\/p>\n\n\n\n<p><strong>II. O B\u00e1sico do Input HTML<\/strong><\/p>\n\n\n\n<p><strong>A. Tag <code>&lt;input&gt;<\/code> e Seu Papel em Formul\u00e1rios:<\/strong> A <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/\">tag<\/a> <code>&lt;input&gt;<\/code> \u00e9 um elemento fundamental em <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\">HTML<\/a>, desempenhando um papel central na cria\u00e7\u00e3o de formul\u00e1rios interativos. Respons\u00e1vel por coletar dados do usu\u00e1rio, a tag <code>&lt;input&gt;<\/code> \u00e9 vers\u00e1til e oferece diversos atributos para personalizar sua funcionalidade.<\/p>\n\n\n\n<p><strong>B. Tipos Diferentes de Inputs:<\/strong> A beleza dos inputs HTML reside na diversidade de tipos dispon\u00edveis. Estes incluem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Texto (<code>type=\"text\"<\/code>):<\/strong> Para entrada de texto simples.<\/li>\n\n\n\n<li><strong>Senha (<code>type=\"password\"<\/code>):<\/strong> Oculta os caracteres digitados, ideal para senhas.<\/li>\n\n\n\n<li><strong>Checkbox (<code>type=\"checkbox\"<\/code>):<\/strong> Permite ao usu\u00e1rio selecionar ou desselecionar uma op\u00e7\u00e3o.<\/li>\n\n\n\n<li>E muitos outros, como <code>radio<\/code>, <code>file<\/code>, <code>number<\/code>, e <code>email<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Cada tipo atende a uma finalidade espec\u00edfica, proporcionando flexibilidade na coleta de informa\u00e7\u00f5es.<\/p>\n\n\n\n<p><strong>C. Exemplo B\u00e1sico de C\u00f3digo:<\/strong> Vamos explorar um exemplo simples para entender como a tag <code>&lt;input&gt;<\/code> \u00e9 utilizada:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form&gt;\n  &lt;label for=\"username\"&gt;Nome de Usu\u00e1rio:&lt;\/label&gt;\n  &lt;input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Digite seu nome\"&gt;\n  \n  &lt;label for=\"password\"&gt;Senha:&lt;\/label&gt;\n  &lt;input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Digite sua senha\"&gt;\n  \n  &lt;input type=\"checkbox\" id=\"remember\" name=\"remember\"&gt;\n  &lt;label for=\"remember\"&gt;Lembrar-me&lt;\/label&gt;\n  \n  &lt;input type=\"submit\" value=\"Enviar\"&gt;\n&lt;\/form&gt;\n<\/code><\/pre>\n\n\n\n<p>Neste exemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>O primeiro input (<code>type=\"text\"<\/code>) coleta o nome de usu\u00e1rio.<\/li>\n\n\n\n<li>O segundo input (<code>type=\"password\"<\/code>) coleta a senha de forma segura.<\/li>\n\n\n\n<li>O terceiro input (<code>type=\"checkbox\"<\/code>) permite ao usu\u00e1rio optar por lembrar suas credenciais.<\/li>\n<\/ul>\n\n\n\n<p>Essa abordagem b\u00e1sica demonstra como a tag <code>&lt;input&gt;<\/code> \u00e9 essencial na constru\u00e7\u00e3o de <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/formulario-html\/\">formul\u00e1rios<\/a> web, proporcionando uma base s\u00f3lida para a intera\u00e7\u00e3o eficiente com os usu\u00e1rios.<\/p>\n\n\n\n<p>III. <strong>Atributos do Input HTML<\/strong><\/p>\n\n\n\n<p>A personaliza\u00e7\u00e3o dos inputs \u00e9 feita atrav\u00e9s de atributos como <code>type<\/code>, <code>name<\/code> e <code>placeholder<\/code>. Por exemplo, <code><em>type=\"password\"<\/em><\/code> cria um campo de senha. Experimente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"password\" name=\"senha\" placeholder=\"Digite sua senha\"&gt;\n<\/code><\/pre>\n\n\n\n<p>Ele ficar\u00e1 assim:<\/p>\n\n\n\n<input type=\"password\" name=\"senha\" placeholder=\"Digite sua senha\">\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>IV. <strong>Estilizando Inputs<\/strong><\/p>\n\n\n\n<p>O <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-css\/\">CSS<\/a> \u00e9 crucial para estilizar inputs. Aplique estilos b\u00e1sicos como cor de fundo e bordas para melhorar a est\u00e9tica:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>input {\n  background-color: #f2f2f2;\n  border: 1px solid #ddd;\n  padding: 8px;\n}\n<\/code><\/pre>\n\n\n\n<p>V. <strong>Valida\u00e7\u00e3o de Inputs<\/strong><\/p>\n\n\n\n<p>Utilize os atributos <code>required<\/code> e <code>pattern<\/code> para validar inputs. Por exemplo, o c\u00f3digo abaixo exige que um campo seja preenchido e siga um padr\u00e3o espec\u00edfico:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" name=\"telefone\" required pattern=\"\\d{11}\"&gt;\n<\/code><\/pre>\n\n\n\n<p>VI. <strong>Trabalhando com Formul\u00e1rios<\/strong><\/p>\n\n\n\n<p>O elemento <code><strong>&lt;form&gt;<\/strong><\/code> agrupa inputs em um formul\u00e1rio. Veja como criar um simples formul\u00e1rio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form&gt;\n  &lt;label for=\"email\"&gt;Email:&lt;\/label&gt;\n  &lt;input type=\"email\" id=\"email\" name=\"email\"&gt;&lt;br&gt;\n  &lt;input type=\"submit\" value=\"Enviar\"&gt;\n&lt;\/form&gt;\n<\/code><\/pre>\n\n\n\n<p>Visualmente ele ficar\u00e1 assim:<\/p>\n\n\n\n<form>\n  <label for=\"email\">Email:<\/label>\n  <input type=\"email\" width=\"80%\" id=\"email\" name=\"email\"><br\/>\n  <input type=\"submit\" value=\"Enviar\">\n<\/form>\n\n\n\n<div style=\"height:28px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>VII. <strong>JavaScript e Inputs<\/strong> <\/p>\n\n\n\n<p><strong>A. Introdu\u00e7\u00e3o R\u00e1pida:<\/strong> JavaScript adiciona dinamismo aos formul\u00e1rios HTML, possibilitando intera\u00e7\u00f5es interativas e valida\u00e7\u00f5es em tempo real. Ao utilizar <a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/tipos-de-funcoes-javascript\/\">JavaScript<\/a>, \u00e9 poss\u00edvel aprimorar a experi\u00eancia do usu\u00e1rio, tornando os inputs mais responsivos e adapt\u00e1veis.<\/p>\n\n\n\n<p><strong>B. Exemplo Simples de Valida\u00e7\u00e3o:<\/strong> Vamos considerar um exemplo pr\u00e1tico de como JavaScript pode ser empregado para validar um formul\u00e1rio. Suponha que tenhamos um formul\u00e1rio simples de cadastro com campos de nome e email:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form id=\"cadastroForm\"&gt;\n  &lt;label for=\"nome\"&gt;Nome:&lt;\/label&gt;\n  &lt;input type=\"text\" id=\"nome\" name=\"nome\"&gt;\n  \n  &lt;label for=\"email\"&gt;Email:&lt;\/label&gt;\n  &lt;input type=\"email\" id=\"email\" name=\"email\"&gt;\n  \n  &lt;input type=\"submit\" value=\"Cadastrar\"&gt;\n&lt;\/form&gt;\n<\/code><\/pre>\n\n\n\n<p>Este formul\u00e1rio ficaria:<\/p>\n\n\n\n<form id=\"cadastroForm\">\n  <label for=\"nome\">Nome:<\/label>\n  <input type=\"text\" id=\"nome\" name=\"nome\">\n  \n  <label for=\"email\">Email:<\/label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <input type=\"submit\" value=\"Cadastrar\">\n<\/form>\n\n\n\n<div style=\"height:28px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Agora, podemos adicionar um script JavaScript para validar se ambos os campos est\u00e3o preenchidos antes de permitir o envio do formul\u00e1rio. Adicione o seguinte script ao final do corpo do HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n  document.getElementById('cadastroForm').addEventListener('submit', function(event) {\n    var nomeInput = document.getElementById('nome');\n    var emailInput = document.getElementById('email');\n    \n    if (nomeInput.value === '' || emailInput.value === '') {\n      alert('Por favor, preencha todos os campos antes de enviar o formul\u00e1rio.');\n      event.preventDefault(); \/\/ Impede o envio do formul\u00e1rio\n    }\n  });\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Neste exemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilizamos o m\u00e9todo <code>getElementById<\/code> para obter refer\u00eancias aos inputs.<\/li>\n\n\n\n<li>Adicionamos um ouvinte de evento para o evento de envio do formul\u00e1rio (<code>submit<\/code>).<\/li>\n\n\n\n<li>Verificamos se os campos de nome e email est\u00e3o preenchidos.<\/li>\n\n\n\n<li>Se algum deles estiver vazio, exibimos um alerta e impedimos o envio do formul\u00e1rio.<\/li>\n<\/ul>\n\n\n\n<p>Este \u00e9 um exemplo b\u00e1sico de como JavaScript pode ser incorporado para validar e interagir dinamicamente com inputs em formul\u00e1rios web. Explore e adapte conforme necess\u00e1rio para atender aos requisitos espec\u00edficos de seus projetos.<\/p>\n\n\n\n<p><strong>Conclus\u00e3o:<\/strong> <\/p>\n\n\n\n<p>Este guia abordou os fundamentos dos inputs HTML, desde a cria\u00e7\u00e3o b\u00e1sica at\u00e9 a estiliza\u00e7\u00e3o e valida\u00e7\u00e3o. Pratique e experimente para aprimorar suas habilidades na constru\u00e7\u00e3o de formul\u00e1rios web interativos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os formul\u00e1rios HTML desempenham um papel crucial na intera\u00e7\u00e3o com os usu\u00e1rios em p\u00e1ginas web. Dentre seus elementos fundamentais, os inputs HTML s\u00e3o ferramentas vers\u00e1teis para coletar informa\u00e7\u00f5es. Neste guia, exploraremos a cria\u00e7\u00e3o de inputs HTML, destacando sua import\u00e2ncia e funcionalidades. II. O B\u00e1sico do Input HTML A. Tag &lt;input&gt; e Seu Papel em Formul\u00e1rios: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12784,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-12758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-criar-sites"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Input HTML: criando campos em um formul\u00e1rio HTML | Homehost<\/title>\n<meta name=\"description\" content=\"Como criar campos input em HTML. Guia simples e f\u00e1cil para usar input em seu formul\u00e1rio HTML. Abrange CSS, valida\u00e7\u00e3o Javascript e atributos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Input HTML: criando campos em um formul\u00e1rio HTML | Homehost\" \/>\n<meta property=\"og:description\" content=\"Como criar campos input em HTML. Guia simples e f\u00e1cil para usar input em seu formul\u00e1rio HTML. Abrange CSS, valida\u00e7\u00e3o Javascript e atributos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-31T09:35:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-31T09:36:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/12\/Guia-Passo-a-Passo-para-Criar-um-Input-HTML.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gustavo Gallas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gustavo Gallas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/\",\"name\":\"Input HTML: criando campos em um formul\u00e1rio HTML | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/12\/Guia-Passo-a-Passo-para-Criar-um-Input-HTML.jpg\",\"datePublished\":\"2023-12-31T09:35:41+00:00\",\"dateModified\":\"2023-12-31T09:36:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/df8002f43fc55e7f4e132abb2a6ddbc4\"},\"description\":\"Como criar campos input em HTML. Guia simples e f\u00e1cil para usar input em seu formul\u00e1rio HTML. Abrange CSS, valida\u00e7\u00e3o Javascript e atributos.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/12\/Guia-Passo-a-Passo-para-Criar-um-Input-HTML.jpg\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/12\/Guia-Passo-a-Passo-para-Criar-um-Input-HTML.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Input HTML: criando campos em um formul\u00e1rio HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/df8002f43fc55e7f4e132abb2a6ddbc4\",\"name\":\"Gustavo Gallas\",\"description\":\"Analista de sistemas, formado pela PUC-Rio. Programador, gestor de redes e diretor da empresa Homehost. Pai do B\u00f3ris, seu pet de estima\u00e7\u00e3o. Gosta de rock'n'roll, cerveja artesanal e de escrever sobre assuntos t\u00e9cnicos. Contato: gustavo.blog@homehost.com.br\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Input HTML: criando campos em um formul\u00e1rio HTML | Homehost","description":"Como criar campos input em HTML. Guia simples e f\u00e1cil para usar input em seu formul\u00e1rio HTML. Abrange CSS, valida\u00e7\u00e3o Javascript e atributos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Input HTML: criando campos em um formul\u00e1rio HTML | Homehost","og_description":"Como criar campos input em HTML. Guia simples e f\u00e1cil para usar input em seu formul\u00e1rio HTML. Abrange CSS, valida\u00e7\u00e3o Javascript e atributos.","og_url":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-12-31T09:35:41+00:00","article_modified_time":"2023-12-31T09:36:35+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/12\/Guia-Passo-a-Passo-para-Criar-um-Input-HTML.jpg","type":"image\/jpeg"}],"author":"Gustavo Gallas","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Gustavo Gallas","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/","url":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/","name":"Input HTML: criando campos em um formul\u00e1rio HTML | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/12\/Guia-Passo-a-Passo-para-Criar-um-Input-HTML.jpg","datePublished":"2023-12-31T09:35:41+00:00","dateModified":"2023-12-31T09:36:35+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/df8002f43fc55e7f4e132abb2a6ddbc4"},"description":"Como criar campos input em HTML. Guia simples e f\u00e1cil para usar input em seu formul\u00e1rio HTML. Abrange CSS, valida\u00e7\u00e3o Javascript e atributos.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/12\/Guia-Passo-a-Passo-para-Criar-um-Input-HTML.jpg","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/12\/Guia-Passo-a-Passo-para-Criar-um-Input-HTML.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Input HTML: criando campos em um formul\u00e1rio HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/df8002f43fc55e7f4e132abb2a6ddbc4","name":"Gustavo Gallas","description":"Analista de sistemas, formado pela PUC-Rio. Programador, gestor de redes e diretor da empresa Homehost. Pai do B\u00f3ris, seu pet de estima\u00e7\u00e3o. Gosta de rock'n'roll, cerveja artesanal e de escrever sobre assuntos t\u00e9cnicos. Contato: gustavo.blog@homehost.com.br"}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/12\/Guia-Passo-a-Passo-para-Criar-um-Input-HTML.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/12758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=12758"}],"version-history":[{"count":27,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/12758\/revisions"}],"predecessor-version":[{"id":12820,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/12758\/revisions\/12820"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/12784"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=12758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=12758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=12758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}