CU00724B Formularios HTML Boton Envio Submit Reset Imagen Contenido Button

Formularios en HTML. Botones: envo, restablecimiento, imagen.
APRENDERAPROGRAMAR.COM
FORMULARIOS HTML.
BOTONES: ENVO SUBMIT,
RESTABLECIMIENTO RESET,
IMAGEN Y CONTENIDO
(BUTTON). (CU00724B)
Seccin: Cursos
Categora: Tutorial bsico del programador web: HTML desde cero
Fecha ltima actualizacin: 2012
Resumen: Entrega n24 del Tutorial bsico HTML desde cero.
Autor: Enrique Gonzlez Gutirrez
aprenderaprogramar.com, 2006-2012
BOTONES
Un botn nos permite realizar una accin con el formulario que lo contenga. Existen dos tipos bsicos
de botones: enviar el formulario (envo o submit) y poner todos los campos a sus valores iniciales
(restablecimiento o reset).
Adems de estos dos tipos de botones, existe un botn especial que no posee ninguna accin
predefinida y que, por tanto, deber ser especificada con un lenguaje del lado del cliente.
Los botones pueden insertarse a travs de la etiqueta (tag) HTML input (botones para enviar y
reestabler y botones de imagen) o el elemento HTML button (botones de contenido).
Botones de envo
Este tipo de botones enva automticamente el formulario en que se encuentra cuando es presionado.
Es decir, cuando se pulsa el botn el navegador nos lleva a la direccin web indicada en el campo action
y al mismo tiempo enva a esa direccin los datos que contiene el formulario. Para insertar un botn
usamos la etiqueta <input />. Para indicar que se trata de un botn de envo dentro de esta etiqueta
escribiremos type = submit. Escribe este cdigo y visualiza el resultado:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
</head>
<body>
<form method="get" action="accion.php">
<input type="submit" value="Enviar este formulario" />
</form>
</body>
</html>
Fjate que hemos escrito <input type="submit" value="Enviar este formulario" />. Esta forma de
escritura es una forma abreviada equivalente a:
<input type="submit" value="Enviar este formulario"> </input>
Ambos cdigos producen el mismo resultado, pero es ms habitual usar la primera forma (abreviada)
que la segunda en este tipo de elementos (y en otros).
En el ejemplo anterior, simplemente lo que ocurrir al pulsar sobre el botn Enviar este formulario es
que el navegador ir a la pgina accion.php y recibir los datos que pudiera llevar el formulario. La
direccion accion.php se busca dentro del mismo directorio, ya que no hemos especificado una ruta
completa.
Botones de restablecimiento
Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es
presionado. Son insertados con la etiqueta (tag) HTML input con el valor "reset" en su atributo "type".
Escribe el siguiente cdigo y visualiza sus resultados:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<input type="text" name="texto1" value="Valor por defecto" /><br />
<input type="checkbox" name="condiciones" checked="checked" />
Acepto las condiciones<br />
<input type="reset"
value="Restablecer todos los campos a su valor predeterminado" />
</form>
</body>
</html>
En el ejemplo anterior, puedes probar la funcionalidad del botn cambiando los valores de los
elementos y presionando el botn para restablecer los campos a sus valores iniciales.
Botones de imagen
Estos tipos de botones funcionan exactamente como los botones de envo salvo que los de imagen son
representados visualmente con la imagen especificada en el atributo "src". Adems, estos tipos de
botones envan las coordenadas donde ha ocurrido el click cuando el formulario fue enviado, tomadas
desde la esquina superior izquierda del botn (por ejemplo, para un botn de imagen llamado "boton1"
las coordenadas sern enviadas en la forma "boton1.x" y "boton1.y").
Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo
"type".
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<input name="boton1" type="image"
src="/images/aprenderaprogramar/imagen.png">
</form>
</body>
</html>
Si ahora, hiciramos click sobre el botn de imagen, podramos observar como se envan las
coordenadas donde hicimos el click.
Ejemplo de cmo se reflejara en la ruta que muestra el navegador los datos correspondientes a valores
x e y de coordenadas: http://www.aprenderaprogramar.com/accion.php?boton1.x=115&boton1.y=31
Botones de contenido
Los botones de contenido pueden ser usados como botones de envo o restablecimiento, o bien
pueden no tener ninguna accin preestablecida (dependiendo del valor de su atributo "type"). Su
caracterstica es que se puede insertar contenido HTML dentro de ellos.
Los botones de contenido se insertan con el tag HTML button, usando el valor "button", "submit" o
"reset" en su atributo "type". Un valor button supondr que el botn no har nada en respuesta a un
click, a no ser que se especifique una accin de otra manera (no vamos a explicar ahora cmo). Un valor
submit har que el botn funcione como un botn de envo. Finalmente, un valor reset har que el
botn funcione como un botn de restablecimiento de los valores predeterminados del formulario.
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
<html>
<head>
</head>
<body>
<button type="submit">
El <b>tag HTML type button</b><br />
permite contenido HTML en su interior.
</button>
</form>
</body>
</html>
Como podemos observar, hemos introducido contenido HTML dentro del propio botn; en concreto
hemos usado la etiqueta <b> </b> para poner texto en negrita y la etiqueta <br /> para introducir un
salto de lnea.
A su vez hemos escrito <button type="submit">, lo que supondr que el botn funcione como un botn
de envo. Si hubiramos escrito <button type="reset"> el botn funcionara como un botn de
restablecimiento de valores por defecto, y su hubiramos escrito <button type="button"> el botn no
dara lugar a ninguna accin. En caso de no especificarse type para el botn, en general se entender
que es un botn tipo submit.
Prxima entrega: CU00725B

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192

CU00724B Formularios HTML Boton Envio Submit Reset Imagen Contenido Button

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

CU00724B Formularios HTML Boton Envio Submit Reset Imagen Contenido Button

Загружено:

Авторское право:

Доступные форматы

Formularios en HTML. Botones: envo, restablecimiento, imagen.

Autor: Enrique Gonzlez Gutirrez

Formularios en HTML. Botones: envo, restablecimiento, imagen.

Formularios en HTML. Botones: envo, restablecimiento, imagen.

Formularios en HTML. Botones: envo, restablecimiento, imagen.

Formularios en HTML. Botones: envo, restablecimiento, imagen.

Prxima entrega: CU00725B

Вам также может понравиться