{"id":4398,"date":"2022-08-19T18:37:17","date_gmt":"2022-08-19T21:37:17","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=4398"},"modified":"2022-08-19T18:39:29","modified_gmt":"2022-08-19T21:39:29","slug":"php-aula-34-pegando-valores-dos-elementos-de-um-formulario-html","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=4398","title":{"rendered":"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML"},"content":{"rendered":"\n<p>No artigo passado, <a href=\"https:\/\/categoriaoutros.com.br\/?p=4313\">Aula 33<\/a>, vimos como validar e sanitizar as informa\u00e7\u00f5es recebidas pelo PHP do formul\u00e1rio HTML.<\/p>\n\n\n\n<p>Hoje iremos expandir nosso conhecimento sobre campos, bot\u00f5es e outros elementos que fazem parte de um formul\u00e1rio HTML.<\/p>\n\n\n\n<p>Um formul\u00e1rio pode conter um ou mais dos seguintes elementos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>&lt;label><\/code><\/li><li><code>&lt;input><\/code><\/li><li><code>&lt;select><\/code> com <code>&lt;option><\/code> e <code>&lt;optgroup><\/code><\/li><li><code>&lt;textarea><\/code><\/li><li><code>&lt;button><\/code><\/li><li><code>&lt;fieldset><\/code> e <code>&lt;legend><\/code><\/li><li><code>&lt;datalist><\/code><\/li><li><code>&lt;output><\/code><\/li><li>bot\u00e3o de r\u00e1dio(radio button)<\/li><li>caixa de sele\u00e7\u00e3o(checkbox)<\/li><\/ul>\n\n\n\n<p>O elemento mais usado em umm form \u00e9 o input.<\/p>\n\n\n\n<p>Iremos focar esse estudo na linguagem PHP, como ele pega os valores retornados dum formul\u00e1rio.<\/p>\n\n\n\n<p>Obs.: O nome da p\u00e1gina dos exemplos abaixo \u00e9 index.php e o formul\u00e1rio envia, usando <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">action=<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">&#8220;index.php&#8221;<\/mark>, os dados para a pr\u00f3pria p\u00e1gina. N\u00e3o para outra!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;label&gt;<\/h2>\n\n\n\n<p>pronunci\u00e1-se &#8220;leibel&#8221;.<\/p>\n\n\n\n<p>Label \u00e9 apenas um r\u00f3tulo, uma identifica\u00e7\u00e3o para um outro elemento. Ele n\u00e3o retorna nenhum valor.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n\n  <font color=\"#2A7BDE\">&lt;form<\/font> <font color=\"#33C7DE\">action=<\/font><font color=\"#A2734C\">\"index.php\"<\/font> <font color=\"#33C7DE\">method=<\/font><font color=\"#A2734C\">\"post\"<\/font> <font color=\"#2A7BDE\">&gt;<\/font> \n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\"><strong>nome<\/strong><\/mark>\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>Nome<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">\"text\"<\/font> <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\"><strong>nome<\/strong><\/mark>\"<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">\"nome\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n  <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n\n  <font color=\"#33C7DE\">&lt;?php<\/font>\n    <font color=\"#2A7BDE\">echo<\/font> <font color=\"#F66151\">$_POST<\/font>&#91;<font color=\"#A2734C\">'nome'<\/font>];\n  <font color=\"#33C7DE\">?&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;\/html&gt;<\/font>\n<\/pre><\/code><\/pre>\n\n\n\n<p>Temos que colocar dentro de &#8220;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">for=&#8230;<\/mark>&#8221; o valor de &#8220;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">id=&#8230;<\/mark>&#8220;, em nosso caso o valor \u00e9 <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">nome<\/mark>. Assim o vinculamos o label ao campo de texto com id=nome.<\/p>\n\n\n\n<p><strong>Resultado:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/0c\/Php_form_labal.webp\" alt=\"\"\/><\/figure>\n\n\n\n<p>Acima, digitei &#8220;maria&#8221; e teclei Enter. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Abaixo \u00e9 outra forma de usar um &lt;label>. Abaixo usamos com um checkbox que veremos mais adiante:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label>\n    &lt;input type=\"checkbox\" name=\"concordo\"> Eu Concordo\n&lt;\/label><\/code><\/pre>\n\n\n\n<p>Nesse caso,  n\u00e3o precisamos usar o<strong> id <\/strong>para a caixa de sele\u00e7\u00e3o e o atributo for para o <strong>&lt;label>.<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;Input type=&#8221;text&#8221;&gt;<\/h2>\n\n\n\n<p>J\u00e1 usamos bastante esse elemento. Inclusive acabamos de us\u00e1-lo no exemplo acima.<\/p>\n\n\n\n<p>Abaixo est\u00e1 a explica\u00e7\u00e3o e o nosso c\u00f3digo:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>primeiramente, colocamos em action=&#8221; &#8221;  o nome da p\u00e1gina para onde queremos envi\u00e1-las. Nesse caso envio as informa\u00e7\u00f5es para a pr\u00f3pria p\u00e1gina, isto \u00e9, index.php. <\/li><li>Veja qual o m\u00e9todo de envio do formul\u00e1rio, se POST ou GET. Em nosso caso \u00e9 POST ent\u00e3o usamos $_POST[ ] para receber o valor no PHP. Se fosse GET usar\u00edamos $_GET[  ].<\/li><li>o nome do elemento <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">&lt;input type=&#8221;text&#8221; &#8230;&gt;<\/mark> acima \u00e9 &#8220;nome&#8221;(<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">name<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">=&#8221;nome&#8221;<\/mark>), ent\u00e3o usamos<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n\n  <font color=\"#2A7BDE\">&lt;form<\/font> <font color=\"#33C7DE\">action=<\/font><font color=\"#A2734C\">\"index.php\"<\/font> <font color=\"#33C7DE\">method=<\/font><font color=\"#A2734C\">\"post\"<\/font> <font color=\"#2A7BDE\">&gt;<\/font> \n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">\"nome\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>Nome<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">\"text\"<\/font> <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">\"nome\"<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">\"nome\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n  <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">  <font color=\"#33C7DE\">&lt;?php<\/font>\n    <font color=\"#2A7BDE\">echo<\/font> <font color=\"#F66151\">$_POST<\/font>&#91;<font color=\"#A2734C\">'nome'<\/font>];\n  <font color=\"#33C7DE\">?&gt;<\/font><\/mark>\n\n<font color=\"#2A7BDE\">&lt;\/html&gt;<\/font><\/pre><\/code><\/pre>\n\n\n\n<p>Al\u00e9m de type=&#8221;text&#8221;, podemos ter:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>&lt;input type=&#8221;radio&#8221;&gt;<\/strong> Exibe um bot\u00e3o de r\u00e1dio<\/li><li><strong>&lt;input type=&#8221;checkbox&#8221;&gt;<\/strong> Exibe uma caixa de sele\u00e7\u00e3o<\/li><li><strong>&lt;input type=&#8221;submit&#8221;&gt;<\/strong> Exibe um bot\u00e3o de envio<\/li><li><strong>&lt;input type=&#8221;button&#8221;&gt;<\/strong> Exibe um bot\u00e3o clic\u00e1vel<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Sele\u00e7\u00e3o &lt;select&#8230;&gt;&lt;\/select&gt;<\/h2>\n\n\n\n<p>O elemento &lt;select&gt; cria uma lista suspensa.<\/p>\n\n\n\n<p>Para pegar o valor de uma caixa de sele\u00e7\u00e3o tamb\u00e9m usamos o valor de name: <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">name=&#8221;frutas&#8221;<\/mark><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n\n  <font color=\"#2A7BDE\">&lt;form<\/font> <font color=\"#33C7DE\">action=<\/font><font color=\"#A2734C\">\"index.php\"<\/font> <font color=\"#33C7DE\">method=<\/font><font color=\"#A2734C\">\"post\"<\/font> <font color=\"#2A7BDE\">&gt;<\/font> \n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">\"frutas\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>Escolha uma Fruta:<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;select<\/font> <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">\"frutas\"<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">\"frutas\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n      <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">\"manga\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>Manga<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n      <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">\"goiaba\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>Goiaba<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n      <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">\"melacia\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>Melancia<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n      <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">\"abacaxi\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>Abacaxi<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n      <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">\"melao\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>Mel\u00e3o<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;\/select&gt;<\/font>\n\n    <font color=\"#2A7BDE\">&lt;button&gt;<\/font>Enviar<font color=\"#2A7BDE\">&lt;\/button&gt;<\/font>\n  <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n\n  <font color=\"#33C7DE\">&lt;?php<\/font>\n    <font color=\"#2A7BDE\">echo<\/font> <font color=\"#A2734C\">\"A fruta escolhida \u00e9: &lt;mark&gt;\"<\/font> . <font color=\"#F66151\">$_POST<\/font>&#91;<font color=\"#A2734C\">'frutas'<\/font>] . <font color=\"#A2734C\">\"&lt;\/mark&gt;\"<\/font>;\n  <font color=\"#33C7DE\">?&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;\/html&gt;<\/font><\/pre><\/code><\/pre>\n\n\n\n<p>Veja o resultado:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/1\/1e\/Php_form_select_html.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>DICAS:<\/strong><\/p>\n\n\n\n<p>Podemos usar <strong>size<\/strong> para deixar vis\u00edvel mais de uma op\u00e7\u00e3o e <strong>multiple<\/strong> para habilitar a escolha de mais de uma op\u00e7\u00e3o ao clicar segurando control.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;select id=\"frutas\" name=\"frutas\" <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">size=\"4<\/mark>\" <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">multiple<\/mark>&gt;\n.....<\/code><\/pre>\n\n\n\n<p>Veja o resultado:<\/p>\n\n\n\n<html>\n\n<body>\n\n  <form action=\"index.php\" method=\"post\" > \n         <select id=\"frutas\" name=\"frutas\" size=4 multiple>\n          <option value=\"manga\">Manga<\/option>\n          <option value=\"goiaba\">Goiaba<\/option>\n          <option value=\"melacia\">Melancia<\/option>\n          <option value=\"abacaxi\">Abacaxi<\/option>\n          <option value=\"melao\">Mel\u00e3o<\/option>\n        <\/select>\n\n        <button>Enviar<\/button>\n  <\/form>\n\n<\/body>\n\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;select> com &lt;optgroup><\/h2>\n\n\n\n<p>Tem a mesma fun\u00e7\u00e3o do select acima mas separa em grupos as op\u00e7\u00f5es<\/p>\n\n\n\n<pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;form<\/font> <font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;a&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Valores: <font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;select<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;feira&quot;<\/font> <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;feira&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n      <font color=\"#2A7BDE\">&lt;optgroup<\/font> <font color=\"#33C7DE\">label=<\/font><font color=\"#A2734C\">&quot;frutas&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n        <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;manga&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Manga<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n        <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;goiaba&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Goiaba<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n        <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;melancia&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Melancia<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n        <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;mamao&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Mel\u00e3o<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n      <font color=\"#2A7BDE\">&lt;\/optgroup&gt;<\/font>\n\n      <font color=\"#2A7BDE\">&lt;optgroup<\/font> <font color=\"#33C7DE\">label=<\/font><font color=\"#A2734C\">&quot;verduras&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n        <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;coentro&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Coentro<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n        <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;alface&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Alface<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n        <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;cenoura&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Cenoura<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n        <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;tomate&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Tomate<font color=\"#2A7BDE\">&lt;\/option&gt;<\/font>\n      <font color=\"#2A7BDE\">&lt;\/optgroup&gt;<\/font>\n\n\n    <font color=\"#2A7BDE\">&lt;\/select&gt;<\/font>\n\n   <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n<font color=\"#2A7BDE\">&lt;html&gt;<\/font><\/pre>\n\n\n\n<p>Resultado:<\/p>\n\n\n\n<html>\n <body>\n   <form >\n    <label for=\"a\">Valores: <\/label>\n    <select name=\"feira\" id=\"feira\">\n      <optgroup label=\"frutas\">\n        <option value=\"manga\">Manga<\/option>\n        <option value=\"goiaba\">Goiaba<\/option>\n        <option value=\"melancia\">Melancia<\/option>\n        <option value=\"mamao\">Mel\u00e3o<\/option>\n      <\/optgroup>\n\n      <optgroup label=\"verduras\">\n        <option value=\"coentro\">Coentro<\/option>\n        <option value=\"alface\">Alface<\/option>\n        <option value=\"cenoura\">Cenoura<\/option>\n        <option value=\"tomate\">Tomate<\/option>\n      <\/optgroup>\n\n\n    <\/select>\n\n   <\/form>\n <\/body>\n<html>\n\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;textarea&#8230;&gt;&lt;\/textarea&gt;<\/h2>\n\n\n\n<p>O elemento &lt;textarea&gt; cria um campo de entrada de v\u00e1rias linhas, uma \u00e1rea de texto<\/p>\n\n\n\n<p>Podemos definir o tamanho do  textarea usando <strong>rows<\/strong>(linhas) e <strong>cols<\/strong>(colunas).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><pre>  <font color=\"#2A7BDE\">&lt;form<\/font> <font color=\"#33C7DE\">action=<\/font><font color=\"#A2734C\">\"index.php\"<\/font> <font color=\"#33C7DE\">method=<\/font><font color=\"#A2734C\">\"post\"<\/font> <font color=\"#2A7BDE\">&gt;<\/font> \n    <font color=\"#2A7BDE\">&lt;textarea<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">\"<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">mensagem<\/mark>\"<\/font> <font color=\"#33C7DE\">rows=<\/font><font color=\"#A2734C\">\"10\"<\/font> <font color=\"#33C7DE\">cols=<\/font><font color=\"#A2734C\">\"30\"<\/font><font color=\"#2A7BDE\">&gt;&lt;\/textarea&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;button&gt;<\/font>Enviar<font color=\"#2A7BDE\">&lt;\/button&gt;<\/font>\n  <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font><\/pre><\/code><\/pre>\n\n\n\n<p>Veja o resultado:<\/p>\n\n\n\n<html>\n\n<body>\n\n  <form action=\"index.php\" method=\"post\" > \n    <textarea name=\"mensagem\" rows=\"10\" cols=\"30\"><\/textarea>\n    <button>Enviar<\/button>\n  <\/form>\n\n<\/body>\n\n<\/html>\n\n\n\n<p>Para pegar texto acima usamos $_POST[&#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">mensagem<\/mark>&#8216;]. <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;button&gt;(Bot\u00e3o)<\/h2>\n\n\n\n<p>Abaixo criamos um bot\u00e3o com um alerta(<em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-cyan-bluish-gray-color\">onclick=&#8221;alert(&#8216;Oi Mundo!&#8217;)&#8221;<\/mark><\/em>) em javascript, apenas para enfeitar um pouco<\/p>\n\n\n\n<pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n\n  <font color=\"#2A7BDE\">&lt;form<\/font> <font color=\"#33C7DE\">action=<\/font><font color=\"#A2734C\">\"index.php\"<\/font> <font color=\"#33C7DE\">method=<\/font><font color=\"#A2734C\">\"post\"<\/font> <font color=\"#2A7BDE\">&gt;<\/font> \n    <font color=\"#2A7BDE\">&lt;button<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">\"button\"<\/font> <font color=\"#33C7DE\">onclick=<\/font><font color=\"#A2734C\">\"alert('Oi Mundo!')\"<\/font><font color=\"#2A7BDE\">&gt;<\/font>Clique em mim!<font color=\"#2A7BDE\">&lt;\/button&gt;<\/font>\n  <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n\n<font color=\"#2A7BDE\">&lt;\/html&gt;<\/font><\/pre>\n\n\n\n<p>Clique no bot\u00e3o abaixo para ver o alerta javascript:<\/p>\n\n\n\n<html>\n\n<body>\n\n  <form action=\"index.php\" method=\"post\" > \n    <button type=\"button\" onclick=\"alert('Oi Mundo!')\">Clique em mim!<\/button>\n  <\/form>\n\n<\/body>\n\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;fieldset> e &lt;legend><\/h2>\n\n\n\n<p>Esses campos n\u00e3o retornam valores para $_get[&#8216; &#8216;]  e  $_POST[&#8216; &#8216;] do PHP mas \u00e9 bom citarmos.<\/p>\n\n\n\n<p><strong>&lt;fieldset&gt;<\/strong> \u00e9 usado para agrupar em um formul\u00e1rio.<\/p>\n\n\n\n<p><strong>&lt;legend&gt;<\/strong> cria uma legenda\/r\u00f3tulo para o elemento &lt;fieldset&gt;.<\/p>\n\n\n\n<p>Veja:<\/p>\n\n\n\n<pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;form<\/font>  <font color=\"#33C7DE\">action=<\/font><font color=\"#A2734C\">&quot;&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;fieldset&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;legend&gt;<\/font>Dados Pessoais<font color=\"#2A7BDE\">&lt;\/legend&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;nome&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font> Nome: <font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;text&quot;<\/font> <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;nome&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;nome&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;idade&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font> Idade: <font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;text&quot;<\/font> <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;idade&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;idade&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;submit&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;enviar&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;\/fieldset&gt;<\/font> \n   <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n<font color=\"#2A7BDE\">&lt;html&gt;<\/font><\/pre>\n\n\n\n<p>Resultado:<\/p>\n\n\n\n<html>\n <body>\n   <form  action=\"\">\n    <fieldset>\n       <legend>Dados Pessoais<\/legend>\n       <label for=\"nome\"> Nome: <\/label>\n       <input type=\"text\" id=\"nome\" name=\"nome\">\n       <label for=\"idade\"> Idade: <\/label>\n       <input type=\"text\" id=\"idade\" name=\"idade\">\n       <input type=\"submit\" name=\"enviar\">\n    <\/fieldset> \n   <\/form>\n <\/body>\n<html>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;datalist><\/h2>\n\n\n\n<p>Ao usar &lt;datalist> os usu\u00e1rios ver\u00e3o uma lista suspensa de op\u00e7\u00f5es predefinidas \u00e0 medida que inserem dados, ou seja, fornece um autocompletar.<\/p>\n\n\n\n<p>Abaixo, o <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">list=&#8221;navegador&#8221;<\/mark> tem que ter o mesmo valor que o<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\"> id=&#8221;navegador&#8221;<\/mark> <\/p>\n\n\n\n<pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;form<\/font>  <font color=\"#33C7DE\">action=<\/font><font color=\"#A2734C\">&quot;\/index.php&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;navegadores&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font> Navegadores: <font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">list=<\/font><font color=\"#A2734C\">&quot;navegador&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;navegadores&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;navegadores&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n\n    <font color=\"#2A7BDE\">&lt;datalist<\/font> <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;navegador&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;Chrome&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;Opera&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;Firefox&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n       <font color=\"#2A7BDE\">&lt;option<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;Edge&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;\/datalist&gt;<\/font>\n\n   <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n<font color=\"#2A7BDE\">&lt;html&gt;<\/font><\/pre>\n\n\n\n<p>Clique no bot\u00e3o abaixo e fa\u00e7a um teste:<\/p>\n\n\n\n<html>\n <body>\n   <form  action=\"\/index.php\">\n       <label for=\"navegadores\"> Navegadores: <\/label>\n       <input list=\"navegador\"  id=\"navegadores\" name=\"navegadores\">\n\n    <datalist id=\"navegador\">\n       <option value=\"Chrome\">\n       <option value=\"Opera\">\n       <option value=\"Firefox\">\n       <option value=\"Edge\">\n    <\/datalist>\n\n   <\/form>\n <\/body>\n<html>\n\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">&lt;output>&lt;\/output><\/h2>\n\n\n\n<p>A tag &lt;output> \u00e9 usada para representar o resultado de um c\u00e1lculo (como um realizado por um script).<\/p>\n\n\n\n<p>Abaixo usamos range para nosso input que nada mais \u00e9 que uma bonita barrinha. <\/p>\n\n\n\n<pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;form<\/font> \n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;a&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>Valores: <font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;range&quot;<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;0&quot;<\/font> <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;a&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;output<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;x&quot;<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;b&quot;<\/font> <font color=\"#2A7BDE\">&gt;<\/font>   <font color=\"#2A7BDE\">&lt;\/output&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n<font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n<\/pre>\n\n\n\n<p>Resultado:<\/p>\n\n\n\n<html>\n <body>\n   <form oninput=\"x.value=parseInt(a.value)\" >\n    <label for=\"a\">Valores: <\/label>\n    <input type=\"range\" value=\"0\" id=\"a\">\n    <output name=\"x\" for=\"b\" >   <\/output>\n   <\/form>\n <\/body>\n<html>\n\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Bot\u00f5es de R\u00e1dio(Radio Buttons) com &lt;input type=&#8221;radio&#8221;><\/h2>\n\n\n\n<p>O &lt;input type=&#8221;radio&#8221;> cria um bot\u00e3o de op\u00e7\u00e3o.<\/p>\n\n\n\n<p>bot\u00f5es de \u00e1udio permitem que um usu\u00e1rio selecione UMA de um n\u00famero limitado de op\u00e7\u00f5es.<\/p>\n\n\n\n<p>Abaixo o name=&#8221;ano&#8221; tem que ter o mesmo valor em todos os bot\u00f5es de r\u00e1dio<\/p>\n\n\n\n<pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;h2&gt;<\/font>Qual o ano atual?<font color=\"#2A7BDE\">&lt;\/h2&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;form<\/font> <font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;radio&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2021&quot;<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2021&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2021&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2021<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;radio&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2022&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2022&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2022&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2022<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;radio&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2023&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2023&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2024&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2024<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;radio&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2024&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2024&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2025&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2025<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;radio&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2025&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2025&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n\n   <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n<font color=\"#2A7BDE\">&lt;html&gt;<\/font><\/pre>\n\n\n\n<p>Resultado:<\/p>\n\n\n\n<html>\n <body>\n   <h2>Qual o ano atual?<\/h2>\n   <form >\n    <input type=\"radio\" name=\"ano\"  id=\"ano2021\" value=\"2021\">\n    <label for=\"ano2021\">2021<\/label>\n    <input type=\"radio\" name=\"ano\"  id=\"ano2022\"  value=\"2022\">\n    <label for=\"ano2022\">2022<\/label>\n    <input type=\"radio\" name=\"ano\"  id=\"ano2023\"  value=\"2023\">\n    <label for=\"ano2024\">2024<\/label>\n    <input type=\"radio\" name=\"ano\"  id=\"ano2024\"  value=\"2024\">\n    <label for=\"ano2025\">2025<\/label>\n    <input type=\"radio\" name=\"ano\"  id=\"ano2025\"  value=\"2025\">\n\n   <\/form>\n <\/body>\n<html>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Caixa de Sele\u00e7\u00e3o(Check Box) &lt;input type=&#8221;checkbox&#8221;><\/h2>\n\n\n\n<p>As caixas de sele\u00e7\u00e3o permitem que um usu\u00e1rio selecione ZERO ou MAIS op\u00e7\u00f5es.<\/p>\n\n\n\n<p>Podemos digitar os inputs com name=&#8221;&#8221; assim para pegarmos somente um valor<\/p>\n\n\n\n<pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;h2&gt;<\/font>Quais os anos mais legais da sua vida?<font color=\"#2A7BDE\">&lt;\/h2&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;form<\/font> <font color=\"#33C7DE\">action=<\/font><font color=\"#A2734C\">&quot;index.php&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2021&quot;<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2021&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2021&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2021<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2022&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2022&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2022&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2022<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2023&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2023&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2023&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2023<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2024&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2024&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2024&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2024<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2025&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2025&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2025&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2025<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;submit&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n\n   <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n\n  <font color=\"#33C7DE\">&lt;?php<\/font>\n    <font color=\"#2A7BDE\">echo<\/font>  <font color=\"#F66151\">$_GET<\/font>[<font color=\"#A2734C\">&apos;ano&apos;<\/font>];\n  <font color=\"#33C7DE\">?&gt;<\/font>\n\n <font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n<font color=\"#2A7BDE\">&lt;html&gt;<\/font><\/pre>\n\n\n\n<p>Ou assim para pegarmos toda lista dos selecionados<\/p>\n\n\n\n<pre><font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n <font color=\"#2A7BDE\">&lt;body&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;h2&gt;<\/font>Quais os anos mais legais da sua vida?<font color=\"#2A7BDE\">&lt;\/h2&gt;<\/font>\n   <font color=\"#2A7BDE\">&lt;form<\/font> <font color=\"#33C7DE\">action=<\/font><font color=\"#A2734C\">&quot;index.php&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano[]&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2021&quot;<\/font> <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2021&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2021&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2021<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano[]&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2022&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2022&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2022&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2022<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano[]&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2023&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2023&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2023&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2023<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano[]&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2024&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2024&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2024&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2024<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;checkbox&quot;<\/font> <font color=\"#33C7DE\">name=<\/font><font color=\"#A2734C\">&quot;ano[]&quot;<\/font>  <font color=\"#33C7DE\">id=<\/font><font color=\"#A2734C\">&quot;ano2025&quot;<\/font>  <font color=\"#33C7DE\">value=<\/font><font color=\"#A2734C\">&quot;2025&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;label<\/font> <font color=\"#33C7DE\">for=<\/font><font color=\"#A2734C\">&quot;ano2025&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>2025<font color=\"#2A7BDE\">&lt;\/label&gt;<\/font>\n    <font color=\"#2A7BDE\">&lt;input<\/font> <font color=\"#33C7DE\">type=<\/font><font color=\"#A2734C\">&quot;submit&quot;<\/font><font color=\"#2A7BDE\">&gt;<\/font>\n\n   <font color=\"#2A7BDE\">&lt;\/form&gt;<\/font>\n\n  <font color=\"#33C7DE\">&lt;?php<\/font>\n    <font color=\"#2A7BDE\">echo<\/font>  <font color=\"#F66151\">$_GET<\/font>[<font color=\"#A2734C\">&apos;ano&apos;<\/font>];\n  <font color=\"#33C7DE\">?&gt;<\/font>\n\n <font color=\"#2A7BDE\">&lt;\/body&gt;<\/font>\n<font color=\"#2A7BDE\">&lt;html&gt;<\/font>\n<\/pre>\n\n\n\n<p>Usamos php desse modo para pegarmos os valores<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\"> &lt;?php\n        echo  var_dump($_GET&#91;'ano']);\n  ?>\n<\/mark>\nou podemos usar o \u00edndice para pegar somente um item do array\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\"> &lt;?php\n        foreach($_GET&#91;'ano'] as  $a)\n                echo $a . \"&lt;br>\"  ; \n  ?><\/mark>\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">\n<\/mark>\n\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Caixa de Sele\u00e7\u00e3o(Check Box)<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Caixa de Sele\u00e7\u00e3o(Check Box)<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Caixa de Sele\u00e7\u00e3o(Check Box)<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>H\u00e1 elementos em um formul\u00e1rio que n\u00e3o possuem um um &#8220;label&#8221; ent\u00e3o devemos usar o elemento &lt;label> <\/p>\n\n\n\n<p>O valor do atributo <strong>for<\/strong> do elemento <strong>&lt;label><\/strong> \u00e9 deve ser igual ao valor do atributo<strong> id <\/strong>da caixa do elemento que queremos associar. Ao associar um <strong>&lt;label><\/strong> a uma elemento, podemos clicar no r\u00f3tulo do <strong>&lt;label><\/strong> para marcar ou desmarcar esse elemento.<\/p>\n\n\n\n<p>Lembre-se tamb\u00e9m que colocamos dentro de $_GET[ ] ou  $_POST[ ] o conte\u00fado de name=&#8221;&#8230;&#8221; dos elementos para  pegar  o valor retornado.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>No artigo passado, Aula 33, vimos como validar e sanitizar as informa\u00e7\u00f5es recebidas pelo PHP do formul\u00e1rio HTML. Hoje iremos expandir nosso conhecimento sobre campos, bot\u00f5es e outros elementos que fazem parte de um formul\u00e1rio HTML. Um formul\u00e1rio pode conter um ou mais dos seguintes elementos: &lt;label> &lt;input> &lt;select> com &lt;option> e &lt;optgroup> &lt;textarea> &lt;button>&#8230;<\/p>\n<p class=\"more-link-wrap\"><a href=\"https:\/\/categoriaoutros.com.br\/?p=4398\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &ldquo;PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML&rdquo;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":3776,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1622],"tags":[2027,2023,2026,2022,2024,2028,2025,2021,2029,2020,1623],"class_list":["post-4398","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informatica-dicas","category-php","tag-button","tag-datalist","tag-fieldset-e-legend","tag-input","tag-label","tag-output","tag-select-com-option-e-optgroup","tag-textarea","tag-botao-de-radioradio-button","tag-elementos-de-formulario-html","tag-php"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML - Categoria Outros<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/categoriaoutros.com.br\/?p=4398\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML - Categoria Outros\" \/>\n<meta property=\"og:description\" content=\"No artigo passado, Aula 33, vimos como validar e sanitizar as informa\u00e7\u00f5es recebidas pelo PHP do formul\u00e1rio HTML. Hoje iremos expandir nosso conhecimento sobre campos, bot\u00f5es e outros elementos que fazem parte de um formul\u00e1rio HTML. Um formul\u00e1rio pode conter um ou mais dos seguintes elementos: &lt;label&gt; &lt;input&gt; &lt;select&gt; com &lt;option&gt; e &lt;optgroup&gt; &lt;textarea&gt; &lt;button&gt;...Read More &ldquo;PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML&rdquo; &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/categoriaoutros.com.br\/?p=4398\" \/>\n<meta property=\"og:site_name\" content=\"Categoria Outros\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/categoriaoutros\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-19T21:37:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-19T21:39:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2022\/06\/php_logo.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"184\" \/>\n\t<meta property=\"og:image:height\" content=\"184\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Categoria: Outros\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:site\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Categoria: Outros\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=4398#article\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=4398\"},\"author\":{\"name\":\"Categoria: Outros\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\"},\"headline\":\"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML\",\"datePublished\":\"2022-08-19T21:37:17+00:00\",\"dateModified\":\"2022-08-19T21:39:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=4398\"},\"wordCount\":957,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"keywords\":[\"&lt;button&gt;\",\"&lt;datalist&gt;\",\"&lt;fieldset&gt; e &lt;legend&gt;\",\"&lt;input&gt;\",\"&lt;label&gt;\",\"&lt;output&gt;\",\"&lt;select&gt; com &lt;option&gt; e &lt;optgroup&gt;\",\"&lt;textarea&gt;\",\"bot\u00e3o de r\u00e1dio(radio button)\",\"elementos de formul\u00e1rio html\",\"php\"],\"articleSection\":[\"Inform\u00e1tica\",\"PHP\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=4398#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=4398\",\"url\":\"https:\/\/categoriaoutros.com.br\/?p=4398\",\"name\":\"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML - Categoria Outros\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\"},\"datePublished\":\"2022-08-19T21:37:17+00:00\",\"dateModified\":\"2022-08-19T21:39:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=4398#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=4398\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=4398#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/categoriaoutros.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"name\":\"Categoria Outros\",\"description\":\"Assuntos Diversos\",\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/categoriaoutros.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\",\"name\":\"Categoria Outros\",\"alternateName\":\"Categoria Outros\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"contentUrl\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Categoria Outros\"},\"image\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/categoriaoutros\",\"https:\/\/twitter.com\/CategoriaOutros\",\"https:\/\/br.pinterest.com\/CategoriaOutros\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\",\"name\":\"Categoria: Outros\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"caption\":\"Categoria: Outros\"},\"sameAs\":[\"http:\/\/categoriaoutros.com.br\"],\"url\":\"https:\/\/categoriaoutros.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML - Categoria Outros","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:\/\/categoriaoutros.com.br\/?p=4398","og_locale":"pt_BR","og_type":"article","og_title":"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML - Categoria Outros","og_description":"No artigo passado, Aula 33, vimos como validar e sanitizar as informa\u00e7\u00f5es recebidas pelo PHP do formul\u00e1rio HTML. Hoje iremos expandir nosso conhecimento sobre campos, bot\u00f5es e outros elementos que fazem parte de um formul\u00e1rio HTML. Um formul\u00e1rio pode conter um ou mais dos seguintes elementos: &lt;label> &lt;input> &lt;select> com &lt;option> e &lt;optgroup> &lt;textarea> &lt;button>...Read More &ldquo;PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML&rdquo; &raquo;","og_url":"https:\/\/categoriaoutros.com.br\/?p=4398","og_site_name":"Categoria Outros","article_publisher":"https:\/\/www.facebook.com\/categoriaoutros","article_published_time":"2022-08-19T21:37:17+00:00","article_modified_time":"2022-08-19T21:39:29+00:00","og_image":[{"width":184,"height":184,"url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2022\/06\/php_logo.webp","type":"image\/webp"}],"author":"Categoria: Outros","twitter_card":"summary_large_image","twitter_creator":"@CategoriaOutros","twitter_site":"@CategoriaOutros","twitter_misc":{"Escrito por":"Categoria: Outros","Est. tempo de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/categoriaoutros.com.br\/?p=4398#article","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/?p=4398"},"author":{"name":"Categoria: Outros","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40"},"headline":"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML","datePublished":"2022-08-19T21:37:17+00:00","dateModified":"2022-08-19T21:39:29+00:00","mainEntityOfPage":{"@id":"https:\/\/categoriaoutros.com.br\/?p=4398"},"wordCount":957,"commentCount":0,"publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"keywords":["&lt;button&gt;","&lt;datalist&gt;","&lt;fieldset&gt; e &lt;legend&gt;","&lt;input&gt;","&lt;label&gt;","&lt;output&gt;","&lt;select&gt; com &lt;option&gt; e &lt;optgroup&gt;","&lt;textarea&gt;","bot\u00e3o de r\u00e1dio(radio button)","elementos de formul\u00e1rio html","php"],"articleSection":["Inform\u00e1tica","PHP"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/categoriaoutros.com.br\/?p=4398#respond"]}]},{"@type":"WebPage","@id":"https:\/\/categoriaoutros.com.br\/?p=4398","url":"https:\/\/categoriaoutros.com.br\/?p=4398","name":"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML - Categoria Outros","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/#website"},"datePublished":"2022-08-19T21:37:17+00:00","dateModified":"2022-08-19T21:39:29+00:00","breadcrumb":{"@id":"https:\/\/categoriaoutros.com.br\/?p=4398#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/categoriaoutros.com.br\/?p=4398"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/categoriaoutros.com.br\/?p=4398#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/categoriaoutros.com.br\/"},{"@type":"ListItem","position":2,"name":"PHP \u2013 Aula 34: Pegando Valores dos Elementos de um Formul\u00e1rio HTML"}]},{"@type":"WebSite","@id":"https:\/\/categoriaoutros.com.br\/#website","url":"https:\/\/categoriaoutros.com.br\/","name":"Categoria Outros","description":"Assuntos Diversos","publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/categoriaoutros.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/categoriaoutros.com.br\/#organization","name":"Categoria Outros","alternateName":"Categoria Outros","url":"https:\/\/categoriaoutros.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","contentUrl":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","width":400,"height":400,"caption":"Categoria Outros"},"image":{"@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/categoriaoutros","https:\/\/twitter.com\/CategoriaOutros","https:\/\/br.pinterest.com\/CategoriaOutros\/"]},{"@type":"Person","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40","name":"Categoria: Outros","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","caption":"Categoria: Outros"},"sameAs":["http:\/\/categoriaoutros.com.br"],"url":"https:\/\/categoriaoutros.com.br\/?author=1"}]}},"jetpack_featured_media_url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2022\/06\/php_logo.webp","_links":{"self":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/4398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4398"}],"version-history":[{"count":33,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/4398\/revisions"}],"predecessor-version":[{"id":4697,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/4398\/revisions\/4697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/media\/3776"}],"wp:attachment":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}