Capo de Texto
É onde o usuário irá digitar os texto (nome, endereço, etc),alguns elementos irão nos dizer o que este campo de texto irá fazer e que tipo de dado ele irá trabalhar.
* Type - Determina o tipo de campo (Text, submit e password),
* Name - Atribui um determinado nome para o campo de modo que vocêpossa fazer referência mais tarde!
* Size - Dfine o tamanho horizontal da largura do campo. Sua unidade de medida é em espaços em branco.
* maxlength - Determina o número máximo de caracteres que podem ser inseridos.
Ex:
< form method="post" action="mailto:seuemail@email.com">
Name: < input type="text" size="10" maxlength="40" name="name">
Password: < input type="password" size="10" maxlength="10" name="password">
< /form>
O resultado será:
Email formulário
Agora vamos adicionar a funcionalidade ao nosso form. Geralmente o botão deve ser o último item a ser posto no form, seu nome normalmente é SUBMIT.
Além de adicionar o botão de envio, temos também de adicionar um destino de nossas informações e o metodo de envio!
Method - Nós so estaremos usando a funcionalidade do método "POST", que encia os dados sem apresentar qualquer informação ao visitante.
Action - Especifica a URL para enviar dados. Podendo ser enviado diretamente para um e-mail ou no caso de você usar programação como o PHP, você pode enviar os dados para o arquivo que irá trabalhar com esses dados.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
Name: < input type="text" size="10" maxlength="40" name="name" > < br/>
Password: < input type="password" size="10" maxlength="10" name="password" >< br/>
< input type="submit" value="Send" >
< /form>
O resultado será:
Radio Buttons
Dá ao usuário a opção de escolha ao usuário.
Value - Especifica o que será enviado. Somente o valoer será enviado para um determinado grupo de botões.
Name - Define o conjunto de radio buttons.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
What kind of shirt are you wearing? < br />
Shade:
< input type="radio" name="shade" value="dark">Dark
< input type="radio" name="shade" value="light">Light < br />
Size:
< input type="radio" name="size" value="small">Small
< input type="radio" name="size" value="medium">Medium
< input type="radio" name="size" value="large">Large < br />
< input type="submit" value="Email Myself">
< /form>
O resultado será:
Check Boxes
As caixas de seleção liberam o usuário para escolher várias opções. Os atributos NAME e VALUE, se equiparam aos do radio button.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
Selecione seu personagem animado favorito!
< input type="checkbox" name="toon" value="Goofy">Goofy
< input type="checkbox" name="toon" value="Donald">Donald
< input type="checkbox" name="toon" value="Bugs">Bugs Bunny
< input type="checkbox" name="toon" value="Scoob">Scooby Doo
< input type="submit" value="Email Myself">
< /form>
O Resultado será:
Drop Down List
A lista suspensa usa duas TAGS (SELECT e o OPTION). O select é a propria lista de cada opiton.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
College Degree?
< select name="degree">
< option>Choose One< /option>
< option>Some High School< /option>
< option>High School Degree< /option>
< option>Some College< /option>
< option>Bachelor's Degree< /option>
< option>Doctorate< /option>
< input type="submit" value="Email Yourself">
< /select>
< /form>
O resultado fica assim:
Selection Form
No entato outro tipo de form, uma lista de seleção destacada. Este formulário usa method"POST".
Vejamos:
< form method="post" action="mailto:seuremail@email.com">
Gênero Musical
< select multiple name="music" size="4">
< option value="emo" selected>Emo< /option>
< option value="metal/rock" >Metal/Rock< /option>
< option value="hiphop" >Hip Hop< /option>
< option value="ska" >Ska< /option>
< option value="jazz" >Jazz< /option>
< option value="country" >Country< /option>
< option value="classical" >Classical< /option>
< option value="alternative" >Alternative< /option>
< option value="oldies" >Oldies< /option>
< option value="techno" >Techno< /option>
< /select>
< input type="submit" value="Email Yourself">
< /form>
O resultado fica assim:
Upload Form
Para que um formulário de upload funcione você deverá usar de linguagem de programa o PHP, PERL ou JAVASCRIPT. Neste caso o código HTML só se faz para usr a interface para que o usuário saiba o que deve fazer.
Um formulário de upload é composto basicamente por 3 partes.
- Um campo oculto - Ele simplesmente limita o tamanho do arquivo.
- O campo de entrada - Neste campo o usuário tem a opção de digitar ou selecionar a URL.
- E o botão que manda o comando Upload.
O campo de texto neste caso assume o Type="File"
Vajamos:
< input type="hidden" name="MAX_FILE_SIZE" value="100" />
< input name="file" type="file" />
O resultado fica:
Text Area
< textarea>É o campo onde pode ser digitada um texto ou um comentário.
Vejamos:
< form method="post" action="mailto:seuemail@email.com">
< textarea rows="5" cols="20" wrap="physical" name="comments">
Entre com seu comentário
< /textarea>
< input type="submit" value="Email Yourself">
< /form>
O resultado final:
Repare que qualquer texto colocado entra as Tag de abertura e fechamento do textarea irão aparecer na campo!
Buttons < INPUT>
Usa-se a tag INPUT para criar os botões, o que irá definir seu trabalho será seu atributo TYPE, pois o atributo VALUE é o nome que aparece no botão.
Vejamos:
< input type="submit" value="Submit" />< br />
< input type="submit" value="Send" />< br />
< input type="submit" value="Submit Form" />< br />
O resultados é este:
< input type="reset" value="Reset" />
< input type="reset" value="Start Over" />
< input type="hidden" />
< input type="hidden" id="age" name="age" value="23" />
< input type="hidden" id="DOB" name="DOB" value="01/01/70" />
< input type="hidden" id="admin" name="admin" value="1" />
