Formulários

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>