Tutorial Fomulário para Web - 02 html

Boa noite,
Para criar o formulário é preciso de um editor de texto, pode ser qualquer um desde o bloco de notas do windows até o adobe dreamweaver, nesse caso irei usar o notepad ++ que pode ser baixado nesse link.
Baixem e use para o tutorial esse editor, ele é grátis e muito bom.

Levando em consideração que você está usando o notepad ++,  crie um novo arquivo e copie esse código,
vou explicar linha a linha.
Não esqueça de salvar o arquivo como index.html, caso seja uma pagina secundaria pode salvar como formulario.html, sem acentuação. O index.html já reconhecido pelo navegador e já abre a pagina automaticamente.

Clique na figura para ampliar:

A tag  é uma tag de bloco, então se abrir ela você tem que fechar, para fechar basta colocar um "</" antes do html. Essa tag se abre na linha 1 e se fecha na linha 39 da figura 01, todo o codigo da vai dentro dessas tags.

A tag é a tag de cabeçalho onde vão todas as informações do site, nesse caso só iremos informar a codificação da pagina e chamar os arquivos css e javascript (que não chamamos ainda).

O titulo da pagina aparece na abinha do navegador, veja o exemplo do google chrome:

""

Ela se abre e fecha na linha 4.

Na figura 02 mostra como fica aquele código html puro sem o css.

Essa tag da linha 5 serve para que o navegador reconheça nossa acentuação, sem ela o não reconheceria o "Ç" por exeplo, veja o exemplo na figura 03 sem essa tag.

Ela representa o titulo, e vai de h1 à h6

A tag form se inicia na linha 12 e fecha na linha 34, todo os inputs (campos do formulário) ficarão dentro delas. Mas essa tag tem mais alguns parâmetros, nesse caso:

class="", é usado para classificar e agrupa vários elementos, exemplo você cria uma classe "meuTexto" no css e cria um estilo de cor, tamanho fonte para um texto, todo texto que você colocar class="meuTexto" terá o mesmo estilo.

action="",  quando o formulário é submetido, isto é, o individuo clica no botão "Enviar" de nosso formulário ele chama a pagina que está sendo invocado nesse parâmetro, que em nosso caso é a pagina "enviarFormulario.php" que ainda não criamos.

method="",  esse método é responsável por enviar o conteúdo do formulário para a pagina php que é responsável por inserir no banco de dados. Existem dois métodos, post e get. O post envia as informações de forma oculta você nem vê que ela foi, já o método get envia via url, você consegue ver todo as informações do formulário no endereço da pagina. Pode ser usado qualquer um dos dois desde que informe a pagina php qual você usou.

Eu usei essa tag para organizar o formulário para que os campos não fiquem todos amontoados. Dentro dessas tags seguinte a tag : 

são as linhas da tabela.

e são parecidas e ambas vão dentro das tags , são as colunas da tabela. So que
é para titulo e a
 é para colunas comuns.

O label serve para deixar o formulário mais organizado, ele nomina os inputs. Veja que ele tem o parâmetro for="", que serve para apontar para qual input ele pertence. 

Nesse formulário só usei três tipo de campo do formulário, que são:

 type="input", que cria uma caixa para que seja digitadas as informações. Cada input do tipo "input" tem que ter pelo menos mais um parâmetro para que funcione, o parâmetro name="". O javascript vai usar esse parâmetro para pegar o valor de cada input.

 type="button", que simplesmente cria um botão que depois chamara uma função do javascript, responsavel por enviar o formulário.

 type="reset", que cria também um botão, só que esse já tem uma função padrão, ao clicar nele limpa o formulário sem a necessidade de códigos adicionais.

Veja na figura 01 que os inputs vão dentro das tags , que também estão dentro das tags .

Clique aqui para baixar a pagina index.html

Qualquer duvida deixe um comentário, dependendo do numero de acesso do post eu faco o seguinte,

espero ter ajudado!

Tutorial  Fomulário para Web - 03 css (em breve)