Elementos básicos de formularios

2.1 Elemento <input>

Los formularios son un componente importante de las páginas web y permiten a los usuarios introducir y enviar datos. Los elementos principales de los formularios son <input>, <textarea> y <button>. Estos elementos permiten a los usuarios ingresar texto, seleccionar opciones, subir archivos y realizar otras acciones.

El elemento <input> es uno de los elementos de formulario más utilizados. Soporta muchos tipos de entrada de datos y se puede usar para varios propósitos, como ingresar texto, seleccionar archivos, indicar fechas, etc.

Sintaxis general:

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

Atributos del <input>

• type: define el tipo de entrada
• name: nombre del elemento del formulario, usado para identificar datos en el servidor
• id: identificador único del elemento
• value: valor inicial del elemento
• placeholder: texto de marcador de posición que se muestra dentro del elemento hasta que se ingresa un dato
• required: indica que el elemento es obligatorio para completar

Ejemplo de <input>

input-text permite ingresar texto de una sola línea.

    
      <input type="text" name="username" id="username" placeholder="Ingresa nombre de usuario" required>
    
  

2.2 Elemento <textarea>

El elemento <textarea> se utiliza para ingresar texto de varias líneas. Se diferencia de <input type="text"> en que permite ingresar texto que contiene varias líneas y puede configurarse en tamaño.

Sintaxis general:

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

Atributos del <textarea>

• name: nombre del elemento del formulario, usado para identificar datos en el servidor
• id: identificador único del elemento
• rows: cantidad de líneas de texto
• cols: cantidad de caracteres en una línea
• placeholder: texto de marcador de posición que se muestra dentro del elemento hasta que se ingresa un dato
• required: indica que el elemento es obligatorio para completar

Ejemplo de uso:

    
      <label for="comments">Comentarios:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Introduce tus comentarios aquí..."
        required>
      </textarea>
    
  

Estilización del <textarea>

El elemento <textarea> se puede estilizar con CSS para mejorar la apariencia y la experiencia del usuario.

Ejemplo de estilización:

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

    
      <label for="comments">Comentarios:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Introduce tus comentarios aquí..." required>
      </textarea>
    
  

2.3 Elemento <button>

El elemento <button> se utiliza para crear botones en formularios. A diferencia de <input type="button">, el elemento <button> es más flexible y permite incluir varios elementos HTML, como texto, imágenes, etc.

Sintaxis general:

    
      <button type="type" name="name" id="id" value="value">Texto del botón</button>
    
  

Ejemplo de uso:

    
      <button type="submit">Enviar</button>
      <button type="reset">Restablecer</button>
      <button type="button" onclick="alert('¡Botón presionado!')">Presióname</button>
    
  

Atributos del <button>

1. type: define el comportamiento del botón. Valores posibles:
   • submit: envía el formulario (valor por defecto)
   • reset: restablece el formulario
   • button: botón arbitrario, no realiza acciones por defecto
2. name: nombre del elemento del formulario, usado para identificar datos en el servidor.
3. id: identificador único del elemento.
4. value: valor enviado al servidor al enviar el formulario.

HTML anidado en <button>

El elemento <button> permite insertar varios elementos HTML dentro de él para crear botones más complejos.

Ejemplo con HTML anidado:

    
      <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>
    
  

Estilización del <button>

El elemento <button> se puede estilizar con CSS para mejorar la apariencia y la experiencia del usuario.

Ejemplo de estilización:

    
      button {
        background-color: #4CAF50; /* Fondo verde */
        color: white; /* Texto blanco */
        padding: 15px 20px; /* Relleno interno */
        border: none; /* Sin bordes */
        border-radius: 4px; /* Bordes redondeados */
        cursor: pointer; /* Cursor de puntero */
      }

      button:hover {
        background-color: #45a049; /* Fondo verde oscuro al pasar el ratón */
      }
    
  

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