Formulario básico HTML

Los formularios son la herramienta que permite al usuario interactuar con el servidor enviándole información para que este la procese.

La tarea del navegador consiste en recoger los datos del formulario, aplicar una validación para comprobar que son correctos, y enviarlos al servidor. Todo el proceso posterior con la información enviada se realiza en el servidor y escapa a lo que puede hacer el navegador.

Etiquetas Fundamentales

La etiqueta principal es <form> que incluye entre su apertura y cierre todos los elementos que recogen la información introducida por el usuario. Esos elementos son, básicamente, <input>, <select>, <option> y <textarea>. Con ellos el usuario puede enviar todo tipo de datos al servidor para que sean procesados por el script correspondiente.

Principales Atributos

La etiqueta <form> necesita dos atributos para realizar el envío de datos correctamente: action, que indica dónde se envían los datos, y method, que establece la forma de envío, que acepta los valores post y get.

Además, la etiqueta <input> puede presentarse de diferentes formas en el documento: Como un campo de texto, como una casilla de verificación, un botón de opción o un botón, entre otras. Eso se consigue usando el atributo type, que puede tener lo valores de: text, checkbox, radio, file... entre muchos más.

Para identificar el campo cuando se realiza el envío de información al servidor se usa el atributo name, su funcionalidad es similar al atributo id, pero no es intercambiable. Es decir, aunque el campo tenga un id definido, si no tiene el atributo name no será enviado al servidor.

Del mismo modo, si queremos definir el valor que enviará el elemento al servidor cuando el valor no es lo que haya tecleado el usuario, usaremos el atributo value.

Otros atributos importantes son readonly, para indicar que el valor del campo es de sólo lectura, y por lo tanto no lo puede modificar el usuario, disabled, que indica que ese campo está desactivado y por lo tanto ni se puede modificar ni será enviada sun información al servidor.

Ejemplo

Este un ejemplo básico de formulario con los diferentes tipos de elementos que hemos indicado antes: Campos que recogen texto, listas desplegables, botones de opción, casillas de verificación, envío de archivos y varios botones de acción: 


    <form action="programas/mail.php" method="GET">
        <fieldset>
            <legend>Datos de Usuario</legend>
            <div class="fila-form">
                <label for="nombre_user">Nombre:</label>
                <input type="text" name="nombre_user" id="nombre_user" placeholder="tu nombre">
            </div>
            <div class="fila-form">
                <label for="apell_user">Apellidos</label>
                <input type="text" name="apell_user" id="apell_user">
            </div>
            <div class="fila-form">
            <label for="pass_user">Contraseña</label>
            <input type="password" name="pass_user" id="pass_user">
            <input type="hidden" name="nuevo_user" id="nuevo_user" value="si">
        </div>
        <div class="fila-form">
            <label for="cv_user">Adjunta tu CV</label>
            <input type="file" name="cv_user" id="cv_user">
        </div>
        <div class="fila-form">
            <input type="checkbox" name="privacidad" id="privacidad" value="100">
            <label for="privacidad">Acepto privacidad y recibir spam</label>
        </div>
        </fieldset>
        <fieldset>
            <legend>Datos formativos</legend>
            <div class="fila-form">
                <label>Selecciona el turno de clase preferido</label><br>
                <input type="radio" name="turno" value="1" id="turno_m"><label for="turno_m">Mañanas</label><br>
                <input type="radio" name="turno" value="2" id="turno_t"><label for="turno_t">Tardes</label><br>
                <input type="radio" name="turno" value="3" id="turno_n"><label for="turno_n">Noches</label>
            </div>
            
            <div class="fila-form">
                <label for="lista">Cuál es tu lenguaje favorito</label>
                <select name="lista" id="lista">
                    <optgroup label="Formato">
                        <option value="1">HTML</option>
                        <option value="2">CSS</option>
                    </optgroup>
                    <optgroup label="Lenguajes Cliente">
                        <option value="3" selected>JavaScript</option>
                        <option value="4">JQuery</option>
                    </optgroup>
                    <optgroup label="Lenguajes Servidor">
                        <option value="5">PHP</option>
                        <option value="6">ASP.Net</option>
                    </optgroup>
                </select>
            </div>
            <div class="fila-form">
                <label for="lista-multiple">Indica tu preferencia</label>
                <select name="lista-multiple" id="lista-multiple" multiple>
                    <option value="1">Desarrollo FrontEnd</option>
                    <option value="2">Desarrollo BackEnd</option>
                    <option value="3">Diseño Gráfico</option>
                    <option value="4">Programación</option>
                </select>
            </div>
        </fieldset>
        <div class="fila-form">
            <label for="comentario">Comentario:</label>
            <textarea name="comentario" id="comentario" placeholder="Tu comentario aquí"></textarea>
        </div>
        <div class="fila-form">
            <input type="submit">
            <input type="reset">
            <input type="button" value="Validar ">
        </div>
    </form>

Resultado

Y este es su resultado en el navegador cuando no le aplicamos nada de CSS:

Datos de Usuario
Datos formativos