Entrada de archivos

Entrada de archivos

La entrada de archivos puede ser utilizada para subir archivos al servidor. Este control muestra una caja de texto donde el usuario debe especificar la ruta del archivo (que será adjuntado localmente por el navegador) que será enviado al servidor. De este modo los autores pueden pedir a los visitantes que envíen archivos de sus computadoras a través de la página. El control habitualmente muestra un botón para elegir el archivo visualmente.
Nota que para los formularios con subida de archivos debes especificar el valor "multipart/form-data" en el atributo "enctype" del tag HTML form, de otro modo, el archivo no será enviado.

Código

<form method="post" action="agente.php" enctype="multipart/form-data">
Ingresa el archivo: <input name="imagen" type="file" />
</form>

Vista

Ingresa el archivo:

Etiquetando elementos

Las etiquetas de los elementos pueden hacer que tu página lozca mejor y sea más funcional en agentes de usuario visuales (cuando un visitante hace click en la etiqueta, el enfoque pasa automáticamente al control asociado), pero éstas sin duda harán una gran diferencia para personas con discapacidades o con navegadores no visuales. Una etiqueta establece una relación entre un control y una porción de texto (que se supone, establece un "título" para el control).
Las etiquetas pueden insertarse con el elemento HTML label y son asociados a los controles mediante el atributo "for", que debe coincidir con el valor del atributo "id" en el control.

Código

<form method="post" action="agente.php">
<label for="idnombre">Nombre:</label> <input type="text" id="idnombre" name="nombre" /><br />
<label for="idapellido">Apellido:</label> <input type="text" id="idapellido" name="apellido" /><br /><br />
Género:<br /><input type="radio" id="idmasculino" name="genero" /><label for="idmasculino">Masculino</label><br />
<input type="radio" id="idfemenino" name="genero" /><label for="idfemenino">Femenino</label>
</form>

Vista

Nombre:
Apellido:

Género:
Masculino
Femenino

Puedes proba en el ejemplo anterior, cómo los controles toman el enfoque cuando hacer click en sus etiquetas.

Agrupando elementos

Todos los elementos en un formulario pueden también ser agrupados temáticamente con el elemento HTML fieldset. Este elemento contiene a un grupo de controles que están relacionados entre sí por alguna razón (por ejemplo, información personal, laboral, financiera, sobre interests, etc.).
El título de cada grupo de elementos puede establecerse con el elemento HTML legend que debe ser definido justo después del tag de apertura del elemento HTML fieldset, y debe proveer un título descriptivo para el grupo.

Código

<form method="post" action="gestor.php">
<fieldset>
<legend>Información personal</legend>
<label for="lnombre">Nombre</label>: <input id="lnombre" type="text" name="nombre" /><br />
<label for="lapellido">Apellido</label>: <input id="lapellido" type="text" name="apellido" /><br />
<label for="ldireccion">Dirección</label>: <input id="ldireccion" type="text" name="direccion" /><br />
<label for="ltelefono">Teléfono</label>: <input id="ltelefono" type="text" name="telefono" />
</fieldset>
<fieldset>
<legend>Información laboral</legend>
<label for="ldirecciontrabajo">Dirección</label>: <input id="ldirecciontrabajo" type="text" name="direcciontrabajo" /><br />
<label for="ltelefonotrabajo">Teléfono</label>: <input id="ltelefonotrabajo" type="text" name="telefonotrabajo" />
</fieldset>
</form>

Vista

Información personal

Nombre:
Apellido:
Dirección:
Teléfono:

Información laboral

Dirección:
Teléfono:

El uso de grupos de controles es amplio y depende de cada formulario en particular, pero puede ser muy beneficioso para los visitantes cuando deben rellenar formularios muy largos (especialmente en agentes de usuario no visuales).