3.1 Elemento <input type="button">
O elemento <input type="button"> é usado para criar um botão que não tem comportamento padrão embutido.
Ao contrário dos botões submit e reset, que executam certas ações quando clicados, o botão button é geralmente
usado em conjunto com JavaScript para executar tarefas específicas.
Exemplo de uso:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
Atributos principais:
1. Atributo value: define o texto que será exibido no botão.
<input type="button" value="Click Me">
2. Atributo onclick: define a função JavaScript que será executada ao clicar no botão.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
Exemplos de uso:
Chamando uma função JavaScript:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
Alterando o estilo de um elemento:
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">This is a paragraph.</p>
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 Elemento <input type="checkbox">
O elemento <input type="checkbox"> é usado para criar caixas de seleção (checkboxes), que
permitem aos usuários escolher uma ou mais opções dentre as disponíveis. A caixa de seleção pode estar marcada ou desmarcada.
Exemplo de uso:
<label for="subscribe">Inscrever-se na newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
Atributos principais:
1. Atributo name: define o nome do elemento do formulário, que será enviado ao servidor junto com os dados.
<input type="checkbox" name="subscribe">
2. Atributo value: define o valor que será enviado ao servidor se a caixa de seleção estiver marcada.
<input type="checkbox" name="subscribe" value="yes">
3. Atributo checked: define se a caixa de seleção deve estar marcada por padrão.
<input type="checkbox" name="subscribe" value="yes" checked>
Exemplos de uso:
Várias caixas de seleção:
<p>Seleciona seus interesses:</p>
<input type="checkbox" name="interest" value="sports">Esportes<br>
<input type="checkbox" name="interest" value="music">Música<br>
<input type="checkbox" name="interest" value="movies">Filmes<br>
Caixa de seleção pré-selecionada:
<input type="checkbox" name="terms" value="agree" checked> Eu aceito os termos e condições
3.3 Elemento <input type="radio">
Campo para selecionar botão de rádio (type="radio")
O elemento <input type="radio"> é usado para criar botões de rádio, que permitem aos usuários
escolher apenas uma opção dentre um grupo. Os botões de rádio são agrupados usando o mesmo valor do atributo name.
Exemplo de uso:
<p>Escolha seu gênero:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Masculino</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Feminino</label><br>
Atributos principais:
Atributo name: define o nome do grupo de botões de rádio. Todos os botões de rádio com o mesmo nome pertencem
a um grupo, e o usuário só poderá escolher um dentre eles.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Atributo value: define o valor que será enviado ao servidor se o botão de rádio estiver selecionado.
<input type="radio" name="gender" value="male">
Atributo checked: define se o botão de rádio deve estar selecionado por padrão.
<input type="radio" name="gender" value="male" checked>
Exemplos de uso:
Grupo de botões de rádio para escolher uma opção:
<p>Escolha uma cor:</p>
<input type="radio" name="color" value="red">Vermelho<br>
<input type="radio" name="color" value="green">Verde<br>
<input type="radio" name="color" value="blue">Azul<br>
Botão de rádio pré-selecionado:
<input type="radio" name="subscription" value="monthly" checked>Mensal<br>
<input type="radio" name="subscription" value="yearly">Anual<br>
GO TO FULL VERSION