Você já estave num site e reparou que existia um formulário para mandar sua opinião ou requisitar um serviço de uma empresa? Se sim, então você já viu como é um formulário, se não, então vai ver aqui nesse módulo.
O formulário tem utilidade para várias funções como: obter dados do usuário, realizar cadastro, mandar emails, receber opiniões, entre outros. Então, eles são muitos importantes para vários tipos de páginas.
As principais tags para formulário são:
<form>
-> têm como função iniciar o formulário;<input>
-> têm como função definir um campo de texto;<textarea>
-> têm como função também, definir um campo para o formulário, mas diferentemente, tem como principal característica conter preenchimentos e textos grandes;<button>
-> têm como função definir um botão;<select>
-> têm como função definir uma lista selecionável ou conhecida como "drop-down";<option>
-> têm como função definir uma lista de opções dentro de um "drop-down";<optgroup>
-> têm como função definir um grupo de opções;<fieldset>
-> têm como função definir um grupo de campos;<label>
-> têm como função definir define uma legenda ou nome para um campo de texto ou controle do formulário;<output>
-> têm como função definir elementos de saída para o formulário;<legend>
-> têm como função definir um título para um conjunto de campo;
Agora os diferentes types de input que podem ser usados:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Agora vamos para um exemplo de como seria um formulário:
<form action="backend.php">
<label for="nome">Primeiro Nome:</label>
<input type="text" id="pnome" name="pnome"><br><br>
<label for="ultimonome">Último Nome:</label>
<input type="text" id="unome" name="unome"><br><br>
<input type="submit" value="Enviar">
</form>
Destrinchando fica:
- form -> Está iniciando o formulário;
- action -> De uma forma simples de explicar, quer dizer o que vai ser feito com esses dados coletados;
- label for -> A indentificação para a legenda que vai ser exibida;
- input type -> O tipo que vai ser o campo de enttrada de dados;
Obs: Uma dica que eu dou é aprender sobre HTTP, porque ele é necessário para se aprofundar mais também sobre como funciona o formulário com o backend, se quiser ver mais, segue um site que pode ajudar -> Site
Tags de Multimídia <= Anterior | Início | Próximo => Tags de Tabela