Formularios: Campos "simples" de entrada de formularios. Etiquetas 'input', 'label' y atributos 'type', 'name', 'value'...

Los campos de entrada de formularios deben ir entre las etiquetas de formulario <form ... /> y </form> vistas en la entrada anterior, cada uno de estos campos se especifican con la etiqueta
<input type="tipo_de_campo_entrada" ... />, y las clases o tipos de campos de entrada 'type' son:

• type="text", tipo de datos alfanumerico, a los que se le debe poner el atributo 'name' con el valor del nombre de variable, el cual podemos elegir libremente:
  <form method="post" action="http://..../validar.php">
  <input type="text" name="nombre_variable" />
  </form>
  Los nombres de variables no deben empezar por caracteres numéricos ni incluir espacios ni caracteres especiales.

  Se mostrará así:

  La etiqueta <label> se usa para especificar un texto relacionado con el contenido del campo del formulario a rellenar, y usa el atributo 'for' con valor igual a el nombre de la variable a la que hace referencia. Se aplica de la siguiente forma:

  <form method="post" action="http://..../validar.php">
  <label for="nombre_variable">Nombre: </label>
  <input type="text" name="nombre_variable" />
  </form>

  El código anterior se mostrará así:

  Nombre:

  Otros atributos para este campo de formulario son:

  • El atributo 'value' debe tener un texto que se mostrará por defecto en el campo del formulario; el cual será sustituido por el que introduzca el usuario:
    <form method="post" action="http://..../validar.php">
    <label for="nombre_variable">Nombre: </label>
    <input type="text" name="nombre_variable" value="Escriba aquí su nombre" />
    </form>

    Y el código se mostrará así:

    Nombre:
  • El atributo 'maxlength' es para especificar la cantidad máxima de caracteres que se pueden introducir en el campo de texto, y se le debe asignar un valor numérico igual al número de caracteres máximo que se podrán introducir:
    <form method="post" action="http://..../validar.php">
    <label for="nombre_variable">Nombre: </label>
    <input type="text" name="nombre_variable" maxlength="3" />
    </form>

    Con maxlength="3", en el cuadro siguiente no se podrán introducir más de tres caracteres:

    Nombre:
  • El atributo 'readonly="readonly"', es para que campo el campo no se pueda modificar, se queda en modo "solo lectura:"
    <form method="post" action="http://..../validar.php">
    <label for="nombre_variable">Nombre: </label>
    <input type="text" name="nombre_variable" readonly="readonly" value="Solo lectura" />
    </form>

    Y el cuadro siguiente no se puede escribir nada:

    Nombre:
• type="password": al igual que type="text", es para introducir texto en un campo, pero este texto no se mostrará en la pantalla, en lugar de los caracteres introducidos se mostrarán circulos o asteriscos:
  <form method="post" action="http://..../validar.php">
  <label for="contraseña">Contraseña: </label>
  <input type="password" name="pass" />
  </form>

  Y el código se mostrará así:

  Contraseña:

Como es de suponer, también se pueden aplicar reglas CSS para personalizar el estilo en el que se mostrarán nuestros formularios...