Tags de Formulário

Tags HTML de formulário

      As tags de formulário são muito utilizadas para obter informações do usuário, realizar cadastros, receber opiniões, entre outros. São importantíssimas para qualquer ramo do mercado. Para iniciar um formulário, incluímos as tags <form> e </form>. Posteriormente, devemos incluir o conteúdo do formulário. Digamos que, por exemplo, você queira incluir três campos, sendo dois para coletar informações e um para receber uma mensagem. Desta forma, para criar os campos de preenchimento, deverá utilizar a tag <input>, enquanto para o campo referente à mensagem, deverá utilizar a tag <textarea>.

A tag <input>

      A tag <input> possui o atributo type, que varia entre diversos tipos (vamos explicar os principais deles abaixo). Também há o atributo placeholder, que é um texto que ficará disponível enquanto nada for digitado nesse campo. Também é importante definir um atributo name para cada input.
● <input type=”text”> – Define um campo que receberá qualquer caractere;
● <input type=”email”> – Define um campo que receberá caracteres e verificará se o mesmo consiste em um e-mail válido;
● <input type=”submit” value=”ENVIAR”> – Define um botão que servirá para o envio do formulário. Dentro dele, podemos atribuir o value, que será o texto dentro do botão de envio.
      Existem outros tipos de <inputs> que podem ser estudados na documentação disponível pela W3C.

<form>
    <input type="text" placeholder="Nome" name="nome"/>
    <input type="email" placeholder="Email" name="email"/>
    <input type="date" name="aniversario"/>
    <input type="password" placeholder="Senha" name="senha" />
    <button type="submit">Cadastrar</button>
</form>

      Assim como a tag <input>, essa tag define um campo para o formulário. Porém, diferentemente, ela tem como principal característica ser uma área de preenchimento de texto, ou seja, permite que o usuário escreva um texto ou uma mensagem no seu interior. Também traz opções para que o usuário redimensione seu tamanho (resize). Dessa forma, podemos incluir uma area de texto utilizando as tags <textarea> e </textarea>.

<fieldset>
<legend>Sua opinião</legend>
<label for ="opiniao"></label>
O que você mais gostou no evento ? <br>
<textarea cols=60 id="opiniao" rows="10" name="opiniao" maxlength="500" wrap="hard" placeholder="coragem, você consegue ! "></textarea>
</fieldset>