UF1304 | UD02

UD01 | Formularios en la construcción de páginas web

Formularios

Se presentan los elementos básicos que estructuran los formularios:

Elemento <form>: Engloban los formulario.
Elemento <label>: Sirve para escribir el nombre del campo al que acompaña.
Elemento <input>: Sirve para crear un campo que el usuario completará con un dato.
Elemento <button>: Botón que permite enviar el formulario.

Ejemplo:

<form>            
    <label>Nombre</label>
    <input>
    <button>Enviar formulario</button>
</form>

Asociación de un <label> a un <input> | Método 1
Ejemplo:

<form>            
    <label for="name">Nombre</label>
    <input id="name">
    <button>Enviar formulario</button>
</form>

Asociación de un <label> a un <input> | Método 2. No es un método tan óptimo de cara a la asignación de estilos CSS, pero la especificación admite el método.
Ejemplo:

<form> 
    <label for="name">Nombre</label>
    <input id="name">
    <button>Enviar formulario</button>
</form>

V020-form-botones.html

Se presentan diferentes tipos de botones:

input tipo botón
Ejemplo:

<form>            
    <label for="name">Nombre</label>
    <input id="name">
    <input type="button" value="Enviar">
</form>

Botón tipo botón
Ejemplo:

<form>            
    <label for="name">Nombre</label>
    <input id="name">
    <button>Enviar</button>
</form>

input tipo submit
Ejemplo:

<form>            
    <label for="name">Nombre</label>
    <input id="name">
    <input type="submit" value="Enviar">
</form>

V030-form-fechas.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presentan campos de tipo fecha:

Campo de tipo fecha
Ejemplo:

<form>            
    <label for="fecha">Fecha</label>
    <input id="fecha" type="date">
</form>

Campo fecha y hora obsoleto
Ejemplo:

<form>            
    <label for="fecha">Fecha</label>
    <input id="fecha" type="datetime">
</form>

Campos fecha y hora para firefox (y resto de navegadores)
Ejemplo:

<form>            
    <label for="fecha">Fecha</label>
    <input id="fecha" type="date">
    <label for="hora">Hora</label>
    <input id="hora" type="time">
</form>

Campo mes
Ejemplo:

<form>            
    <label for="mes">Mes</label>
    <input id="mes" type="month">
</form>

Campo semana
Ejemplo:

<form>            
    <label for="semana">Semana</label>
    <input id="semana" type="week">
</form>

V040-form-moviles.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presentan los campos para móviles:

Campo de búsqueda
Ejemplo:

<form>            
    <label for="busqueda">Búsqueda</label>
    <input id="busqueda" type="search">
</form>

Campo de teléfono
Ejemplo:

<form>            
    <label for="telefono">Número de teléfono</label>
    <input id="telefono" type="tel">
</form>

Campo e-mail
Ejemplo:

<form>            
    <label for="mail">Correo electrónico</label>
    <input id="mail" type="email">
</form>

Contraseña
Ejemplo:

<form>            
    <label for="contrasena">Contraseña</label>
    <input id="contrasena" type="password">
</form>

Campo URL
Ejemplo:

<form>            
    <label for="url">URL</label>
    <input id="url" type="url">
</form>

V050-form-varios.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presentan inputs variados:

Campo color
Ejemplo:

<form>            
    <label for="color">Color</label>
    <input id="color" type="color">
</form>

Campo number
Ejemplo:

<form>            
    <label for="numero">Número</label>
    <input id="numero" type="number">
</form>

Campo range
Ejemplo:

<form>            
    <label for="rango">Número en rango</label>
    <input id="rango"  type="range" step="10" min="0" max="100>
</form>

Campo reset
Ejemplo:

<form>            
    <label for="nombre">Nombre</label>
    <input id="nombre" type="text">
    <input type="reset" value="Reset">
</form>

Campo meter
Ejemplo:

<form>            
    <label for="temperatura">
        Temperatura de conservación del vino tinto
    </label>
    <input id="temperatura" min="0" max="20" value="16"
    low="10"  optimum="13" high="16">
</form>

Campo progress
Ejemplo:

<form>            
    <label for="progreso">Progreso</label>
    <input id="progreso" min="0" max="100" value="75">
</form>

V060-form-radio-check.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presentan los campos de radio y checkbox:

Campos de radio
Ejemplo:

<form>            
    <label for="pri">Primavera</label>
    <input id="pri" type="radio" name="estacion"
    value="primavera">

    <label for="ver">Verano</label>
    <input id="ver" type="radio" name="estacion"
    value="verano">

    <label for="oto">Otoño</label>
    <input id="oto" type="radio" name="estacion"
    value="otoño">

    <label for="inv">Invierno</label>
    <input id="inv" type="radio" name="estacion"
    value="invierno">
</form>

Inputs tipo checkbox
Ejemplo:

<form>            
    <label for="txt">Procesador de textos</label>
    <input id="txt" type="checkbox" name="cursos"
    value="procesador de textos">

    <label for="calc">Hoja de cálculo</label>
    <input id="calc" type="checkbox" name="cursos"
    value="hoja de cálculo">

    <label for="bbdd">Bases de datos</label>
    <input id="bbdd" type="checkbox" name="cursos"
    value="bases de datos">

    <label for="pre">Presentaciones multimedia</label>
    <input id="pre" type="checkbox" name="cursos"
    value="presentaciones">
</form>

V070-form-lista.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presentan los campos de lista:

Campo de lista desplegable
Ejemplo:

<form>            
    <label for="cur">Cursos de ofimática</label>
    <select id="cur" name="cursos">
        <option value="procedasor">Procesador de textos</option>
        <option value="calculo">Hoja de cálculo</option>
        <option value="bbdd">Bases de datos</option>
        <option value="presentacion">Presentaciones multimedia</option>
    </select>
</form>

Campo de lista de selecciones múltiples
Ejemplo:

<form>            
    <label for="cur">Cursos de ofimática</label>
    <select id="cur" name="cursos" multiple>
        <option value="procedasor">Procesador de textos</option>
        <option value="calculo">Hoja de cálculo</option>
        <option value="bbdd">Bases de datos</option>
        <option value="presentacion">Presentaciones multimedia</option>
    </select>
</form>

Campo select avanzado
Ejemplo:

<form>            
    <label for="cur-3">Cursos</label>
    <select id="cur-3" name="cursos">
        <optgroup label="Ofimática">
            <option value="procedasor">
                Procesador de textos
            </option>
            <option value="calculo">
                Hoja de cálculo
            </option>
            <option value="bbdd">
                Bases de datos
            </option>
            <option value="presentacion">
                Presentaciones multimedia
            </option>
        </optgroup>

        <optgroup label="Web">
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="javascript">JavaScript</option>
        </optgroup>

        <optgroup label="CMS">
            <option value="wordpress">Word Press</option>
            <option value="joomla">Joomla!</option>
            <option value="drupal">Drupal</option>
        </optgroup>
    </select>
</form>

Datalist. El elemento datalist representa una lista de opciones predefinidas que pueden ser utilizadas para proveer sugerencias en muchos controles de formularios.
Ejemplo:

<form>            
    <label for="cur-4">Cursos</label>
    <input type="list" list="cursos" id="cur-4">
    <datalist id="cursos">
        <option value="Microsoft Word">
            Procesador de textos
        </option>
        <option value="Microsoft Excel">
            Hoja de cálculo
        </option>
        <option value="Microsoft Access">
            Bases de datos
        </option>
        <option value="Microsoft PowerPoint">
            Presentaciones multimedia
        </option>
        <option value="HTML"></option>
        <option value="CSS"></option>
        <option value="JavaScript"></option>
        <option value="WordPress">
            CMS WordPress
        </option>
        <option value="Joomla!">
            CMS Joomla!
        </option>
        <option value="Drupal">
            CMS Drupal
        </option>
    </datalist>
</form>

V080-form-agrupar.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta el elemento <fieldset> que permite organizar en grupos los campos de un formulario:

Ejemplo:

<form>            
    <fieldset>
        <legend>Datos personales</legend>
        <label for="nom">Nombre</label>
        <input type="text" id="nom">
        <label for="ape1">Primer apellido<label>
        <input type="text" id="ape1">
        <label for="ape2">Segundo apellido</label>
        <input type="text" id="ape2">
    </fieldset>
</form>

V090-form-textarea-adjunto.html

Se presentan los componentes de formulario para áreas de texto y para documentos adjuntos:

Áreas de texto
Ejemplo:

<textarea name="comentario" id="com" cols="50" rows="5">
</textarea>

Documentos adjuntos
Ejemplo:

<input id="arch" type="file">

V100-form-atributos.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presentan diversos atriobutos para los componentes de un formulario:

Atributo autofocus
Ejemplo:

<!-- El atributo autofocus te permite especificar
que una parte del formulario debe tener foco para
ingresar información cuando se carga la página. Sólo
un elemento del formulario en un documento puede tener
el atributo autofocus, que es de tipo boolean. Este
atributo puede ser aplicado a los elementos <input>,
<button>, <select> y <textarea>. -->
<label for="nom">Nombre</label>
<input type="text" id="nom" autofocus>

Atributo disable
Ejemplo:


<!-- El atributo desable no envía ningún valor y no puede
ser modificado por el formulario a menos que, mediante una
acción de JavaScript, se suprima el atributo de solo
lectura -->
<label for="curso">Curso</label>
<input type="text" id="curso" disabled>

Atributo placeholder
Ejemplo:

<!-- El atributo placeholder en elementos <input>
y <textarea> provee una ayuda a los usuarios acerca
de qué debe ser ingresado en el campo. El texto introducido
en el placeholder no debe contener «enters» o saltos de línea.-->
<input type="email" id="user-email" placeholder="e.g.
john.doe@mozilla.com">

Atributo readonly
Ejemplo:


<!-- El atributo readonly envía un valor que no puede
ser modificado por el formulario a menos que, mediante una
acción de JavaScript, se suprima el atributo de solo
lectura -->
<label for="curso">Curso</label>
<input type="text" id="curso" readonly>

Atributo required
Ejemplo:

<!-- El atributo required en los elementos <input>,
<select> y <textarea> indica que se debe
ingresar algún dato.-->
<label for="nom">Nombre</label>
<input type="text" id="nom" required>

V110-form-get.html

Se presenta el método GET para el envío de formulario:

Ejemplo:

<GET lleva los datos de forma "visible" al cliente
(navegador web). El medio de envío es la URL. Los datos
los puede ver cualquiera.-->
<form action="http://www.aprenderaprogramar.com/prog/newuser"
method ="get">

V120-form-post.html Este ejercicio no se ha visto en clase. Está fuera del temario.

Se presenta el método POST para el envío de formulario:

Ejemplo:


<POST consiste en datos "ocultos" (porque el cliente
no los ve) enviados por un formulario cuyo método de
envío es post. Es adecuado para formularios. Los datos
no son visibles. -->
<form action="http://www.aprenderaprogramar.com/prog/newuser"
method ="post">