Tabelas servem para organizar dados dentro de uma página. Utilizamos a tag "<TABLE>" para marcar uma tabela, a tag "<TR>" para marcar o conteúdo de uma linha da tabela e dentro da tag
"<TR>", é utilizada a tag "<TD>" para marcar o conteúdo de uma célula.Dentro dessa mesma tag (TR), é utilizada também a tag "<TH>", para tornar o texto centralizado e em negrito indicando que o mesmo trata-se de um título. Dentro do elemento "<table>", pode ser inserido a tag "<CAPTION>" que mostra o título ou o nome da tabela como uma legenda visível para o usuário. O "CAPITON" trabalha com informações importantes para os mecanismos de buscas, pois oferecem dados relevantes, possível de ser identificado.
Resumo:
<tb> - Tabela
<tr> - Linha
<td> - Célula
<th> - Célula de título
<Capition> - Legenta
Exemplo:
<table border="1">
<capition>Comparativos de Frutas</capition>
<tr>
<tr>
<td>Maçã</td>
<td>Alface</td>
<td>Arroz</td>
</tr>
<tr>
<td>Laranja</td>
<td>Beterraba</td>
<td>Trigo</td>
</tr>
</table>
Os formulários em HTML são utilizados para a coleta de dados do usuário, que após podem ser manipulados com a utilização de outras linguagens como PHP. A tag responsável pela criação de formulários é a tag <form>, ela abriga os componentes necessários para o formulário (botões, campos de texto e etc). Para que as informações e os dados de um formulário sejam efetivamente enviadas do computador do usuário para o servidor, é necessário uma aplicação que receba, processe e armazene essas informações. O Atributo que define qual será essa aplicação é o "ACTION". Para o envio de Dados de uma formulário, é necessário definir o método http pela qual essa operação será realizada, e isso é definido no atributo "method". Dentro de um documento web um formulário é identificado no código por o nome ("name" e "id")
<Form> - Formulário
<action> - Comunica-se com uma página ou aplicação back-end.
<method> - Método de envio (Usa um dos dois valores, get ou post)
<name> - Utilizados para nomear o formulário e permite a compatibilidade com os usuários ativos.
<id> - Identificador único que dá nome ao formulário
<fieldset> e <legend> são elementos que delimitam e nomeiam os componentes de uma formulário, são considerados fundamentais para o uso da acessibilidade. Um formulário pode ter vários <fieldset>, porém o <legend> deve ser utilizado para cada fieldset.
<fieldset>: Conjuntos de campos, botões e opções de formulário.
<legend> : mostra a legenda para um grupo de opções.
Além das tags já citadas, os formulários também utilizam outros elementos como:
<input> - Insere componentes de controle em um formulário, esses componentes podem ser campos de textos, botões, controle deslizantes e outros. Quem determina a forma e a funcionalidade do elemento <input> é o atributo <type>, esse atributo pode receber uma grande quantidade de valores, também conhecidos como estados. Veja abaixo os elementos mais comuns:
Button: Cria um botão sem comportamento padrão.
Text: Um campo de texto com uma só linha; quebras de linha são
Number: É utilizado para campos que devem apenas conter números, podendo ter seus limites (maior e menor valor aceitos) definidos.
Email: Um campo para editar um endereço de e-mail.
Range: É utilizado para campos de entrada que devem receber um valor a partir de uma variação de números.
Search: É usado para fazer pesquisas, mas na pratica se comporta como um campo de texto comum.
Time: Permite ao usuário selecionar hora.
Datetime: HTML5 Um controle para inserir data e horário (hora, minuto, segundo e fração de segundo) baseado no fuso horário UTC.
Date: HTML5 Um controle para inserir uma data (ano, mês e dia, sem horário).
Url: É usado para campos de entrada onde você recebe um endereço URL, o valor do campo é validado automaticamente quando o formulário é enviado.
Week: Para definir uma semana e um ano.
Password: Cria uma caixa de texto para senhas, um campo de texto com uma só linha cujo valor é obscurecido.
Checkbox: Cria uma caixa de seleção do tipo "Checkbox", uma caixa de marcação
Radio: Cria uma caixa de seleção do tipo Radiobutton, ou seja, um botão de escolha.
Reset: Botão para limpar os dados do formulário
Submit: Botão que envia o formulário.
File: Um controle que permite ao usuário selecionar um arquivo. Use o atributoaccept para definir os tipos de arquivo que o controle pode selecionar.
hidden: Um controle que não é exibido mas cujo valor é enviado ao servidor.
image: Um botão gráfico para enviar o formulário. Você deve usar o atributo src para definir a fonte da imagem e o atributo alt para definir um texto alternativo. Você pode usar os atributos height e width para definir o tamanho da imagem em pixels.
Exemplo:
<form> <input type="hidden" name="codigo_dos_produto" value="034, 035"/> <p><label for="name">Nome </label><input type="text" id= "name" name="nome" maxlength="35"/></p> <p><label for="senha">Senha </label><input type="password" id="senha" name="senha" maxlength="8" required></p> <p><label for="noticias">Escolha </label><input type="checkbox" id="noticias" name="noticias" value="Artes"/></p> <p><label for="upload">Envie </label><input type="file" id="upload" name="upload"/></p> <p><label for="clicar">Clique </label><input type="image" id="clicar" name="enviar" src="imagens/botao.png" alt="Botão enviar"/></p> <p><label for="tamanho">Escolha </label><input type="radio" id="tamanho" name="tamanho" value="pequeno"/></p> <p><label for="somar">Calcule </label><input type="button" id="somar" name="somar" value="Somar" /></p> <p><label for="limpar">Limpar </label><input type="reset" id="limpar" name="limpar" value="Limpar dados" /></p> <p><label for="enviar">Enviar </label><input type="submit" id="enviar" name="enviar" value="Enviar dados"/></p> </form>
Atributos de Comportamento
Placeholder: Indica dica para preenchimento de um campo em um formulário do tipo input.
Size: Indica tamanho em números de caracteres de um campo em um formulário do tipo input.
Textarea
É o elemento de entrada e controle de texto com possibilidade de inserção de múltiplas linhas de textos. Ele é marcado com tag de abertura e fechamento "<textarea> </textarea>" e seu principais atributos são:
Cols: Indica a largura em colunas
Rows: Indica altura em linhas
Autofocus: Indica para o navegador realçar esse campo.
Maxlenght: Limita o número de caracteres que o usuário pode inserir em um determinado campo.
Placeholder: Indica dica para preenchimento de um campo.
Required: Indica que o preenchimento do campo é o obrigatório.
Fontes:
http://www.linhadecodigo.com.br/artigo/3439/introducao-ao-html-usando-tabelas-em-html.aspx#ixzz56lBPPcd4
http://www.maikbasso.com.br/2012/01/construindo-formularios-em-html.html#ixzz56lOl6E8H
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input
http://flatschart.com/html5/formulario_estados1.html
Nenhum comentário:
Postar um comentário