HTML 4.1 - Aula 16
Canal Effeccinco
Revisão da Aula Anterior
 Aprendemos a criar tabelas
 Aprendemos a personalizar nossos marcadores nas nossas listas
Nessa Aula nós vamos aprender
 Você já pensou em criar um canal de comunicação com os seus leitores, pois
bem, nessa aula nós vamos falar um pouco sobre formulários, quer
geralmente são usados em sites para que pessoas possam entrar em contato
com você, deixar mensagens, além de poder saber o que os leitores do seu
site dizem a respeito de você, ainda existe a possibilidade de você conseguir
parcerias.
 Hoje ter um canal de comunicação é essencial, seja apenas para você receber
retorno das pessoas, você ainda pode estabelecer e criar ali uma rede de
trabalho. Você já deve ter visto vários formulários na internet, seja para criar
um perfil em uma rede social, ou um perfil em uma loja virtual, ou até
mesmo para enviar alguma informação para algum site.
Formulários
 A primeira coisa que você deve criar dentro da sua página html, é o
formulário aonde você vai colocar suas caixas de entrada de dados, para isso
é muito simples, você deve usar o comando:
 <form>
 </form>
 Tudo que estiver dentro do formulário agora vai ser interpretado pelo
navegador sem problemas.
Caixa de entrada
 Para você colocar uma caixa de entrada no seu html você usa o comando
 <input type=“text” name=nomecompleto />
 Geralmente você usa uma caixa de entrada e ela pode se adequar a diversos
tipos de dados como por exemplo, números se você quiser que ela receba um
valor, ou pode ser uma data, aqui nesse exemplo eu usei que o tipo de dado é
do tipo de texto, mas você tem que adequar ao dado que você for usar.
Entrada do tipo Botão
 Para criar uma entrada que seja um tipo de botão você deve criar da seguinte
forma:
 <input type=“submit” />
 O tipo de entrada submit é um botão que quando clicado deve enviar seus
dados para o seu banco de dados ou talvez e-mail, que são os padrões que nós
vemos hoje.
Botão de Rádio
 Além desse tipo de botão nós ainda temos um outro bem conhecido que é o
botão de rádio, para criar ele é simples:
 <input type=“radio” name=“botaoradio” value=“Sim”/>
 Quando você cria vários botões desse tipo você deve sempre colocar o mesmo
nome para que o site consiga entender que eles fazem parte do mesmo grupo
para não ocorrer erro na hora de enviar suas informações.
Caixa de Verificação
 Esse outro tipo de botão muito usado são aquelas caixas de verificação aonde
você dica em clica em cima para marcar uma opção, veja com o é fácil inserir
ela na sua página:
 <input type=“checkbox” name=“caixas” value=“São Paulo” />
 Assim como os botões de rádio você tem que dar um mesmo nome para
indicar que elas fazem parte do mesmo grupo, o value é o nome que vai
aparecer para o usuário.
Área de Texto
 Além dos elementos que nós já vimos de entrada ainda existe um outro tipo
que é uma caixa aonde você digita um texto para enviar uma informação pra
alguém, para criar é muito simples.
 <Textarea name=“caixadetexto” rows=“10” cols=“30”>
 Tudo que estiver aqui aparece como texto inicial.
 </Textarea>
 Muito simples né, galera.
Caixa de Seleção
 Tem mais um componente bem famoso nos sites da web, que é a caixa de
seleção vamos ver como cria-las:
 <select name=“caixadeseleção” >
 <option value=“São Paulo”>São Paulo </option>
 <option value=“Rio De Janeiro”>Rio de Janeiro</option>
 </select>
Entrada de Senhas
 Você ainda pode colocar o tipo de entrada de senha se você precisar com o
comando:
 <input type=“password” name=“senha”/>
 Pra isso acontecer é só você usar o tipo de password que significa senha.
Entrada do tipo Arquivo
 Caso você queira que o seu usuário mande arquivos pra você, também é super
simples é só usar o comando de entrada de arquivos veja:
 <input type=“file” name=“arquivos”/>
 File em inglês significa arquivo.
Quer saber mais sobre html?
 Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no
youtube:
 https://www.youtube.com/watch?v=yEaO5HnARmY
 Quer aulas sobre HTML, veja nosso Canal no Youtube, nos assista, curta e
compartilhe:
 https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A/feed
 Acesse o nosso Blog, e confira matérias mais completas.
 www.effeccinco.wix.com/effeccinco
Referências
 Livro: Use a Cabeça HTML, CSS e XHTML, 2º
Edição, Editora Alta Books, Elisabeth Freeman &
Eric Freeman. Capítulo 1 – Comece a entender o
HTML.
 SHARMA, Vivek. SHARMA, Rajiv. Desenvolvendo
Sites de e-Commerce. São Paulo: Makron Books,
2001, 598 p.

Html aula 16 - Formulário

  • 1.
    HTML 4.1 -Aula 16 Canal Effeccinco
  • 2.
    Revisão da AulaAnterior  Aprendemos a criar tabelas  Aprendemos a personalizar nossos marcadores nas nossas listas
  • 3.
    Nessa Aula nósvamos aprender  Você já pensou em criar um canal de comunicação com os seus leitores, pois bem, nessa aula nós vamos falar um pouco sobre formulários, quer geralmente são usados em sites para que pessoas possam entrar em contato com você, deixar mensagens, além de poder saber o que os leitores do seu site dizem a respeito de você, ainda existe a possibilidade de você conseguir parcerias.  Hoje ter um canal de comunicação é essencial, seja apenas para você receber retorno das pessoas, você ainda pode estabelecer e criar ali uma rede de trabalho. Você já deve ter visto vários formulários na internet, seja para criar um perfil em uma rede social, ou um perfil em uma loja virtual, ou até mesmo para enviar alguma informação para algum site.
  • 4.
    Formulários  A primeiracoisa que você deve criar dentro da sua página html, é o formulário aonde você vai colocar suas caixas de entrada de dados, para isso é muito simples, você deve usar o comando:  <form>  </form>  Tudo que estiver dentro do formulário agora vai ser interpretado pelo navegador sem problemas.
  • 5.
    Caixa de entrada Para você colocar uma caixa de entrada no seu html você usa o comando  <input type=“text” name=nomecompleto />  Geralmente você usa uma caixa de entrada e ela pode se adequar a diversos tipos de dados como por exemplo, números se você quiser que ela receba um valor, ou pode ser uma data, aqui nesse exemplo eu usei que o tipo de dado é do tipo de texto, mas você tem que adequar ao dado que você for usar.
  • 6.
    Entrada do tipoBotão  Para criar uma entrada que seja um tipo de botão você deve criar da seguinte forma:  <input type=“submit” />  O tipo de entrada submit é um botão que quando clicado deve enviar seus dados para o seu banco de dados ou talvez e-mail, que são os padrões que nós vemos hoje.
  • 7.
    Botão de Rádio Além desse tipo de botão nós ainda temos um outro bem conhecido que é o botão de rádio, para criar ele é simples:  <input type=“radio” name=“botaoradio” value=“Sim”/>  Quando você cria vários botões desse tipo você deve sempre colocar o mesmo nome para que o site consiga entender que eles fazem parte do mesmo grupo para não ocorrer erro na hora de enviar suas informações.
  • 8.
    Caixa de Verificação Esse outro tipo de botão muito usado são aquelas caixas de verificação aonde você dica em clica em cima para marcar uma opção, veja com o é fácil inserir ela na sua página:  <input type=“checkbox” name=“caixas” value=“São Paulo” />  Assim como os botões de rádio você tem que dar um mesmo nome para indicar que elas fazem parte do mesmo grupo, o value é o nome que vai aparecer para o usuário.
  • 9.
    Área de Texto Além dos elementos que nós já vimos de entrada ainda existe um outro tipo que é uma caixa aonde você digita um texto para enviar uma informação pra alguém, para criar é muito simples.  <Textarea name=“caixadetexto” rows=“10” cols=“30”>  Tudo que estiver aqui aparece como texto inicial.  </Textarea>  Muito simples né, galera.
  • 10.
    Caixa de Seleção Tem mais um componente bem famoso nos sites da web, que é a caixa de seleção vamos ver como cria-las:  <select name=“caixadeseleção” >  <option value=“São Paulo”>São Paulo </option>  <option value=“Rio De Janeiro”>Rio de Janeiro</option>  </select>
  • 11.
    Entrada de Senhas Você ainda pode colocar o tipo de entrada de senha se você precisar com o comando:  <input type=“password” name=“senha”/>  Pra isso acontecer é só você usar o tipo de password que significa senha.
  • 12.
    Entrada do tipoArquivo  Caso você queira que o seu usuário mande arquivos pra você, também é super simples é só usar o comando de entrada de arquivos veja:  <input type=“file” name=“arquivos”/>  File em inglês significa arquivo.
  • 13.
    Quer saber maissobre html?  Quer ver na prática como funciona esse conteúdo , assista a essa vídeo aula no youtube:  https://www.youtube.com/watch?v=yEaO5HnARmY  Quer aulas sobre HTML, veja nosso Canal no Youtube, nos assista, curta e compartilhe:  https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A/feed  Acesse o nosso Blog, e confira matérias mais completas.  www.effeccinco.wix.com/effeccinco
  • 14.
    Referências  Livro: Usea Cabeça HTML, CSS e XHTML, 2º Edição, Editora Alta Books, Elisabeth Freeman & Eric Freeman. Capítulo 1 – Comece a entender o HTML.  SHARMA, Vivek. SHARMA, Rajiv. Desenvolvendo Sites de e-Commerce. São Paulo: Makron Books, 2001, 598 p.