Desenvolvimento Web em HTML, CSS, JS e PHP - Tema 3 - 4 Flashcards
Formulários
Como unir uma label (rótulo/descrição) a um input (elemento de entrada do usuário)?
Utilizar o mesmo valor no atributo for do elemento label que o id do elemento input.
Qual a tag principal de um formulário?
A tag container (pai) <form>.
Como funciona a tag <input></input>?
A tag input representa os campos de um formulário que geralmente tem diversos tipos de campos, você muda o tipo do campo atráves do atributo type.
O que faz a tag <textarea>?</textarea>
é um campo de texto com múltiplas linhas.
O que fazem as tags <select> e <option>?</option></select>
campos de seleção que permitem um menu de opções, onde o container é definido pela tag <select> e os itens pela tag <option>.</option></select>
o que faz a tag <button>?</button>
campo de botão. Permite que uma ação seja executada no formulário - enviar o formulário, limpar os dados, etc.
O que faz a tag <fieldset>? e <legend>?
cria seções dentro do formulário, ajudando a separar os campos no código e a visualizar a página no navegador.
A tag <legend> entitula o campo o tornando de mais fácil compreensão e organização.
O que faz o atributo action na tag <form>?
define a URL (endereço) para a qual os dados do formulário serão enviados.
O que faz o atributo method na tag <form>?
define o método HTTP (POST ou GET) para envio dos dados.
O que faz o atributo for na tag <label>?</label>
vincula a tag <label> ao campo ao qual ela se refere. Este vínculo faz com que seja possível clicar na label para ativar o campo relacionado.</label>
O que faz o atributo minlength na tag <input></input>? e o maxlegth?
- define a quantidade de caracteres mínima.
- define a quantidade de caracteres máxima.
O que faz o atributo type na tag <input></input>?
define o tipo do campo e, sobretudo, como ele se comporta.
O que faz o atributo type na tag <button>? quais os possíveis tipos?</button>
define o tipo de botão, tendo como possíveis tipos: submit, reset e button que são utilizados eventos.
O que faz o atributo value na tag <option>?</option>
O atributo value na tag <option> é usado para definir o valor associado a uma opção em um elemento <select>. Quando um formulário é enviado, o valor do atributo value da opção selecionada é enviado como parte dos dados do formulário.</select></option>
O que faz o type password na tag <input></input>?
Mascara o texto com asteriscos.
O que faz o type hidden na tag <input></input>?
Esconde o campo para não ser exibido no navegador.
O que faz o type checkbox na tag <input></input>?
Usado para seleção de valor através de click/check.
O que faz o type radio na tag <input></input>?
Usado para seleção exclusiva de valor – quando é apresentada mais de uma opção, apenas uma poderá ser selecionada, ao contrário do tipo “checkbox”. Obs: para marcar apenas um é necessário que tenha o atributo name com o mesmo valor em todas as opções. São ID’s diferentes, porém com names iguais.
O que faz o type submit na tag <input></input>?
Associada à tag <button>, dispara o evento que envia/submete o formulário.</button>
O que faz o type reset na tag <input></input>?
Associada à tag <button>, dispara o evento que limpa os valores do formulário.</button>
O que faz o type button na tag <input></input>?
Uma tag <input></input> pode ser do tipo “button” – exercendo, assim, a mesma função da tag <button>.</button>
O que faz o atributo placeholder no campo input?
Exibe um texto no campo de input. Utilizado para dar uma dica ao usuário sobre o dado a ser inserido.
O que faz o atributo required no campo input?
Determina se um campo é obrigatório. Utilizado na validação dos dados de um formulário.
O que faz o atributo autofocus no campo input?
Fixa o foco no campo. Utilizado quando desejamos que, ao carregar o formulário, um determinado campo seja focado.
O que faz o atributo pattern no campo input?
Valida o valor de um campo com base em uma expressão regular. (As RegEX – expressões regulares – podem ser consideradas um recurso de linguagem de programação para a análise e manipulação de texto.)
O campo de tel. é um bom exemplo de utilização desse atributo. Com ele podemos, por exemplo, determinar a quantidade de caracteres e o formato esperado para um campo.
O que faz o atributo step no campo input?
aceitar de quantos em quantos números quando usado o tipo number. Ex: 5, 10, 15, 20, etc. (passos)
O que faz o tipo tel no campo input?
Insere números de telefone. Para uma melhor usabilidade, deve ser usado em conjunto com o atributo pattern. (dá pra mudar de padrões de acordo com a região)
O que faz o tipo datetime no campo input?
Insere datas com o fuso horário em UTC(fuso horário de todas as zonas horárias do mundo) a partir de um calendário.
O que faz o tipo date no campo input?
Insere datas sem fuso horário a partir de um calendário.
O que faz o tipo number no campo input?
Insere números.
O que faz o tipo color no campo input?
abre uma caixa de seleção de cores do tipo RGB.
O que faz o tipo range no campo input?
slider, elemento deslizante onde tenho um valor mínimo e máximo.
Qual o comportamento padrão do HTML5 em relação aos formulários?
Validar os dados quando ocorre o envio do formulário.
Como desativar o comportamento padrão do HTML5 em relação aos formulários?
Para isso, deve ser atribuído o atributo “novalidate” à tag <form>.
