Exemplo de formulário HTML. Formulários em HTML

Descrição

Marcação

Permitido dentro do contêiner

Sintaxe

Atributos

Define a codificação na qual o servidor pode receber e processar dados.

Obrigatório.

Arroz. 1. Visualização dos elementos do formulário em uma janela do navegador

Um formulário HTML é a parte de um documento que permite ao usuário inserir informações de interesse, que posteriormente podem ser aceitas e processadas no servidor. Em outras palavras, os formulários são utilizados para coletar informações inseridas pelos usuários.

Para determinar a qual elemento do formulário o rótulo atual pertence, você deve usar o atributo for da tag . O valor do atributo for deve corresponder ao valor do atributo global do elemento do formulário ao qual o rótulo será aplicado. O atributo for não pode ser usado se o elemento estará dentro do elemento .

Vejamos um exemplo de uso:

Neste exemplo nós:

• Dentro primeiro formulários:
  • Postado dois botões de opção ( ) para selecionar uma dentre um número limitado de opções. Observe novamente que para botões de opção no mesmo formulário o mesmo nome deve ser especificado, indicamos valores diferentes. Para primeiro checked , que especifica que o elemento deve ser pré-selecionado quando a página for carregada (em nesse caso botão de opção com o valor yes ). Além disso, especificamos atributos globais para os botões de opção, que definem um identificador exclusivo para o elemento.
  • Colocado dois elementos , que definem os rótulos de texto para nossos campos de texto. Observe que usamos o atributo for para determinar a qual elemento do formulário o rótulo atual pertence. O valor do atributo for corresponde ao valor do atributo global do botão de opção que precisamos.
• Dentro segundo formulários:
  • Postado dois botões de opção ( ) para selecionar uma dentre um número limitado de opções. Para segundo Para botões de opção, especificamos um atributo verificado, que indica que o elemento deve ser pré-selecionado quando a página for carregada (neste caso, um botão de opção com o valor no ). Além disso, especificamos valores exclusivos para os botões de opção dentro do formulário e os mesmos nomes.
  • Colocado dois elementos , colocamos nossos botões de opção dentro deles. Ao contrário do método anterior, não há necessidade de especificar atributos globais (identificador do elemento) para botões de opção e usar o atributo for para rótulos de texto para se referir a eles (fazer uma ligação).

No navegador, ambas as opções (métodos) para usar rótulos de texto parecem idênticas:

Dica para campos de entrada

Vejamos um exemplo de uso:

Neste exemplo, especificamos para o elemento com tipo text (um campo de texto de linha única) e tipo password (campo de senha), uma dica de texto para o usuário (o atributo de espaço reservado) que descreve o valor esperado para a entrada.

O resultado do nosso exemplo:

Perguntas e tarefas sobre o tema

Antes de passar para o próximo tópico, conclua a tarefa prática:

• Usando o conhecimento que você adquiriu, crie o seguinte formulário de pedido:

Uma ressalva: em campos onde a seleção é esperada, deve ser possível selecionar clicando no texto, e não apenas no próprio elemento.

Depois de concluir o exercício, inspecione o código da página abrindo o exemplo em uma janela separada para ter certeza de que fez tudo corretamente.

Tags HTML que definem formulários HTML no site

Criamos sites e páginas individuais na Internet para se comunicar com os visitantes.

Formulários HTML são utilizados para cadastrar visitantes no site, para pesquisas e votações interativas, permitem enviar mensagens, fazer compras e assim por diante. HTML O formulário é criado com uma finalidade: coletar e posteriormente transmitir informações para processamento por meio de script de software ou via e-mail.

Exemplo de formulário HTML | Faça login no site

Tags, atributos e valores

• - determine a forma.
• name="" - define o nome do formulário.
• method="" - define o método de envio de dados do formulário. Valores: "get" (padrão) e "post" . O método "post" é frequentemente utilizado, pois permite a transferência de grandes quantidades de dados.
• action="" - define a URL na qual os dados são enviados para processamento. No nosso caso - enter_data.php ..
• - definir elementos de formulário como botões, interruptores, campos de texto para entrada de dados.
• type="text" - define um campo de texto para entrada de dados.
• type="password" - define um campo para inserção de senha, com o texto exibido na forma de asteriscos ou círculos.
• type="checkbox" - define um botão de opção.
• type="hidden" - define um elemento de formulário oculto - usado para transmitir Informações adicionais para o servidor.
• size="25" - comprimento do campo de texto em caracteres.
• maxlength="30" - o número máximo permitido de caracteres inseridos.
• value="" - define o valor que será enviado para processamento se for referente a botões de opção ou switches. O valor deste atributo como parte de um campo de texto ou botão será mostrado como, por exemplo, Vasya ou Login no exemplo acima.

Exemplo de formulário HTML | Comentários no site

Tags, atributos e valores

• action="http://site/comments.php" - define a url para onde serão enviados os dados do formulário.
• id="" - define o nome e identificador do elemento do formulário.
• name="" - define o nome do elemento do formulário.
• - defina um campo de texto como parte do formulário.
• cols="" - determina o número de colunas do campo de texto do formulário.
• rows="" - define o número de linhas do campo de texto do formulário.

Se entre coloque o texto, ele será mostrado dentro do campo como um exemplo que pode ser facilmente removido.

Exemplo de formulário HTML | Lista suspensa

Tags, atributos e valores

• - defina uma lista com posições para selecionar.
• size="" - determina o número de posições visíveis na lista. Se o valor for 1 , estamos lidando com uma lista suspensa.
• - determinar as posições (itens) da lista.
• value="" - contém o valor que será enviado pelo formulário para a url especificada para processamento.
• selecionado="selecionado" - destaca um item da lista como exemplo.

Exemplo de formulário HTML | Lista com barra de rolagem

Ao aumentar o valor do atributo size="", obtemos uma lista com uma barra de rolagem:

Para esta opção, utilize a flag multiple="multiple", que possibilita selecionar múltiplas posições. Sua ausência permite selecionar apenas um item.

Veja adicionalmente:

Os formulários são projetados para enviar dados do usuário para o servidor web. Os formulários em HTML podem consistir em campos e áreas de texto, caixas de seleção e botões de opção e listas suspensas. Todos estes são elementos da forma. Cada elemento serve para transmitir algum significado ao site.
Basicamente, um formulário HTML é uma página da web na qual você vê áreas para inserir suas informações. Depois de preencher o formulário e clicar em enviar, as informações do formulário são empacotadas e enviadas ao servidor web para processamento por um script do lado do servidor (arquivo manipulador). Após o processamento, outra página da web será retornada como resposta. A figura a seguir demonstra claramente como o formulário funciona:

Não há nada difícil em criar formulários HTML. A maneira mais fácil de ter uma ideia dos formulários é analisar um pouco do código HTML e ver como funciona. O exemplo a seguir mostra a sintaxe para criar um formulário HTML simples:

Exemplo: formulário HTML simples

• Experimente você mesmo »

Meu primeiro formulário:
Nome:
Sobrenome:

Elemento

Os formulários são inseridos em páginas da web usando o elemento . Ele fornece um contêiner para todo o conteúdo do formulário, incluindo elementos como campos de texto e botões, bem como quaisquer outras tags HTML. No entanto, não pode conter outro elemento .
Para enviar o formulário ao servidor, utilize o botão “Enviar”, o mesmo resultado será obtido se você pressionar a tecla “Enter” dentro do formulário. Caso o botão “Enviar” não esteja presente no formulário, a tecla “Enter” poderá ser utilizada para enviar.
A maioria dos atributos do elemento afetar o processamento do formulário, não o seu design. Os mais comuns são Ação E método. Atributo Ação contém a URL para a qual as informações do formulário serão enviadas para processamento pelo servidor. Atributo métodoé o método HTTP que os navegadores devem usar para enviar dados do formulário.

Elemento

Quase todos os campos do formulário são criados usando o elemento (da entrada em inglês - entrada). Aparência elemento mudar dependendo do valor de seu atributo tipo:

Aqui estão alguns valores de atributos tipo:

Inserindo texto e senha

Um dos tipos mais simples de elementos de formulário é um campo de texto, projetado para inserir texto em uma única linha. Este tipo a entrada de texto é definida por padrão e, portanto, é o campo de uma linha que será exibido se você esquecer de especificar o atributo tipo. Para adicionar um campo de entrada de texto de uma linha a um formulário, você deve dentro do elemento cadastre o atributo tipo com valor de texto:

O campo de entrada de senha é um tipo de campo de texto normal. Ele oferece suporte aos mesmos atributos de um campo de texto de linha única. Atributo nome define o nome do campo de entrada de senha que será enviado ao servidor junto com a senha digitada pelo usuário. Para criar um campo de senha, você precisa definir o atributo de senha como tipo(senha (inglês) - senha):

Um exemplo de criação de um formulário com campo de senha:

Exemplo: campo Senha

• Experimente você mesmo »

Seu login:

Senha:

Seu login:

Senha:

Você pode usar o atributo em conjunto com este atributo comprimento máximo, cujo valor determina o número máximo de caracteres que podem ser inseridos em uma determinada string. Você também pode definir o comprimento do campo de entrada usando o atributo tamanho. Por padrão, a maioria dos navegadores limita a largura de um campo de texto a 20 caracteres. Para controlar a largura dos elementos de novos formulários, em vez de um atributo tamanho, recomendamos o uso de Cascading Style Sheets (CSS).
Atributo valor especifica o valor exibido por padrão no campo de texto quando o formulário é carregado. Ao inserir um valor padrão no campo, você pode explicar ao usuário exatamente quais dados e em que formato deseja que o usuário insira aqui. É como uma amostra, pois é muito mais conveniente para o usuário preencher o formulário, vendo um exemplo à sua frente.

Interruptores (rádio)

Elemento tipo rádio cria chaves que usam o princípio lógico "OR", permitindo selecionar apenas um dos vários valores: se você selecionar uma posição, todas as outras ficarão inativas. A sintaxe básica de um elemento de alternância é:

Atributo nome para switches é necessário e desempenha um papel importante na combinação de vários elementos de switch em um grupo. Para combinar botões de opção em um grupo, você deve definir o mesmo valor de atributo nome e valor de atributo diferente valor. Atributo valor define o valor do botão de opção selecionado a ser enviado ao servidor. O valor de cada elemento do botão de opção deve ser exclusivo dentro do grupo para que o servidor saiba qual opção de resposta o usuário escolheu.
Atribuir presença verificado(do inglês - instalado) no elemento switch indica qual das opções propostas deve ser selecionada por padrão ao carregar a página, se necessário. Este atributo pode ser definido apenas para um elemento de botão de opção do grupo:

• Experimente você mesmo »

Quantos anos você tem?

1. menores de 18 anos
2. de 18 a 24
3. de 25 a 35
4. mais de 35

O atributo de ação.

Principal para elemento

O arquivo de processamento está localizado no servidor mytestserver.com em uma pasta pasta de nomes e o nome do script do servidor que irá processar os dados - obrabotchik.php. Todos os dados que você inseriu no formulário da página web serão transferidos para ele. A extensão .php indica que o formulário especificado é processado por um script escrito em PHP. O manipulador em si pode ser escrito em outra linguagem, por exemplo, pode ser a linguagem de script Python, Ruby, etc.
É aconselhável sempre definir o valor do atributo Ação. Caso o formulário deva passar valores para a mesma página onde está localizado, forneça uma string vazia como valor do atributo action: action="".

atributo de método

Atributo método especifica como as informações devem ser transferidas para o servidor. O método de envio do formulário escolhido depende dos dados que você deseja enviar com o formulário. O volume desses dados desempenha um papel importante aqui. Os mais populares são dois métodos de transferência dos dados de origem do formulário do navegador para o servidor: PEGAR E PUBLICAR. O método pode ser definido como qualquer um que você escolher e, se você não especificá-lo, o padrão será usado PEGAR. Vamos considerar o uso de cada um deles.

Método POST

Método PUBLICAR os pacotes formam os dados e os enviam ao servidor sem que o usuário perceba, pois os dados estão contidos no corpo da mensagem. Navegador da Web, ao usar o método PUBLICAR envia uma solicitação ao servidor que consiste em cabeçalhos especiais seguidos de dados de formulário. Como o conteúdo desta solicitação está disponível apenas para o servidor, o método PUBLICAR usado para transmitir dados confidenciais, como senhas, detalhes de cartões bancários e outras informações pessoais dos usuários. Método PUBLICAR também adequado para envio de grandes volumes de informações, pois diferentemente do método PEGAR, não tem restrições quanto ao número de caracteres transmitidos.

Método GET

Como você já sabe, a principal função de um navegador é receber páginas web do servidor. Então, quando você usa o método PEGAR, seu navegador simplesmente recupera a página da web como sempre faz. Método PEGAR também agrupa os dados do formulário, mas os anexa ao final da URL antes de enviar a solicitação ao servidor. Para entender como o método funciona PEGAR, vamos vê-lo em ação. Abra o primeiro exemplo desta lição (Exemplo: Formulário HTML Simples) no Bloco de Notas (por exemplo Notepad++) e faça uma pequena alteração no código HTML: