Elementos principais de formulários

2.1 Elemento <input>

Formulários são um componente importante das páginas web e dão a possibilidade para os usuários inserirem e enviarem dados. Os elementos principais dos formulários são <input>, <textarea> e <button>. Esses elementos permitem que os usuários insiram texto, escolham opções, façam upload de arquivos e realizem outras ações.

O elemento <input> é um dos elementos de formulário mais usados. Ele suporta muitos tipos de entrada de dados e pode ser usado para diversos propósitos, como inserir texto, escolher arquivos, especificar datas etc.

Sintaxe geral:

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

Atributos do <input>

• type: define o tipo de entrada
• name: nome do elemento de formulário, usado para identificar dados no servidor
• id: identificador único do elemento
• value: valor inicial do elemento
• placeholder: texto de preenchimento exibido dentro do elemento até que os dados sejam inseridos
• required: indica que o elemento é obrigatório

Exemplo de <input>

input-text permite inserir texto em uma linha.

    
      <input type="text" name="username" id="username" placeholder="Digite o nome de usuário" required>
    
  

2.2 Elemento <textarea>

O elemento <textarea> é usado para inserir texto de múltiplas linhas. Ele se diferencia de <input type="text"> por permitir a entrada de texto que contenha várias linhas e pode ser ajustado no tamanho.

Sintaxe geral:

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

Atributos do <textarea>

• name: nome do elemento de formulário, usado para identificar dados no servidor
• id: identificador único do elemento
• rows: número de linhas de texto
• cols: número de caracteres em uma linha
• placeholder: texto de preenchimento exibido dentro do elemento até que os dados sejam inseridos
• required: indica que o elemento é obrigatório

Exemplo de uso:

    
      <label for="comments">Comentários:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Digite seus comentários aqui..."
        required>
      </textarea>
    
  

Estilização do <textarea>

O elemento <textarea> pode ser estilizado com CSS para melhorar a aparência e a experiência do usuário.

Exemplo de estilização:

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* resize será apenas vertical */
      }
    
  

    
      <label for="comments">Comentários:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Digite seus comentários aqui..." required>
      </textarea>
    
  

2.3 Elemento <button>

O elemento <button> é usado para criar botões em formulários. Diferente do <input type="button">, o elemento <button> é mais flexível e permite adicionar vários elementos HTML dentro do botão, como texto, imagens, etc.

Sintaxe geral:

    
      <button type="type" name="name" id="id" value="value">Texto do botão</button>
    
  

Exemplo de uso:

    
      <button type="submit">Enviar</button>
      <button type="reset">Redefinir</button>
      <button type="button" onclick="alert('Botão clicado!')">Clique em mim</button>
    
  

Atributos do <button>

1. type: define o comportamento do botão. Valores possíveis:
   • submit: envia o formulário (valor padrão)
   • reset: redefine o formulário
   • button: botão arbitrário, não realiza ações por padrão
2. name: nome do elemento de formulário, usado para identificar dados no servidor.
3. id: identificador único do elemento.
4. value: valor enviado para o servidor ao enviar o formulário.

HTML aninhado em <button>

O elemento <button> permite adicionar diversos elementos HTML dentro dele para criar botões mais complexos.

Exemplo com HTML aninhado:

    
      <button type="type" name="name" id="id" value="value">
        📨Enviar
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Enviar">
        Enviar
      </button>
    
  

Estilização do <button>

O elemento <button> pode ser estilizado com CSS para melhorar a aparência e a experiência do usuário.

Exemplo de estilização:

    
      button {
        background-color: #4CAF50; /* Fundo verde */
        color: white; /* Texto branco */
        padding: 15px 20px; /* Espaçamento interno */
        border: none; /* Sem bordas */
        border-radius: 4px; /* Cantos arredondados */
        cursor: pointer; /* Cursor de ponteiro */
      }

      button:hover {
        background-color: #45a049; /* Fundo verde escuro ao passar o mouse */
      }
    
  

    
      <button type="submit">Enviar</button>