Forma o Formulario
Un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en esos controles. Los usuarios normalmente "completan" un formulario modificando sus controles (introduciendo texto, seleccionando objetos de un menú, etc.)
<FORM action="http://algunsitio.com/prog/usuarionuevo" method="post"> <P> <LABEL for="nombre">Nombre: </LABEL> <INPUT type="text" id="nombre"><BR> <LABEL for="apellido">Apellido: </LABEL> <INPUT type="text" id="apellido"><BR> <LABEL for="email">email: </LABEL> <INPUT type="text" id="email"><BR> <INPUT type="radio" name="sexo" value="Varón"> Varón<BR> <INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR> <INPUT type="reset"> </P> </FORM> |
Los usuarios interaccionan con los formularios a través de los llamados controles.
El "nombre de control" de un control viene dado por su atributo name. El "campo de acción" o alcance del atributo name de un control contenido en un elemento FORM es el elementoFORM. Para ingresar un elemento se utiliza la etiqueta "input type". |
Tipos de controles
Botones
Los autores pueden crear tres tipos de botones:
<INPUT type="submit">
Los autores pueden crear tres tipos de botones:
- botones de envío (submit buttons): Cuando se activa, un botón de envío envía un formulario. Un formulario puede contener más de un botón de envío.
- botones de reinicialización (reset buttons): Cuando se activa, un botón de reinicialización reinicializa todos los controles a sus valores iniciales.
- botones pulsadores (push buttons): Los botones pulsadores no tienen un comportamiento por defecto. Cada botón pulsador puede tener asociados scripts en el lado del cliente a través del atributo event del elemento. Cuando ocurre un evento (p.ej., el usuario aprieta el botón, lo suelta, etc.), se acciona el script asociado.
<INPUT type="submit">
Checkboxes
Las casillas de verificación (y los radiobotones) son interruptores de encendido/apagado que pueden ser conmutados por el usuario. Una casilla de verificación está "marcada" cuando se establece el atributo checked del elemento de control. Cuando se envía un formulario, solamente pueden tener éxito los controles de casillas de verificación que estén marcadas.
futbol
box leer |
<input type="checkbox" name="Actividades" value="futbol">futbol<br>
<input type= "checkbox" name="Actividades" value="box">box<br> <input type="checkbox" name="Actividades" value="leer">leer<br> |
Radiobotones
(radio buttons)Los radiobotones son como las casillas de verificación, excepto en que cuando varios comparten el mismo nombre de control, son mutuamente exclusivos: cuando uno está "encendido", todos los demás con el mismo nombre se "apagan". Para crear un control de radiobotón se usa el elemento INPUT.
(radio buttons)Los radiobotones son como las casillas de verificación, excepto en que cuando varios comparten el mismo nombre de control, son mutuamente exclusivos: cuando uno está "encendido", todos los demás con el mismo nombre se "apagan". Para crear un control de radiobotón se usa el elemento INPUT.
a+ a- o+ o- b+ b- |
<label for="Tipode">Tipo de sangre:</label><br>
<input type="radio" name="Tipodesangre" value="a+">a+<br> <input type="radio" name="Tipodesangre" value="a-">a-<br> <input type="radio" name="Tipodesangre" value="o+">o+<br> <input type="radio" name="Tipodesangre" value="o-">o-<br> <input type="radio" name="Tipodesangre" value="b+">b+<br> <input type="radio" name="Tipodesangre" value="b-">b-<br> |
Entrada de texto
(text input) Los autores pueden crear dos tipos de controles que permiten a los usuarios introducir textos. El elemento INPUT crea un control de entrada de una sola línea, y el elemento TEXTAREA crea una control de entrada de varias líneas. En ambos casos, el texto introducido se convierte en el valor actual del control.
(text input) Los autores pueden crear dos tipos de controles que permiten a los usuarios introducir textos. El elemento INPUT crea un control de entrada de una sola línea, y el elemento TEXTAREA crea una control de entrada de varias líneas. En ambos casos, el texto introducido se convierte en el valor actual del control.
|
<label for="Nombre">Nombre:</label>
<input type="text" id="Nombre"><br> <textarea name="historia" cols="30" rows="4" >Escribe una pequeña autobiografia... </textarea>
<label for="Contraseña">Contraseña:</label>
<input type="password" id="Contraseña" size="7" maxlenght="5"> |
Campos de selección
En los campos de selección aparece un lista en nuestro formulario pueden ser desplegables o no.
ejemplo:
ejemplo:
|
<select name="continentes">
<option>America</option> <option>Asia</option> <option>Europa</option> <option>Africa</option> <option>Oceania</option> </select> |
|
<select name="continentes" size="5">
<option>America</option> <option>Asia</option> <option>Europa</option> <option>Africa</option> <option>Oceania</option> </select> |