Formulario

Sempre que formos utilizarmos os formularios eles iram começar com a tag <form></form> de formulario, e dentro dessa tag que seria a tag pai, ou seja, que é o formulario em si que sera enviado, mas lembre-se, sempre que formos utilizar a tag <form>< será apena uma vez, todo o resto que formos adicionar ao nosso formulario tem que estar dentro dessa tag unica, caso contrario ela noa funcionarar conrretamente. Existem os itens que iram formar esse formulario, entre eles esta o <input>, que quer dizer entrada, algo que enviara um dado de entrada, esse input tem varios tipo, ou Type, o primeiro que vamos ver é o atributo TypeText ou seja, uma entrada do tipo de texto, isso ira abrir um campinho digitavel para nossos ususario e ficara da seguinte forma: <form><input type="text"></form>
Resultando em...


Esse é atualmente o campo mais comum qu nos utilizamos, o campo input do tipo texto.

Temos uma outra propridade dentro do campo do tipo texto que é o placeholder por exemplo:

<form><input type="text" placeholder="Digite seu nome aqui"></form>

E esse codigo resultaria em:





Outra tag que utilizamos bastante são as legendas, que são mais conhecidas como Label, que é uma legendinha que serve para dizer para o que serve aquele campo, ou seja, a palavra "nome" antes do campo "digite seu nome" A tag Label tem um recurso de que quando o usuaro cicar na legende ela ja vai automotacamente para o campo de digitar o nome, bastar irmos ate a parte do Input do nosso codigo e adicionarmos a seguinte propriedade: id="campo_nome" e no Label adicionaremos uma propriedade form, dessa forma, caso nosso usuario clique na legenda do nosso campo, ou seja, "Nome", ele sera direcionado automatiamente para o campo do Nome.



Alem desse tipo de campo temos o tipo de campo senha, esse campo ele funciona da seguinte forma, esse campo tambem é uma tag Input porem o tipo dele é password, ou, senha em portugues, no nosso codigo ficaria da seguinte forma:

<input id="campo_senha" Type="password" placeholder="Digite sua senha">


Outro que utilizamos muito é o do tipo e-mail, esse campo é Input tambem porem com o type email, esse campo ele reconhece quando o usuario esta digitando um e-mail ou não, o navegador so ira aceitar oque estiver escrito no campo como um email caso possua um @ e um ., caso contrario o navegador nao ira reconhecer como um e-mail valido.
Essa tag ficaria da seguinte forma:



Outro campo Input que vamos estar aprendendo é do type submit, que significa enviar em portugues, para escrevermos o nome desse submit bastar adicionarmos value="enviar formulario", esse tipo submit é um botão para quando nosso usuario clicar nele o formulario, na pagina ficaria da seguinte forma:

<input type="submit" value="Enviar formulario">



Existe um atributo para efitar que nossos usuarios enviem o formulario vazio, para isso bastar adicionarmos ao campo Input o atributo required nos campos do tipo Input

Temos outro Type do Input que seria o "Radio", esse radio na nossa pagina web seria aquelas bolinhas que aparece paranossos usuarios selecionar apenas um item de varias opção, em nosso codigo adicionariamos a tag <h2>Animal de estimação (por exemplo), e alem disso devemos dar um name e esse nome tem que ser sempre igual para todos os campos radio que teremos, ou seja, suponhando que o nome do nosso "radio" seja animal, nossa tag ficaria a seguinte:

<h2>Animal de estimação</h2><input> type="radio" name="animal" value="Cachorro

" e até o momento nao vai aparecer nada na nossa pagina web, a bolinha que aparece no navegador tem o valor de cachorro no formulario, porem nao apareceu anda escrito pelo fato de percisarmos adicionarmos a tag id="dog" podemos colcoar o nome que quisessemor dentro do id, coloquei dog para diferenciar um pouco. Após isso colocamos o seguinte comando: <label for="dog">Cachorro</label> depois disso é recomendado que pulassemos 2 linhas utilizando a tag <br><br> isso tudo ficaria assim:

Animal de estimação





feito isso teremos um total de 3 opções para escolhermos 1, isso acontece pelo fato do name ser o mesmo, ou seja, animal, com isso o navegador entende que todos eles fazem parte do mesmo conjunto, só oque vamos trocar seria o value que é oque vai ser mandando para o formulario. Resumindo, o radio é a opção aonde o usuario so pode escolher uma das opções, no campo Input do type="radio" somos obrigados a adicionar o atributo name etem que ser igual para todos que vao fazer parte das opções disponiveis, e so oque alteramos seria o Value que é o valor que vai aparecer e esse valor não vai aparecer para o usuario, vai ser para o formulario que será enviado, entao é importante colocar o <label for para que do lado apareça uma opção escrita e no for devemos sempre apontar para o campo id que queremos para que dessa forma nossos usuarios possam clicar apenas no texto e automaticamente ja seleciona a bolinha.

Caso quissesemos dar varias opções para nossos usuario bastar utilizarmos o Input do tipo checkbox, no caso do "checkbox" nos não teremos os mesmos "name" para todos, cada um será unico, a seguir vamos dar um exemplo, vamor fazer com se fosse uma pergunta utilizando a tag de titulo <h2></h2>, vamos ver alguns exemplos:

<h2>Oque você tem em casa?</h2>

<input type="checkbox" <input id="item1" type="checkbox"> name="item1" value="tv" <label for="item1">tv</label></label><br><<br>

<input type="checkbox" <input id="item2" type="checkbox"> name="item2" value="geladeira" <label for="item1">geladeira</label></label><br><<br>

<input type="checkbox" <input id="item3" type="checkbox"> name="item3" value="computador" <label for="item3">computador</label></label><br><<br>

O resultado desse codigo é:

O que você tem em casa?








Outro campo que utilizamos em formulario é o select, o select funciona com abertura e fechamento, e dentro dele temos as option e dentro das option a gente sempre passa a propriedade value que tem o valor que realmente vai ser enviado pelo formulario e entre a abertura e fechamento da tag é aonde colocaremos oque vai estar escrito para nossos usuarios, veja o exemplo a seguir:

<h2>Escolha uma cor:</h2>

<select><optionvalue="vermelho"</option></select>

O resultado do nosso codigo ficaria:

Escolha uma cor:



Gerealmente nesse campo de selet a primeira opção que a gent equer colcoar e justamente uma opção que nao tenha nada marcado, por exemplo para que o usuario selecione um cor ou algo do tipo, e para fazer isso e bem simples, bastar pegar a primeira option colocamos o valor (value) vazio, apos isso vamos até o campo aonde seria o nome que apareceria para o usuario e escrevemos "Selecione uma cor" e dentro do nosso option adicionamos um selected disabled ou seja, desabilitado e ficaria assim:

Escolha uma cor:



Outro campo que utilizamos muito e do tipo text area, que é um campo como se fosse aquele campo de texto mais a cima, porem bem maior para os usuario utilizarem, ele pode até ser redimencionado pelos os usuarios, porem, caso quisessemos que ele ficasse um tamanho fixo,utilizariamos propriedades como por exemplo rows="" que significa linha em portugues e a propriedade cols="" que segnifica coluna em portugues, o campo livre para o usuario redimencionar como ele quisesse ficaria da seguinte forma:

<h2>Digite sua mensagem:</h2>
<textarea></textarea>

Digite sua mensagem:



E o campo pré-determinado seria:

<textarea rows="15" cols="15"></textarea>

O resultado seria:



Alem disso tambem podemos usar aquela marca d'agua que aprendemos a utilizar anteriormente utilizando o placeholder, o resultado fica da seguinte forma:



Conclusão

Os formulários são elementos essenciais para a interação entre usuários e páginas web, permitindo a coleta de informações de maneira estruturada. Utilizando a tag <form>, conseguimos agrupar diversos tipos de campos de entrada, como <input>, <textarea>, <select>, entre outros. Cada um desses elementos possui propriedades específicas, como type, placeholder, required, name, id, e value, que ajudam a definir seu comportamento e a melhorar a experiência do usuário. Além disso, a utilização de elementos como <label> e atributos como for torna os formulários mais acessíveis e intuitivos, facilitando a navegação. Também aprendemos a diferença entre radio (para seleção única) e checkbox (para múltiplas escolhas), além da importância do select para listas suspensas e do textarea para textos mais longos. Com esses conhecimentos, conseguimos criar formulários eficientes e bem estruturados, garantindo uma comunicação eficaz entre os usuários e o sistema.


Voltar para a principal