Form
Um formulario é feito para receber dados do usuário
como por exemplo campos de senha e texto . A tag principal para a
abertura de um formulário é a tag <form>
que indica a abertura do formulário e possui os atributos:
accept-charset
ele especifica o tipo de codificação de caracter.
action especifica
onde enviar o´arquivo do formulário quando ele é enviado.
autocomplete
completa automaticamente o formulário e possui os valores on off
enctype especifica como o arquivo do
formulário deve ser codificado quando enviado para o servidor esse atributo só
funciona se o method="post".
method especifica o método
HTTP para o envio de formulário de dados e possui os valores get e post.
name especifica o nome do
formulário possui o valor text.
novalidate
valor novalidate, especifica que o formulário não deve ser validado quando
enviado.
target Especifica onde
exibir a resposta que é recebido após enviar o formulário possui os valores,
_blank a resposta aparce numae nova janela, _self a resposta aparece no mesmo
quadro(frame), _parent a resposta é mostrada no quadro principal, _top a
resposta aparece em todo o corpo da janela, framename a resposta aparece na
frame com o nome indicado.
input
A tag <input> especifica um campo de entrada onde o
usuário pode inserir dados.<input> é usado dentro de um elemento
<form> para declarar controles de entrada que permitem aos usuários
inserir dados. Essa tag possui diversos atributos são eles:
Autocomplete on/off
indica quando um elemento input deve se auto-completar.
Autofocus
especifica que um elemento input deve automaticamente receber foco quando a
página carregar.
form form-id
especifica para qual formulário o input pertence
.
O atributo accept especifica os tipos de arquivos
que o servidor aceita (que podem ser enviados através de um arquivo de upload). O
atributo accept só pode ser usado com <input type="file">.
Possui os valores audio/* para
arquivos de audio, video/* para
arquivos de video, image/* para arquivos de imagem e Mime_type para qualquer arquivo suportado.
O atributo alt oferece um texto alternativo para o usuário, se ele por alguma
razão não pode ver a imagem. O atributo alt só pode ser usado com <input
type="image">.
O atributo autocomplete
especifica se um campo de entrada deve se auto completar. Ele permite que o
navegador preveja o valor. Este atributo trabalha com os seguintes tipos
<input>: text, search, url, tel, email, password, datepickers, range e color.
Possui os valores on off.
O atributo autofocus é um
atributo booleano.Quando presente, ele especifica que um elemento <input>
deve receber automaticamente o foco quando a página é carregada.
O atributo checked é um
atributo booleano.Quando presente, ele especifica que um elemento <input>
deve ser pré-selecionadas, quando a página é carregada.O atributo verificado
pode ser usado com<input type="checkbox"> e <input
type="radio">.O atributo verificado também pode ser definido após
o carregamento da página, com um JavaScript.
O atributo disabled é um
atributo booleano. Quando presente, ele especifica que o elemento <input>
deve ser desativado.O atributo disabled pode ser configurado para impedir um
usuário de usar o elemento <input> até alguma outra condição foi cumprida
(como selecionar uma caixa de verificação, etc.) Em seguida, um JavaScript
poderia remover o valor desativado, e fazer o elemento <input> utilizável.
O atributo disabled não funciona com <input type="hidden">.
O atributo de form especifica
um ou mais formulários que o elemento <input> pertence. Possui o valor
form_id.
O atributo formaction especifica
a URL do arquivo que irá processar o controle de entrada, quando o formulário é
enviado.Ele substitui o atributo do elemento <form> action. Ele só é
usado com type = "submit" e type = "image".
Ex:<input
formaction=”url”>
O atributo formenctype especifica como os dados
dos formulários devem ser codificados quando enviados para o servidor (apenas
para formulários com method = "post")
O atributo formenctype substitui o atributo enctype do elemento
<form>.O atributo formenctype é usado com type = "submit" e
type = "image". Possui os valores application/x-www-form-urlencoded Todos
os caracteres são codificados antes de serem enviadas (espaços são convertidos
em "+" símbolos e caracteres especiais são convertidos para valores
HEX ASCII), e multipart/form-data Nenhum character é codificado, text/plain character simples são convertidos em símbolos
"+", mas nenhum caracter especial é codificado.
O atributo
novalidate é um atributo booleano. Quando presente, ele especifica que o
elemento <input> não deve ser validado quando enviado. O atributo
formnovalidate substitui o atributo do elemento novalidate <form>. O
atributo formnovalidate só pode ser usado com type = "submit".
Ex: <input
formnovalidate="formnovalidate">
O atributo list refere-se a um elemento
<datalist> que contém as opções pré-definidas para um elemento
<input>.
Ex: <input
list="datalist_id">
O atributo max especifica o
valor máximo para um elemento <input>. Use o atributo max junto com o
atributo min para criar uma faixa de valores legais.O máximo e mínimo atributos
funciona com os seguintes tipos de entrada: number, range, date, datetime,
datetime-local, month, time e week. Possui os valores Number e date.
O atributo maxlength especifica o número máximo de
caracteres permitidos no elemento <input>. O seu valor é dado por um número.
O atributo min
especifica o valor mínimo para um elemento <input>.Use o atributo min
junto com o atributo máximo para criar uma faixa de valores legais. O Max e min
atributos funcionam com os seguintes tipos de entrada: number, range, date,
datetime, datetime-local, month, time e week.
O atributo multiple
é um atributo booleano.Quando presente, ele especifica que o usuário tem
permissão para inserir mais de um valor no elemento <input>.O atributo
multiple trabalha com os seguintes tipos de entrada: email e file.
O atributo src
especifica o URL da imagem para usar como um botão de envio. Ele é necessário
para <input type="image">, e só pode ser usado com <origem
type="image">.
O atributo
placeholder especifica um curto espaço com uma dica que descreve o valor esperado de
um campo de entrada (por exemplo, um valor de amostra ou uma curta descrição do
formato esperado).A dica é exibida no campo de entrada antes de o usuário
digitar um valor.O atributo placeholder trabalha com os seguintes tipos de
entrada: text, search, url, tel, email e password.
O atributo de value
especifica o valor de um elemento <input>.O atributo de value é usado de
forma diferente para diferentes tipos de entrada:
Para o "bottom", "reset" e "submit" -
define o texto no botão.
Para "text", "password" e "hidden" -
define o valor inicial (default) do campo de entrada.
Para "checkbox", "radio", "image" - define
o valor associado com a entrada (este é também o valor que é enviado em submit).
Este atributo é necessário com <input type="checkbox"> e
<input type="radio">.Ele não pode ser usado com <input
type="file">.
O atributo type especifica o tipo de elemento
<input> para exibir.O tipo padrão é: texto, porém existem diversos
outros são eles:
Button
Define um botão clicável ( usado principalmente com JavaScript para
ativar um script)
Checkbox Define
uma caixa de seleção
color Define um
seletor de cores
Date Define um
controle data (ano , mês e dia (sem tempo ) )
Datetime Define
um controle de data e tempo (ano , mês, dia , hora, minuto , segundo e fração
de segundo , com base no fuso horário UTC)
email Define um
campo de um endereço de e-mail
file Define um
campo de arquivo e selecione uma "Browse ... " botão (para upload de
arquivos )
Hidden Define um
campo de entrada oculto
image Define uma
imagem como o botão submit
month Define um
mês e controle de ano (sem fuso horário)
number Define um
campo para digitar um número
Password Define
um campo de senha (caracteres são mascarados )
radio Define um
botão de rádio
range Define um
controle para digitar um número , cujo valor exato não é importante (como um
controle deslizante )
reset Define um
botão reset ( reseta todos os valores do formulário para os valores padrão )
search Define um
campo de texto para inserir uma seqüência de pesquisa
submit Define um
botão de envio
tel Define um
campo para digitar um número de telefone
Text padrão .
Define um campo de texto de linha única ( largura padrão é de 20 caracteres )
time Define um
controle para entrar em um tempo (sem fuso horário)
url Define um
campo para digitar uma URL
week Define uma
semana e controle de ano (sem fuso horário)
Textarea
A tag <textarea> define um multi-linha de controle
de entrada de texto.
Autofocus possui o valor
autofocus Especifica que uma área de texto deve receber automaticamente o foco
quando a página é carregada.
Cols number,
especifica a largura visível de uma área de texto
Disabled especifica que uma
área de texto deve ser desativado
form form_id Especifica a
quantos formulários a área de texto pertence
maxlength Especifica o número máximo de
caracteres permitidos na área de texto recebe o valor number.
Name, valor text,
Especifica um nome para uma área de texto
Placeholder,
valor text, Especifica uma pequena dica que descreve o valor esperado de uma
área de texto
Readonly, valor readonly,
Especifica que uma área de texto deve ser somente leitura
required, valor required,
Especifica que uma área de texto é necessária / deve ser preenchido
rows, valor number,
Especifica o número de linhas visíveis numa área de texto
wrap,
valores hard soft, especifica como o texto numa área de texto deve ser
ajustada quando apresentado em um formulário.
Label
A tag <label>
define um rótulo para um elemento <input>. Ele fornece uma melhoria de
usabilidade para os usuários do mouse, porque se o usuário clicar sobre o texto
dentro do elemento <label>, alterna o controle.O atributo da tag
<label> deve ser igual ao atributo id do elemento input para que fiquem
vinculados. Possui os atributos for, que especifica qual o elemento o label é
vinculado e form que especifica uma ou mais formulários a que pertence.
Fieldset
A tag <fieldset> é usada para agrupar
elementos relacionados em um formulário.A tag <fieldset> desenha uma
caixa em torno dos elementos relacionados. Possui os seguintes atributos disabled
especifica que um grupo de elementos de formulário relacionados deve ser
desativado, form Especifica uma ou mais formas a fieldset pertence, name do
texto Especifica um nome para o conjunto de campos.
Legend
A tag <legend> define uma legenda para
o elemento <fieldset>.
Optgroup
O <optgroup> é usado para opções de
grupo relacionado em uma lista. Se você tem uma longa lista de opções, grupos
de opções relacionadas são mais fáceis de manusear para um usuário. Possui os
atributos disabled que especifica que um grupo ou opção deve ser
desativada. Label que especifica um
rótulo para um grupo opção
Option
A tag <option> define uma opção em uma
lista de seleção.Os elementos <option> vão dentro de uma <select>
ou <datalist>. Possui os seguintes atributos:
Disabled com o valor disabled, ele especifica que uma opção deve
ser desativada.
Label com o valor text, especifica um rótulo
mais curto para uma opção.
Selected com o valor selected, especifica que
uma opção deve ser pré-selecionado quando a página é carregada.
value com
o valor text, especifica o valor a ser enviado para um servidor.
Keygen
A tag <keygen> especifica um campo
gerador de chaves de par usado para formulários.Quando o formulário é enviado,
a chave privada é armazenada localmente, e a chave pública é enviada para o
servidor.
Possui os seguintes atributos:
Autofocus com o valor autofocus, especifica
que um elemento <keygen> deve receber automaticamente o foco quando a
página é carregada.
Challenge com o valor challenge, especifica
que o valor do elemento <keygen> deve ser desafiado quando enviado.
Disabled com o valor disabled, especifica que um
elemento <keygen> deve ser desativado.
Form recebe de valor o id do form, especifica
uma ou mais formas do elemento <keygen> pertence.
Name com o valor name, Define o nome para um elemento <keygen> .
Keytype pode recer os valores, rsa, dsa, ec, ele
especifica o algoritmo da chave de segurança.
Datalist
A tag <datalist> especifica uma lista
de opções pré-definidas para um elemento <input>. Ela é usada para
fornecer um recurso de "auto completar" na <input> . Os
usuários verão uma lista de opções pré-definidas com os dados introduzidos. Use
lista de atributos do elemento <input> para vinculá-lo em conjunto com um
elemento <datalist>.
Output
A tag <output> representa o resultado
de um cálculo (como uma realizada por um script). Possui os atributos:
for que recebe o valor do id do elemento. Ele
especifica a relação entre o resultado do cálculo, e os elementos utilizados no
cálculo.
Form recebe o valor do id do formulário. Ele especifica uma ou mais
formas no elemento de saída pertence.
Name especifica um nome para o elemento de
saída.
Exemplo
de Formulário
<!DOCTYPE>
<html lang="pt-BR">
<head>
</head>
<body>
<form
action="form.php" method="post">
<label
for="nome"> Nome: </label>
<input
type="text" id="nome"><br>
<label
for="idade"> Idade: </label>
<input
type="number" id="idade"><br>
<label
for="senha"> Senha: </label>
<input
type="password" id="senha"><br>
<fieldset>
<legend>
Sexo: </legend>
<input
type="radio" name="sexo" id="m">
<label
for="m"> Masculino </label><br>
<input
type="radio" name="sexo" id="f">
<label
for="m"> Feminino </label><br>
</fieldset>
<fieldset>
<legend>
Estado Civil: </legend>
<input
type="radio" name="ec" id="s">
<label
for="s"> Solteiro </label><br>
<input
type="radio" name="ec" id="c">
<label
for="c"> Casado </label><br>
<input
type="radio" name="ec" id="d">
</fieldset>
<fieldset>
<legend>
Preferências </legend>
<input
type="checkbox" name="cf" id="lasanha">
<label
for="lasanha"> Doce </label><br>
<input
type="checkbox" name="cf" id="macarrao">
<label
for="macarrao"> salgado </label><br>
<input
type="checkbox" name="cf" id="nhoqui">
<label
for="nhoqui"> sem gosto </label><br>
<input
type="checkbox" name="cf" id="arroz">
<label
for="arroz"> Agua </label><br>
</fieldset>
<label
for="arquivo">Escolha um Arquivo</label>
<input
type="file" id="arquivo">
<label
for="cor">Selecione uma cor</label>
<input
type="color" id="cor"><br>
<label
for="data">Selecione uma Data</label>
<input
type="date" id="data"><br>
<label
for="email">Email</label>
<input
type="email" id="email"><br>
<label
for="numero">Número</label>
<input
type="number" id="numero" max="11"
min="2" step="2"><br>
<label
for="points">Points</label>
<input
type="range" id="points" min="1"
max="6"><br>
<label
for="url">URL</label>
<input
type="url" id="url"><br>
<select
id="navegadores" multiple>
<option>Selecione
uma Opção</option>
<option
value="SF">hoje</option>
<option
value="IE">Amanha</option>
<option
selected>Depois</option>
</section>
<label
for="browsers">Browsers</label>
<input="list_browsers"
id="browsers">
<datalist
id="list_browsers" id="browsers">
<option
value="Internet Explorer">
<option
value=" Firefox">
<option
value=" Chrome">
<option
value=" Opera">
<option
value=" Safari">
</datalist>
<input
type="submit" value="enviar">
<input
type="reset" id="Redefinir"><br>
</body>
</html>
