Dicas e Tutoriais de WebDesign .: Como Criar Formulários HTML

Como Criar Formulários HTML

Posted by Rafael | | Category: HTML |

Crie formularios em sua pagina na web

Os formulários constituem-se numa matéria de extrema importância no HTML, uma vez que são responsáveis pela interação entre um usuário e o servidor, possibilitando a troca de dados ou informações.

Quem ainda não viu uma página com campos para entrada de texto, botões de múltiplas escolhas ou menu de opções em listbox ou combobox?

Um formulario é iniciado com

. Internamente a essas marcações especificamos o tipo de campo desejado para entrada de dados:

: text (linha única para texto), password, checkbox, radio, submit (button) e reset (button);

: campo de texto de múltiplas linhas.</p><div style="text-align: center;"> </div><p style="text-align: center;">Cada um destes campos de entrada de dados possui um atributo name  associado a um nome, de tal forma que o parâmetro action possa receber  uma variável com o valor digitado pelo usuário.</p><div style="text-align: center;"> </div><p style="text-align: center;">Uma vez que a finalidade básica de um formulário é possibilitar a  troca de dados entre o usuário e um servidor, o formulário precisa saber  o método (method) em que os dados serão enviados do browser para o  servidor. Há dois métodos:</p><div style="text-align: center;"> </div><p style="text-align: center;">post - voltado à transferência de grandes quantidades de dados,  transferindo a informação assim que a URL estiver habilitada. Quando o  servidor recebe uma ativação via post, ele continua aberto para receber  informações.</p><div style="text-align: center;"> </div><p style="text-align: center;">get - Suporta somente 128 caracteres e os ddados fazem parte da URL associado à consulta enviada para o servidor.</p><div style="text-align: center;"> </div><p style="text-align: center;">O formulário também precisa saber o endereço URL do script ao qual  serão enviados seus dados. Especificamos esse endereço através do  parâmetro action.</p><div style="text-align: center;"> </div><p style="text-align: center;">Vejamos alguns exemplos básicos com <input>:</p><div style="text-align: center;"> </div><p style="text-align: center;">1º. text:</p><div style="text-align: center;"> </div><p style="text-align: center;"><form method=”post” action=”teste.php”><br> Digite o nome de sua cidade:<br> <input type=”text” name=”Cidades” value=Araçatuba size=”15″ maxlenght=”15″><br> </form></p><div style="text-align: center;"> </div><p style="text-align: center;">O exemplo acima cria um text, que permite a entrada de um texto.</p><div style="text-align: center;"> </div><p style="text-align: center;">Parâmetros opcionais:</p><div style="text-align: center;"> </div><p style="text-align: center;">value - atribui um valor inicial para o campoo;</p><div style="text-align: center;"> </div><p style="text-align: center;">size - especifica o tamanho do campo;></p><div style="text-align: center;"> </div><p style="text-align: center;">maxlenght - especifica o número máxximo de caracteres aceitos pelo campo.</p><div style="text-align: center;"> </div><p style="text-align: center;">2º. Agora um exemplo com password (campo para entrada de senhas):</p><div style="text-align: center;"> </div><p style="text-align: center;"><form method=”post” action=”teste.php”><br> Digite uma senha:<br> <input type=”password” name=”Senha” value=”minhasenha” size=”10″ maxlenght=”10″><br> </form></p><div style="text-align: center;"> </div><p style="text-align: center;">A diferença entre text e password é que, sendo este último campo  apropriado para entrada de senhas, os caracteres são apresentados como  asteriscos (*). Os parâmetros value, size e maxlenght são opcionais.</p><div style="text-align: center;"> </div><p style="text-align: center;">3º. Um checkbox é um campo de múltipla escolha onde o usuário pode escolher mais de uma opção:</p><div style="text-align: center;"> </div><p style="text-align: center;">Que outro curso você quer ver em nossas páginas:<p><br> <input type=”checkbox” name=”preferencia” value=”cbuilder” checked>C++Builder<br> <input type=”checkbox” name=”preferencia” value=”php”>PHP<p><br> <input type=”checkbox” name=”preferencia” value=”delphi”>Delphi<br> <input type=”checkbox” name=”preferencia” value=”vb”>Visual Basic<p><br> <input type=”checkbox” name=”preferencia” value=”asm”>Assembly<br> <input type=”checkbox” name=”preferencia” value=”java”>Java</p><div style="text-align: center;"> </div><p style="text-align: center;">O parâmetro checked, que é opcional, determina a marcação da opção  inicialmente. Já value é obrigatório pois especifica o valor da opção a  ser enviada ao servidor.</p><div style="text-align: center;"> </div><p style="text-align: center;">4º. Radio é mais um formulário de múltipla escolha, mas nesse caso o  usuário poderá escolher apenas uma opção. Os parâmetros seguem o mesmo  roteiro do checkbox:</p><div style="text-align: center;"> </div><p style="text-align: center;">Que outro curso você quer ver em nossas páginas:<p><br> <input type=”radio” name=”preferencia” value=”cbuilder” checked>C++Builder<br> <input type=”radio” name=”preferencia” value=”php”>PHP<p><br> <input type=”radio” name=”preferencia” value=”delphi”>Delphi<br> <input type=”radio” name=”preferencia” value=”vb”>Visual Basic<p><br> <input type=”radio” name=”preferencia” value=”asm”>Assembly<br> <input type=”radio” name=”preferencia” value=”java”>Java</p><div style="text-align: center;"> </div><p style="text-align: center;">5º. Um botão reset pode ser usado para restaurar o valor padrão de todos os campos de um formulário:</p><div style="text-align: center;"> </div><p style="text-align: center;"><input type=”reset”></p><div style="text-align: center;"> </div><p style="text-align: center;">Se colocado, o parâmetro value especifica o texto do botão.</p><div style="text-align: center;"> </div><p style="text-align: center;">6º. Por sua vez, submit enviará as opções ou informações digitadas ao servidor:</p><div style="text-align: center;"> </div><p style="text-align: center;"><input type=”submit” value=”enviar”></p><div style="text-align: center;"> </div><p style="text-align: center;">São opcionais os parâmetro value que especifica o texto a ser exibido  no botão e o parâmetro name que determinará a transmissão do valor  contido em value, permitindo a colocação de vários botões.</p><div style="text-align: center;"> </div><p style="text-align: center;">Agora vamos conhecer os campos que podem ser construídos com <select>:</p><div style="text-align: center;"> </div><p style="text-align: center;">1º. Listbox ;</p><div style="text-align: center;"> </div><p style="text-align: center;">2º. Combobox;</p><div style="text-align: center;"> </div><p style="text-align: center;">parâmetros:</p><div style="text-align: center;"> </div><p style="text-align: center;">Listbox e Combobox podem ser considerados campos irmãos. A diferença  básica entre eles consiste na existência ou não do parâmetro size (que  especifica o número de linha exibidas). Se inserirmos esse parâmetro,  estaremos construindo um listibox; se não especificarmos, um combobox.</p><div style="text-align: center;"> </div><p style="text-align: center;">Um listbox:</p><div style="text-align: center;"> </div><p style="text-align: center;">Que outro curso você quer ver em nossas páginas:<p><br> <select name=”cursos” size = “10″ multiple><br> <option value=”bcb”>C++Builder</option><br> <option value=”php”>PHP</option><br> <option value=”delphi”>Delphi</option><br> <option value=”vb”>Visual Vasic</option><br> <option value=”asm”>Assembly</option><br> <option value=”java”>Java</option><br> </select></p><div style="text-align: center;"> </div><p style="text-align: center;">Um Combobox:</p><div style="text-align: center;"> </div><p style="text-align: center;">Que outro curso você quer ver em nossas páginas:<p><br> <select name=”cursos”><> <option value=”bcb”>C++Builder</option><br> <option value=”php”>PHP</option><br> <option value=”delphi”>Delphi</option><br> <option value=”vb”>Visual Vasic</option><br> <option value=”asm”>Assembly</option><br> <option value=”java”>Java</option><br> </select></p><div style="text-align: center;"> </div><p style="text-align: center;">O parâmetro opcional multiple permite a seleção de mais de uma linha;</p><div style="text-align: center;"> </div><p style="text-align: center;">Cada <option> acrescenta uma linha ao componente;</p><div style="text-align: center;"> </div><p style="text-align: center;">value especifica o valor a ser enviado ao servidor se tal item for selecionado;</p><div style="text-align: center;"> </div><p style="text-align: center;">Inserimos o texto que queremos expor entre <option> e </option>:</p><div style="text-align: center;"> </div><p style="text-align: center;"><option>Texto que aparecerá no item</option></p><div style="text-align: center;"> </div><p style="text-align: center;">Agora vamos conhecer <textarea>:</p><div style="text-align: center;"> </div><p style="text-align: center;"><textarea name=”opniao” rows=”5″ cols=”40″><br> digite aqui sua avaliação deste curso<br>

Currently have 0 comentários:

Como Criar Formulários HTML

Leave a Reply

Labels

Categories

Labels

Labels

Labels