Etiquetas relacionadas a formulários

Este artigo explica as etiquetas relacionadas a formulários.

Isso explica vários campos de formulário, como entradas de texto e menus suspensos.

YouTube Video

Etiquetas relacionadas a formulários

Etiqueta <form>

1<form action="/submit" method="post">...</form>

• A tag <form> é usada para definir todo o formulário.
• O atributo action especifica o destino, e o atributo method especifica o método (GET ou POST).
• Você também pode especificar o atributo target, similar à tag <a>.

Etiqueta <input> (campo de entrada de texto)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> cria um campo de entrada de texto de linha única. Os usuários podem inserir qualquer texto.

• O atributo placeholder especifica um texto descritivo que aparece quando o campo de entrada está vazio. Isso ajuda os usuários a entender facilmente a entrada esperada. Este texto desaparece automaticamente quando a entrada começa.

  • placeholder é adequado para fornecer informações complementares e não é apropriado para instruções importantes, como a entrada obrigatória. Nesses casos, você deve usar um rótulo.

Etiqueta <input> (campo de entrada de senha)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> cria um campo para entrada de senha. Os caracteres inseridos são ocultos e mascarados para garantir segurança.

Etiqueta <input> (campo de entrada de endereço de email)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> cria um campo para inserção de um endereço de e-mail e inclui validação para garantir o formato correto do e-mail.

Etiqueta <input> (caixa de seleção)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> cria uma caixa de seleção. Quando várias opções estão disponíveis, os usuários podem selecionar múltiplos itens.

Etiqueta <input> (botão de rádio)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> cria um botão de rádio que permite aos usuários selecionar apenas uma opção de um conjunto.

Etiqueta <input> (botão de envio)

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

• <input type="submit"> cria um botão para enviar os dados no formulário.
• O valor do atributo value é incluído nos dados do formulário quando enviado.

Tag <input> (Botão de Reset)

1<input type="reset" value="Reset">

• <input type="reset"> cria um botão que redefine todos os valores de entrada no formulário.

Tag <input> (campo oculto)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> cria um campo oculto que não é exibido na tela e é usado para enviar dados ao backend quando o formulário é enviado.

Etiqueta <input> (seletor de cor)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> exibe um seletor de cores e cria um campo de entrada para os usuários selecionarem uma cor.

Etiqueta <input> (campo de entrada de data)

1<input type="date" name="birthday">

• <input type="date"> cria um campo de entrada de data que exibe um calendário para seleção de uma data.

Etiqueta <input> (campo de entrada de hora)

1<input type="time" name="appointment_time">

• <input type="time"> cria um campo para entrada de hora, e um selecionador de horário é exibido.

Tag <input> (campo de entrada de arquivo)

1<input type="file" name="resume">

• <input type="file"> cria um campo de entrada para que os usuários selecionem e façam upload de arquivos.
• O atributo enctype da tag form deve ser definido como multipart/form-data.

Tag <input> (número)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> cria um campo de entrada numérica que permite definir o valor mínimo, valor máximo e incremento (quantidade de incremento/decremento).

Tag <input> (campo de seleção de faixa para números)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> cria um campo de entrada onde os usuários podem selecionar um valor dentro de um intervalo usando um controle deslizante.

Tag <textarea>

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• A tag <textarea> cria um campo de entrada de texto de várias linhas. É adequado para digitar textos longos ou comentários.

Tag <select>

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• A tag <select> cria um menu suspenso, e as opções são definidas com a tag <option>. Os usuários podem selecionar um ou vários itens.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• Para permitir seleções múltiplas, adicione o atributo multiple. Especificar este atributo exibe as opções como uma caixa de lista.

Tag <optgroup>

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• A tag <optgroup> é usada para agrupar itens relacionados. O atributo label permite definir um nome de grupo, oferecendo opções claras aos usuários mesmo que a lista seja longa.

Tag <label>

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• A tag <label> define rótulos para campos de entrada, caixas de seleção e botões de opção, melhorando a usabilidade e acessibilidade.
• Por exemplo, clicar em um rótulo pode focar um campo de entrada ou alternar uma caixa de seleção entre ativada e desativada.

Tag <fieldset>

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• A tag <fieldset> agrupa controles de formulário relacionados, e a tag <legend> fornece um título para o grupo.

Tag <button>

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• A tag <button> define um botão clicável que aciona o envio do formulário ou outras ações.

  Quando type="button" é especificado, ele funciona como um botão regular. Clicar nele não envia o formulário nem aciona outras ações padrão. Ele é usado quando você deseja definir ações personalizadas com JavaScript.

  Quando type="submit" é especificado, ele funciona como um botão de envio para o formulário. Quando este botão é clicado, o formulário que o contém será enviado.

  Quando type="reset" é especificado, ele funciona como um botão de reset para o formulário. Clicando nele, todos os campos de entrada no formulário serão redefinidos e retornarão ao seu estado inicial.

  Se o atributo type não for especificado, alguns navegadores podem tratá-lo como type="submit", portanto é recomendável especificar explicitamente o tipo para garantir o comportamento pretendido.

• A tag <button> pode incluir outros conteúdos HTML entre as tags de abertura e fechamento, permitindo criar botões com ícones ou texto complexo.

• Para um botão de envio usando a tag <input>, o valor do atributo value é incluído nos dados do formulário, mas com uma tag <button>, ele não é enviado por padrão.

  Ao especificar atributos name e value para uma tag <button>, seu valor pode ser enviado como dados do formulário.

Tag <datalist>

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• A tag <datalist> fornece uma lista de opções selecionáveis para o elemento <input>. Os usuários podem selecionar da lista ou inserir seu próprio valor.

Tag <output>

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• A tag <output> exibe o resultado de cálculos ou interações do usuário. É usada para exibir dinamicamente os resultados de cálculos dentro de formulários ou scripts.
• Para o atributo for, especifique os IDs dos elementos do formulário que você deseja associar, separados por espaços.

Tag <progress>

1<progress value="70" max="100">70%</progress>

• A tag <progress> mostra aos usuários o progresso de uma tarefa. Por exemplo, pode indicar visualmente o progresso de um download de arquivo ou instalação.

Tag <meter>

1<meter value="0.6">60%</meter>

• A tag <meter> representa uma medida numérica dentro de um intervalo conhecido. É usada para exibir medições como uso de disco ou um medidor de combustível dentro de um intervalo específico.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video