Botões em Formulários
Parte da seção Fundamentals do Journey de HTML da Coddy — lição 45 de 60.
Os botões desempenham um papel fundamental em formulários, onde ajudam a enviar dados ou redefinir campos. Vejamos como eles funcionam:
Botão de Envio:
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
type="submit": Envia os dados do formulário para o servidor.
Botão de Reset:
<form>
<input type="text" name="name" value="John Doe">
<button type="reset">Reset</button>
</form>
type="reset": Limpa todos os campos e os redefine para seus valores padrão.
Desafio
FácilCrie um documento HTML que inclua um formulário com diferentes tipos de botões. O formulário deve ter os seguintes elementos:
- Um campo de entrada de texto com o name "message" e um placeholder que diz "Enter your message".
- Adicione um botão de envio (
<button type="submit">) com o texto "Send". - Adicione um botão de redefinição (
<button type="reset">) com o texto "Clear". - Adicione um botão genérico (
<button>) com o texto "Click Me".
Folha de consulta
Botões em formulários têm tipos diferentes para funções específicas:
Botão de Envio:
<button type="submit">Submit</button>type="submit": Envia os dados do formulário para o servidor
Botão de Redefinição:
<button type="reset">Reset</button>type="reset": Limpa todos os campos e os redefine para seus valores padrão
Botão Genérico:
<button>Click Me</button>- Botão padrão sem comportamento específico de formulário
Experimente você mesmo
<!DOCTYPE html>
<html>
<body>
<!-- Escreva o código aqui -->
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentals
1Fundamentos do HTML
O que é HTML?Estrutura Básica do HTMLTags e ElementosAninhamento e Fechamento de TagsComentários em HTML7Página de Perfil Pessoal
Visão Geral do ProjetoSeção de Cabeçalho
Foto de PerfilSeção Sobre MimLinks Sociais2Texto e Formatação
TítulosParágrafosQuebras de LinhaTexto em Negrito e ItálicoNegrito e Itálico NovamenteRecapitulação - Formatação8Formulários e Inputs Parte 1
Fundamentos de FormuláriosInputs de TextoAtributos de InputCampo de SenhaLabels para InputsRecapitulação - Formulário Básico11Página de Inscrição de Evento
Visão Geral do ProjetoSeção de CabeçalhoSeção de Detalhes do EventoFormulário de InscriçãoSeção de Rodapé9Formulários e Inputs Parte 2
Radio ButtonsCheckboxesDropdownsBotõesBotões em FormuláriosRecapitulação - Formulários #1Recapitulação - Formulários #2