Portal
Olá Pessoas da Aldeia, hoje estarei ensinando, na Aula de Programação Web de Hoje, como fazer Forms e Frames. Então vamos lá:
Site com Frames
Vamos começar com os Sites com Frames. Primeiramente o que é um Site com Frames? Simplesmente resumindo a Reposta: "Sites com Frames são Site com mais de uma Página em uma só tela.", para fazer um Site com Frames utilizaremos a seguinte tag: <frameset cols="">
E claro para adicionar uma Nova Página ao nosso Frame:
- Código:
<frame src="Pagina">
Então vamos criar um Código HTML, que crie uma Página com os Frames da Pagina 2 e 3.
- Código:
<frameset cols="20%, 80%">
<frame src="pagina2.html">
<frame src="pagina3.html">
<noframe>
</noframe>
</frameset>
Porem, ainda não esta pronto. Para fazer com que isto funcione, é claro vamos precisar das Pagina 2 e 3 (pagina2.html e pagina3.html).
Mas alem destas 2 Paginas vamos precisar do Seguinte detalhes: Este Script não poderá estar entre as tag de Body. Veja:
- Code:
- Código:
<html>
<head>
<title>Exemplo</title>
</head>
<!-- Script Aqui -->
<frameset cols="20%, 80%">
<frame src="pagina2.html">
<frame src="pagina3.html">
<noframe>
</noframe>
</frameset>
<!-- Body Aqui -->
<body>
</body>
</html>
Bom agora veja como ficou, aqui.
- Explicações:
- Explicações:
- <... cols=""> - Indica o Tamanho utilizando, para cada pagina, veja: cols="tamanhoPag.1, tamanhoPag.2", sendo que este tamanho Define a Área ocupada, por cada Pagina na Index, ou outra pagina.
- <... cols=""> - Indica o Tamanho utilizando, para cada pagina, veja: cols="tamanhoPag.1, tamanhoPag.2", sendo que este tamanho Define a Área ocupada, por cada Pagina na Index, ou outra pagina.
Form
Agora estarei ensinando sobre o FORM ou Formulário. Ele é o campo de texto, botão, etc. Estarei mostrando deis de como cria-lo até alguns de Seus Elementos.
Para criar um Form utilizaremos a seguinte tag: <form>
Veja:
- Código:
<form action="" method="">
- Explicações:
- Explicações:
- action - É o script ou página onde serão submetidos os Dados.
- method - É o método de Envio de Dados. Vou falar sobre o GET e POST. Mais existem outros pelo que me lembro.
- GET - Passa os valores pela URL, ou seja, podemos ver as variáveis passadas na URL da página destino definida no campo action. Não é muito aconselhável o uso do método GET, pois ele expõe o nome e valor das variáveis, o que pode ser utilizado por pessoas com intenções maléficas.
- POST - Passa a variável de maneiras transparentes para o usuário. É o método mais aconselhável.
- action - É o script ou página onde serão submetidos os Dados.
Agora os Elementos do Form:
- Campo de Texto:
- Campo de texto comum.
Declaração:
- Código:
<input type="text" name="" maxlength="" name="" value="">
Explicações:- Name = Nome do campo
- Maxlength - É o tamanho máximo do texto, que pode ser Inserido no Elemento.
- Value - É utilizado quando há Necessidade de se pré-definir um valor para o elemento.
Exemplo:
- Código:
<input type="text" name="username" maxlength="30" value="Username">
Site de Visualização: Clique Aqui!
- Campo Senha:
- Idêntico ao anterior, porém substitui os caracteres por "•".
OBS¹: Este campo não possui nenhum tipo de Criptografia, apenas coloca uma mascara no texto inserido.
Declaração:
- Código:
<input type="password" name="" maxlength="" value="">
Os parâmetros dele são idênticos ao do campo de Texto, assim sendo não necessitará de uma Explicação mais detalhada.
Exemplo:
- Código:
<input type="password" name="password" maxlength="16" value="Senha"
Site de Visualização: Clique Aqui!
- Botão Rádio:
- Utilizado para múltipla Escolha, onde o Usuário pode escolher apenas 1 Opção.
Declaração:
- Código:
<input type="radio" name="" value="" checked>
Para definir mais de 1 como a mesma lista, basta colocar o Mesmo nome. Ex:
- Código:
<input type="radio" name="radio1" value="Opção 1" checked>
<input type="radio" name="radio1" value="Opção 2">
Explicações:- Checked - Se for declarado o elemento terá seu estado inicial como selecionado.
- Value - É o Valor que será passado á página destino quando o formulário é submetido se este elemento estiver selecionado.
O Name todos já sabem, mais: Name - Nome do Input / Tag / ... .
Exemplo:
- Código:
<input type="radio" name="radio2" value="Opção 1" checked> Opção 1<br/>
<input type="radio" name="radio2" value="Opção 2"> Opção 2<br/>
<input type="radio" name="radio2" value="Opção 3"> Opção 3<br/>
<input type="radio" name="radio2" value="Opção 4"> Opção 4<br/>
<input type="radio" name="radio2" value="Opção 5"> Opção 5<br/>
<input type="radio" name="radio2" value="Opção 6"> Opção 6<br/>
Site para Visualização: Clique Aqui!
- CheckBox:
- Utilizado para entradas de múltipla escolha, onde o usuário poderá escolher várias Opções. Cada Opção deverá ter um nome Independente.
Declaração:
- Código:
<input type="checkbox" name="" value="" checked>
Seus Parâmetros são iguais á o do Rádio.
Exemplo:
- Código:
<input type="checkbox" name="cb1" value="cb1" checked> Opção 1<br/>
<input type="checkbox" name="cb2" value="cb2"> Opção 2<br/>
<input type="checkbox" name="cb3" value="cb3"> Opção 3<br/>
<input type="checkbox" name="cb4" value="cb4"> Opção 4<br/>
<input type="checkbox" name="cb5" value="cb5"> Opção 5<br/>
Site para Visualização: Clique Aqui!!
- Submit:
- Botão que submete o formulário a pagina destino especificada no action do form.
Declaração:
- Código:
<input type="submit" name="" value="">
Explicações:- Value - O que aparecerá no Botão
Exemplo:
- Código:
<input type="submit" name="logar" value="Logar">
Site de Visualização: Clique Aqui!
Bem, vou postar aqui apenas estes 5, para visualizar mais Elementos do Formulário estarei disponibilizando dois Links abaixo.
- Link 1:
- http://www.mhavila.com.br/topicos/web/controles.html
- Link 2:
- http://www.clem.ufba.br/tuts/html/c11.htm
Por hoje é só, pessoal 
. Porém quero que aprendam bem como utilizar Formulários e Frames. E na Próxima Aula estarei tentando trazer CSS.
. Porém quero que aprendam bem como utilizar Formulários e Frames. E na Próxima Aula estarei tentando trazer CSS.<< Aula 3 - Aula 4 - Aula * >>
