Controles de Entrada HTML

Introdução

No HTML, a tag <input> é usada para criar vários tipos de campos de entrada. Este laboratório demonstrará como criar diferentes tipos de campos de entrada em um formulário HTML usando a tag <input> com o atributo type apropriado.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criar um Campo de Entrada de Texto

Crie um novo arquivo HTML chamado index.html. Este arquivo conterá o código HTML para o formulário de entrada.

Para criar um campo de entrada de texto, use o seguinte código HTML:

<label for="username">Username:</label><br />
<input type="text" id="username" name="username" /><br />

No código, criamos um rótulo (label) para o campo de entrada, definimos o atributo type como "text" e atribuímos um atributo id e name. Este código criará um campo de entrada de texto para o usuário inserir seu nome de usuário.

Criar um Campo de Entrada de Senha

Para criar um campo de entrada de senha, use o seguinte código:

<label for="password">Password:</label><br />
<input type="password" id="password" name="password" /><br />

No código, definimos o atributo type como "password", o que irá obscurecer os caracteres da senha que o usuário inserir.

Criar um Campo de Entrada Checkbox

Para criar um campo de entrada de checkbox, use o seguinte código:

<label for="vehicle1">I have a car</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="car" />
<br />
<label for="vehicle2">I have a bike</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike" />
<br />
<label for="vehicle3">I have a boat</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="boat" />

No código, criamos três checkboxes para o usuário escolher. Note que cada checkbox tem um atributo id, name e value diferente.

Criar um Campo de Entrada Radio

Para criar um campo de entrada de radio, use o seguinte código:

<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" />
<br />
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other" />

No código, criamos três botões de rádio para o usuário escolher seu gênero. Note que cada botão de rádio tem um atributo id, name e value diferente.

Criar um Botão de Envio (Submit)

Para criar um botão de submit (enviar), use o seguinte código:

<input type="submit" value="Submit" />

No código, criamos um botão que o usuário clicará para enviar o formulário.

Resumo

Neste laboratório, aprendemos como criar diferentes tipos de campos de entrada em um formulário HTML usando a tag <input> com o atributo type apropriado. Criamos entrada de texto, entrada de senha, entrada de checkbox (caixa de seleção), entrada de radio (rádio) e um botão de submit (enviar). Você pode usar esses exemplos como ponto de partida para criar formulários HTML mais complexos que coletam dados do usuário.