Outros campos formulário HTML: Neste artigo, vamos explorar vários campos de formulário HTML, incluindo uploads de arquivos, botões, botões de opção, caixas de seleção, data e hora, seletor de cores, intervalo, telefone e URL.
Cada um desses campos desempenha um papel crucial na coleta de informações dos usuários em um formulário da web.
Uploads de Arquivos
O campo de upload de arquivos permite que os usuários selecionem e enviem arquivos. É criado usando a tag input com o atributo type definido como file.
<input type="file" id="myfile" name="myfile">
Botões
Os botões são usados para iniciar uma ação, como enviar um formulário. Eles são criados usando a tag button ou a tag input com o atributo type definido como button.
<button>Clique aqui</button>
<input type="button" value="Clique aqui">
Butons:
1°) Elemento button:
2°) Elemento input tipo button:
Radio buttons
Os radio buttons permitem que os usuários selecionem uma opção de um conjunto. Eles são criados usando a tag input com o atributo type definido como radio.
<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>
Radio Buton:
Caixas de Seleção
As caixas de seleção permitem que os usuários selecionem várias opções de um conjunto. Elas são criadas usando a tag input com o atributo type definido como checkbox.
<input type="checkbox" id="lang1" name="vehicle1" value="Bike">
<label for="lang1"> HTML</label><br>
<input type="checkbox" id="lang2" name="vehicle2" value="Car">
<label for="lang2"> CSS</label><br>
<input type="checkbox" id="lang3" name="vehicle3" value="Boat">
<label for="lang3"> Javascript</label>
Checkbox:
Data e Hora
Os campos de data e hora permitem que os usuários selecionem uma data, uma hora ou ambos. Eles são criados usando a tag input com o atributo type definido como date, time ou datetime-local.
Data: <input type="date" id="mydate" name="mydate"><br><br>
Hora: <input type="time" id="mytime" name="mytime"><br><br>
Data e Hora: <input type="datetime-local" id="mydatetime" name="mydatetime">
Hora:
Data e Hora:
Color Picker
O seletor de cores ou color picker permite que os usuários selecionem uma cor. É criado usando a tag input com o atributo type definido como color.
Clique para selecionar uma cor: <input type="color" id="mycolor" name="mycolor" value="#000">
Clique para selecionar uma cor:
Intervalo – (Range)
O campo de intervalo permite que os usuários selecionem um valor de um intervalo. É criado usando a tag input com o atributo type definido como range.
<input type="range" id="myrange" name="myrange" min="0" max="100">
Campo de intervalo:
Telefone
O campo de telefone permite que os usuários insiram um número de telefone. É criado usando a tag input com o atributo type definido como tel.
Telefone:
<input type="tel" id="mytel" name="mytel">
Telefone:
URL
O campo de URL permite que os usuários insiram uma URL. É criado usando a tag input com o atributo type definido como url.
URL:
<input type="url" id="myurl" name="myurl">
URL:
Conclusão
Em resumo, os campos de formulário HTML são componentes fundamentais de qualquer aplicação web. Eles permitem que os usuários insiram e enviem informações, tornando a web uma plataforma interativa.
Compreender como esses campos funcionam e como usá-los é uma habilidade essencial para qualquer desenvolvedor web.
Você pode validar seus inputs funcionando, para que você interaja com seus internautas ou usuários de sistema, usando uma plataforma de host completa. Clique aqui e conheça a Hostinger!!!
