Como adicionar botões a um formulário HTML5

O botão onipresente é um grampo de qualquer página web, e se você está construindo sua página usando HTML5, você pode incluir todos os tipos usuais de botões. Existem três tipos principais de botões, embora todos eles parecem idênticos para o usuário:

  • botão padrão: Um botão padrão apenas se parece com um botão. Estes botões são usados ​​um pouco na programação javascript para acionar algum tipo de ação no lado do cliente.

  • Botão de envio: Este botão é normalmente utilizado na programação do lado do servidor. Ele empacota-se todos os dados no formulário e envia-lo para um programa que vive em um servidor Web remoto.

  • Botão de reset: Este tipo botão especial foi construído com comportamento. Quando o usuário clica em um botão de reset, todos os dados no formulário são redefinidos para seus valores padrão originais.

A forma na figura mostra cada tipo de botão, todos olhando praticamente o mesmo:

image0.jpg

Além dos três tipos de botões, elementos de botão pode ser criados de duas formas diferentes. A primeira é a entrada element- basta usar o seguinte código:

Quando usado dessa maneira, o valor propriedade torna-se o rótulo do botão, eo digitar propriedade indica qual o tipo de botão que você pretende construir. Não é necessário adicionar um marcador a um botão porque o rótulo está implícito.

Mas porque os botões não são realmente utilizados para a entrada, mas para especificar que o usuário quer fazer alguma coisa, uma nova sintaxe botão evoluiu:

Isto introduz uma sintaxe botão tag com tags de início e fim. o digitar atributo é usado para indicar qual o tipo de botão que deseja usar. (O padrão é "enviar", mas é usado principalmente no desenvolvimento do lado do servidor.)

o botão sintaxe tende a ser mais limpa, e faz CSS formatação de um pouco mais fácil, como botões raramente são formatados da mesma forma que os outros elementos de entrada.

O código para uma página web com ambos os tipos de botão se parece com isso:

formDemo.html

Demonstração Form

menu