HTML e CSS para iniciantes #02 - Formulário HTML

fala pessoal aqui é o professor Mateus para o canal tutorando onde iremos dar continuidade a nossas aulas de html na aula passada você aprendeu os principais tags do HTML Hoje iremos aprender como se cria um formulário em HTML se você não assistiu a última aula clica no link que vai estar em algum lugar do vídeo aí para assistir e acompanhar a nossas aulas Então vamos dar continuidade bom em nossa página Vamos criar um formulário a tag de formulário ela é a tag form que ela é escrita dessa forma ela é iniciada e fechada com daquela

forma que aprendemos na tag reform utilizamos o métod para informar qual qual será o parâmetro de passagem dos valores que serão informados no formulário no nosso caso não iremos aprender sobre questões técnicas o que você precisa saber é que é utilizado o método get e post a Action é a página que irá receber essas informações como não estamos trabalhando com nenhuma colocaremos uma asterisque para indicar que não será passado para nenhuma página até que principal de um formulário é input a partir dela serão criad os campos para o formulário é descrito Qual será o tipo

que é usado o Type informamos Qual será o tipo desse Campo e daí desenda vários outros tipos no nosso caso iremos usar primeiramente o tipo teste como você está escrito aqui o name será o nome desse Campo Vamos colocar no nosso caso iremos colocar nome porque será o nosso primeiro campo criado e não precisamos fechar com a outra tag basta colocarmos uma barra e finalizamos a nossa tag se viemos aqui no navegador recarregamos a página veja que foi criado um campo nele será descrito um tipo texto ou então podemos digitar um texto qualquer a tag

Field set ela separa o formulrio em forma de Campo vemos aqui carregamos veja que foi criado um campo com nome formulário para colocar esse nome aqui utilizamos essa tag aqui ó Legend e colocamos o nome podemos colocar qualquer coisa formulário e contato digamos no caso aqui viemos aqui no navegador recarregamos utilizando simples é usado apenas para se separar e indicar o formulário e tudo mais coisa bem básica o Lab é utilizado para nomear aquele Campo bem É só também questão de aparência Vamos separar com br e colocamos um input do tipo texto teste com nome

com name nome queremos pedir ao usuário que ele informe somente o seu nome fechamos a tag E veremos como é que fica Tá vendo foi criada uma tag do tipo nome vamos tirar esse BR aqui para que ele fique junto colocamos aqui debaixo para separar recarregamos vemos aqui que foi criado um campo do tipo texto Beleza agora vamos para mais uma tag criamos outro Campo chamado e-mail colocamos lbel para e-mail for e-mail e-mail E fechamos o level e o colocamos o tipo texto também porque e-mail é um texto só Mudamos o nome aqui agora quando

queremos indicar um campo do tipo senha é utilizado password o password é um campo de texto para digitação de senha e os valores são mostrados em asterisco ou bolinhas vamos ver aqui salvar e ver como ficou aqui tá vendo foi criado senha Olha como aparece ela não aparece o texto não parece o caracter é mostrado com bolinhas vocês são super comuns usar isso aqui e é assim que se cria apenas mudando o tipo para do tipo perw e nomeamos ele com senha para criarmos botões de seleção de escolha única utilizamos o tipo rádio criamos da

mesma forma um lebro para rádio e nomeamos que é será no nosso caso os A exemplo masculino e feminino indicamos que é ult do tipo rádio o name ou se tratar de um único Campo o usuário poderá escolher somente uma opção então nomeamos o campo da mesma forma tanto para masculino como para feminino O que irá mudar somente será o valu que é o valor que aquele Campo irá receber no caso masculino colocamos aqui a ca de MK e feminino fem isso irá indicar que esse campo será irá receber este valor masculino e feminino quando

vimos aqui aqui no navegador recarregamos tá aqui ó masculino e Ele só poderá selecionar um dos dois para se criarmos botões de múltipla escolha utilizamos o tipo check box nomeamos com mesmos nomes e os valores novamente serão mudados tipo esporte tipo cinema que for o exemplo que eu utilizei quando vemos aqui no navegador recarregamos e você vê que foi criado coloquei o exemplo você gosta de ele pode escolher vários tipos ou nenhum tanto faz tag select é um atributo que gera caixa de seleção do tipo drop Down muito usada para Campos que tem uma lista

muito grande e vários itens para escolha no nosso caso iremos utilizar os estados como escolha para criar esse tipo de tag utilizamos o nome select o name para indicar o nome do tipo de Campo que será e o ID da mesma forma do tipo estado que é o nosso exemplo os opt são as opções que irão aparecer para usuário escolher o valor indicamos Qual será o valor que aquela tag irá receber quando o usuário passar a informação nós colocamos sigras dos Estados SP SP MG MG e assim sucessivamente para as optos precisamos iniciar nomeá-las o

que irá aparecer para o usuário e fecharmos novamente assim como select que abrimos E fechamos O que irá aparecer o usuário é serão essas sigras e o que será recebido pela página O que irá receber as informações serão somente ess aqui você pode mudar isess aqui porém o que irá aparecer para usuário é o que fica entre teg de abertura e de fechamento salvamos o documento abrimos o navegador recarregamos a página e aqui está criado nosso campo de seleção única também que ele só pode escolher uma única opção Se quisermos mudar Vamos colocar um exemplo

aqui mudamos São Paulo S Paulo veja que apareceu S Paulo aqui bem simples e fácil e muito útil para criarmos uma caixa de comentário ou uma caixa de texto utilizamos a tag teste área essa tag diferente das outras ela precisa ser aberta e fechada e dentro dela iremos passar o parâmetro dessa caixa Esse atributo é usado para criar uma caixa de texto de múltiplas linha bastante utilizado para câ de textos extensos e longos nomeamos a nossa caixa de texto comentário comparamos calls informamos quantas colunas serão utilizadas para essa caixa no nosso caso iremos colocar 30

colunas e hes indicaremos números de linha no caso colocaremos só quatro podemos colocar também um ID para essa tag vamos aqui no navegador recarregamos e veja que foi criado um campo de comentário você pode utilizar essa essa tag para qualquer texto que o usuário precisa escrever Vamos colocar aqui insira seu texto e veja entre uma tag e outra entre a tag de abertura e fechamento colocamos um texto vemos aqui que ela esse texto irá aparecer dentro da caixa o que não é muito legal pois o usuário tem que fechar novamente tirar para basta basta apenas

indicar que aquele campo é um tipo comentário e e ele irá escrever o que ele quiser aqui dentro o input do tipo submit indica que irá criar um botão que irá postar os dados do formulário assim quando ele for clicado utilizamos o tipo submit para isso nomeamos ele e o valu é o valor que vai aparecer dentro desse botão salvamos aqui e veremos como irá aparecer veja aqui foi criado um botão com nome enviar esse nome pode ser mudado aqui recarregamos e veja que mudou existe também outro tipo o reset utilizado para se limpar os

dados do formulário e o buton ele cria um botão clicável recarregamos aqui e veja que foi criado botões diferente vamos digitar qualquer texto aqui e vemos que quando selecionarmos o botão Vamos mudar o nome aqui limpar salvamos recarregamos mudou o nome você veja que tem texto digitado dentro dos formulários clicamos ele limpa o buton é um botão sem ação nenhuma ele é usado para envios de JavaScript quando você for passar o seu valor por JavaScript é recomendado que se use o boton Então galera é esse simples básico de se criar formulário em HTML Então é

isso galera terminamos nossas aulas de de hoje por aqui espero que vocês tenham gostado se você ainda não assistiu A aula anterior assista procure e assista para você acompanhar todo o nosso conteúdo e se você ainda não é inscrito no canal se inscreva para acompanhar todo o nosso conteúdo todas as nossas aulas queremos trazer e clique no botão gostei adicione os favoritos para que você possa estar nos ajudando a ajudar vocês trazendo mais conteúdo mais tutoriais mais vídeoaulas e sempre melhorando o nosso conteúdo valeu até a próxima galera e um abraço colo terrorist r