HTML Guia

HTML
HTML, siglas de HyperText Markup Language (lenguaje de marcado de

hipertexto), es el lenguaje de marcado predominante para la elaboracin de
pginas web. Es usado para describir la estructura y el contenido en forma de
texto, as como para complementar el texto con objetos tales como imgenes. El
HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>).
Extensin de archivo .html, .htm
Las etiquetas tienen la siguiente forma de modo general:
<nombre> aqu puede ir un texto cualquiera </nombre>
Donde nombre es la etiqueta a usar. En el cierre se tiene una diagonal a la
izquierda del nombre de etiqueta.
Estructura General.
La etiqueta HTML indica al navegador donde empieza y acaba determinada
pgina web a crearse. La etiqueta head delimita la cabecera de la pagina; es decir,
la parte alta de la misma. El cuerpo de pgina tiene por etiqueta a BODY y en ella
se encuentran todos los elementos.
Ejemplo de cdigo general
<HTML>
<HEAD>
<TITLE> Mi titulo de pagina </TITLE>
</HEAD>
<BODY>
Aqu puede ir texto, hipertexto, imagen o cualquier otra cosa siempre y cuando
est bien escrito y con su debida etiqueta puesta.
</BODY>
</HTML>
Las etiquetas HTML, HEAD y BODY son indispensables para la creacin de una
pgina web de otro modo no es visible en el navegador.

Etiqueta HEAD.
En HEAD irn las etiquetas de cabecera que le informaran al navegador el tipo de
documento, el titulo, la descripcin las palabras claves, los script, etc

<head> Contenido del Head </head>

Etiqueta BODY
Todo lo que queramos que se vea en nuestra pgina web deberemos escribirlo
dentro de la etiqueta BODY. Eso es lo que llamamos el "cuerpo" del documento.
Es la parte visible. Pero debes saber que ese cuerpo, o sea, que la etiqueta BODY
tambin podemos personalizarla para darle el aspecto que nosotros deseemos.

Esta personalizacin la conseguiremos a travs de una serie de parmetros que a
continuacin te presentaremos. Bien, pues vamos a empezar.

Color de fondo: bgcolor
El primer parmetro que debes conocer es el del color de fondo, el "bgcolor". A
travs de este parmetro podremos definir el color de fondo que queramos que
tenga nuestra pgina. Un ejemplo muy simple es el siguiente: Si queremos que
nuestra pgina quede con un fondo rojo deberemos escribir:
<body bgcolor="#FF0000"></body>
Imagen de fondo: background
Puede que no quieres que tu pgina tenga un color slo de fondo, sino que
quieras que tu pgina tenga una imagen. En ese caso debers indicarlo con la
etiqueta "background". La etiqueta quedara de la siguiente manera:
<body background="URL"> </body>
Dnde leemos "URL" deberemos escribir la direccin de la imagen que queramos
que sea nuestro fondo. Una cosa muy importante que debes saber es que si la
imagen no es suficientemente grande para rellenar toda la pgina, la imagen se
repetir tanto a lo ancho como a lo largo hasta rellenar todo el espacio.

Color de texto: text
Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del
texto de nuestra web. Es decir, tendremos que decirle al navegador de qu color
queremos que sea nuestro texto. Esto lo definiremos con el parmetro "text".

Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con
lo que escribiremos lo siguiente:
<body text= "#000000"></body>
Color de links: link, alink y vlink
En body tambin podemos ( y de hecho debemos hacerlo) definir el color de los
vnculos de nuestra pginas, definir el color con el que se mostraran los links. Aqu
debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link
(con la etiqueta "link"), el color del link activo (con la etiqueta "alink") y el color del
link ya visitado (con la etiqueta "vlink").

As pues, si queremos que nuestra pgina tenga un color de enlaces (de links) de
color rojo y que esos enlaces sean rojos cuando estn activos y se queden en azul
cuando estn inactivos deberemos escribir lo siguiente:
<body link= "#FF0000" alink= "#FF0000" vlink= "# 0000FF"></body>

Saltos de lnea

En HTML para dejar un salto de lnea debemos utilizar una serie de etiquetas, de
cdigo, que el navegador interpretar cmo tal. Esas etiquetas son <br/> </p> o
</pre>. A continuacin te explicaremos cada una de ellas.

Ya os hemos comentado anteriormente que en html los saltos de lnea escritos en
cdigo no son tal una vez el navegador interpreta el cdigo. Vamos a explicaros
esto con un claro ejemplo:

Puedes escribir un texto como este
y el navegador no lo interpretar as

Y se ver as:

Puedes escribir un texto como este y el navegador no lo
interpretar as

Existen dos etiquetas para indicar que queremos hacer un salto de lnea normal.
Son las etiquetas <br> y <br/> ambas son interpretadas igual por el navegador.
Esta etiqueta no hace falta abrirla y cerrarla, slo con escribirla el navegador ya la
interpreta.

As pues el texto anterior deberamos escribirlo de la siguiente forma:

Puedes escribir un texto como este <br/>
y el navegador no lo interpretar as

Prrafos

Para indicarle al navegador que queremos poner ese texto en un prrafo,
debemos escribirlo entre las etiquetas <p> y su cierre </p>.

As el texto quedar dentro de un prrafo, separado por un espacio en blanco por
encima y uno por abajo.

El texto del prrafo lo puedes alinear utilizando la etiqueta align utilizando los
parmetros center (para alinearlo al centro), right (para alinearlo a la derecha),
left (para alinearlo a la izquierda) y justify (para justificar el texto).

Un ejemplo de esta etiqueta con sus respectivos parmetros es el siguiente:

<p align="center">Este texto se alinear al centro</p>
<p align="right">Este texto se alinear a la derecha</p>
<p align="left">Este texto se alinear a la izquierda</p>

que se ver as:

Este texto se alinear al centro
Este texto se alinear a la derecha
Este texto se alinear a la izquierda

Encabezados.

Puede que queramos empezar nuestra web o nuestro texto con un encabezado
indicando el ttulo del artculo, categora, etc. Pues bien, para escribir
encabezados tenemos que utilizar las etiquetas <h>.

Esta etiqueta viene acompaada de un nmero, desde el 1 hasta el 6,
predefiniendo stos el tamao del encabezado. As, <h1> sera el encabezado
ms grande mientras que <h6> sera el ms pequeo.

A continuacin vamos a mostraros el cdigo de los seis diferentes encabezados:
<h1> Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo ms grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeo</h5>
<h6>Texto muy pequeo</h6>

Si ya habis visto el ejemplo os daris cuenta que cada encabezado est
separado del anterior y del siguiente por un salto de lnea y que nosotros en el
cdigo no hemos escrito nada. Podis deducir pues, que los encabezados
generan por s solos uno salto de lnea.

Por ltimo recordaros que la etiqueta <h> podemos escribirla tanto en maysculas
como en minsculas. Es decir, lo mismo dara escribir <h1> que <H1>.
Imgenes.

Poner imgenes en nuestra web produce unos resultados asombrosos de una
manera muy fcil. Vamos a mostrarte como puedes incluir una imagen y los
atributos que puedes darle a la misma.
El tag bsico para colocar una imagen es "img". Este tag, a diferencia de la gran
mayora de los tags de html, no necesita un cierre. Va acompaado de diferentes
atributos que te vamos a explicar a continuacin.
El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es
el que indica dnde se encuentra alojada la imagen que queremos mostrar. Se
escribe as: <img src="x">, siendo "x" la direccin o la url dnde se encuentra
situada la foto.
La foto podemos alinearla en la pgina como queramos mediante "align",
utilizando los atributos "left" para alinearla a la izquierda, "right" para alinearla a la
derecha, "top" para alinearla arriba, "bottom" para alinearla abajo y "middle" para
alinearla al centro.
Tambin podemos poner una descripcin de la imagen dentro de la misma para
que la gente puede leerla al mantener el ratn encima de ella. Esta descripcin
podemos escribirla mediante el atributo "alt" y lo escribiramos de la siguiente
manera: alt= "x", siendo "x" la descripcin que le gente leer al pasar el ratn por
encima.
Debemos aclarar que no con todos los navegadores podemos ver el "alt" de
manera visual. Hay algunos que no lo representan.
Atributos opcionales pero muy recomendables, son el height y el width. El height
marca la altura de la imagen, mientras que el width marca la anchura. Son
recomendables porque as ayudaremos al navegador a representar la imagen.
Y por ltimo, tambin queremos mostrarte que le puedes adjudicar un borde a la
fotografa. El atributo ya te lo sabes: "border". Despus solo tendrs que definir
cul quieres que sea el grosor del borde.

As las cosas, deberemos escribir este cdigo...
<img src="html/imagenes/prueba.jpg" border="1" alt="Este
es el ejemplo de un texto alternativo" width="400"
height="300">
...para poder ver esta preciosa fotografa

Enlaces.

Los enlaces nos permiten de una manera muy cmoda redirigir al usuario a otra
parte, cuando ste pinche en dicho enlace. Podemos hacer que el usuario se vaya
a otra url distinta a la que est, o podemos hacer que vaya a otra parte pero dentro
del mismo archivo en el que est, dentro de la misma url.
Esta explicacin la entenders ms fcilmente cuando te presentemos los tipos de
enlaces que hay y veas sus caractersticas. As pues, vamos a ello:
La etiqueta <a>
Es dentro de esta etiqueta y de su cierre (</a>) dnde encontraremos el enlace.
Todo lo que est dentro de ella, ya sea texto o una imagen, estar considerado
como un enlace y el navegador lo interpretar as.
Atributo href
Para que un enlace est activo debemos indicar dentro de l el destino del mismo.
Para establecer este destino le colocamos a la etiqueta <a> este atributo. La
etiqueta completa nos quedara as:
<a href=enlace>Pincha aqu para ir al destino del enlace</a>
Las urls pueden tener dos tipos de rutas o direcciones: Las urls con direccin
relativa y las urls con direccin absoluta. Vamos a explicarlas a continuacin:
Direcciones absolutas y relativas:

Las direcciones absolutas son aquellas que contienen la url completa. En estas
direcciones podemos ver todos los elementos de la direccin. Un ejemplo muy
claro es el siguiente:
<a href="http://html.hazunaweb.com/112.php">Artculo de enlaces html</a>
Si pinchramos en el enlace iramos directamente al artculo de mapas de
imgenes del tutorial. Fijaros en lo que hablbamos: podemos apreciar todas las
partes de la url.
En las direcciones relativas vemos que no est la url completa. En este tipo de
direcciones, las partes que faltan de la direccin el navegador las genera de la
propia pgina en la que est el enlace. Por ejemplo, si dentro de la pgina
http://html.hazunaweb.com/112.php encontrramos la siguiente url...
<a href="111.php">Artculo de enlaces html</a>
el navegador entiende que dentro de la pgina y de la carpeta en la que se
encuntra, debe dirigirse al fichero 111.php.
Protocolos
Los enlaces nos pueden llevar a url con diferentes protocolos. Nosotros os vamos
a presentar los dos ms importantes:
http: Este es el protocolo bsico de los servidores webs.
https: Este protocolo se diferencia del anterior en que es un protocolo
cifrado. Es decir, la informacin que se enva y se recibe con esa url esta
siendo encriptada para que nadie ms pueda interceptar y usar esa
informacin. Las pginas con este protocolo son las conocidas como
pginas seguras. Esta encriptacin de los datos produce una pequea
ralentizacin de la pgina debido a que los datos se envan cifrados.
Mailto
La url mailto es aquella que te lleva directamente a una direccin de correo y, ms
concretamente, a redactar un mensaje. Una direccin mailto sera la siguiente:
<a
href=mailto:correodeejemplo@correodeejemplo.com>correodeejemplo@correode
ejemplo.com</a>
Fjate en el ejemplo que acabamos de poner. Nosotros, como texto para albergar
el enlace, hemos puesto la misma direccin que la que va a abrir la url. Por qu?
El programa de correo que abre el navegador es aquel que el usuario tenga como
predefinido. Nosotros te aconsejamos que como texto para albergar el enlace
pongas la direccin de correo electrnico. Windows por defecto tiene
predeterminado el Outlook y al pinchar en el enlace lo abre directamente. Muchos
usuarios prefieren copiar la direccin y pegarla en su programa de correo.
La etiqueta target:
La etiqueta sirve para definir la forma en la que se acceder a la nueva url. Esta
etiqueta la escribimos dentro del enlace para predefinirla. Puede ser de diferentes
tipos:
_self: Es el valor por defecto del parmetro target. El enlace se abrir en el
mismo marco en el que est alojado.
_blank: Para hacer que ese enlace se abra en una ventana a parte.
_top: Elimina todos los marcos existente y muestra la nueva pgina en la
ventana original sin marcos.
_parent : Muestra la nueva pgina en el <frameset> que contiene al marco
donde se encuentra alojado el enlace. La etiqueta <frameset> la explicamos
en otro artculo.
Anclas
Un ancla nos sirve para dirigir al usuario a otra parte distinta pero dentro del
mismo fichero en el que estamos. Para crear un ancla debemos crear primero el
lugar al que queremos acceder. Debemos escribir lo siguiente:
<a name=ancla>
Y despus debemos escribir un enlace con el cdigo siguiente:
<a href= #ancla>Enlace para acceder al ancla</a>
Yo he situado un ancla justo al principio de este artculo. Si pinchas en el siguiente
enlace acudirs a ella y vers el efecto.
Ir al principio del artculo gracias al ancla
Y para terminar te mostraremos como podemos hacer que un enlace nos diriga
directamente a una imagen. Le hemos indicado al enlace que nos abra la imagen
en una ventana diferente gracias al target:blank. El cdigo es el siguiente:
<a
href="http://html.hazunaweb.com/html/imagenes/prueba.jpg"
target="_blank">Ir
a ver el ejemplo de prueba </a>
Y el resultado le vers pinchando en aqu: Ir a ver el ejemplo de prueba
Y terminamos con otro tipo de enlace. Esta vez el enlace est en la imagen. Si
pinchas en ella, irs al artculo dnde vimos por primera vez esa fotografa.
Primero te mostramos el cdigo:
<a href="http://html.hazunaweb.com/112.php"
target="_blank"><img
src="http://html.hazunaweb.com/html/imagenes/prueba-
enlace.jpg" alt="Pincha para ir al enlace" width="300"
height="214" border="0"></a>
Y aqu tienes la imagen con el enlace. Se abrir en una ventana nueva gracias al
target blank.

Formularios I: introduccin.

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y
nos permiten recibir informacin de los usuarios de nuestro site. Los formularios
html estn compuestos por campos de texto y botones.
Una vez el usuario ha rellenado el formulario e introducido los valores en los
campos, stos son enviados para poder procesarlos. El envo de estos datos
puede hacerse a un correo electrnico o a un programa que procese toda la
informacin y nos ayude a hacer un seguimiento.
Los formularios son un tag ms de html y, como todos los tags, debe ir indicado
mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre
</form>. Todo lo que vaya dentro de estas etiquetas, sern partes del formulario.
La etiqueta <form> tiene una serie de atributos bsicos que vamos a pasarte a
explicar a continuacin.
action
El atributo action indica el tipo de accin que va a realizar el formulario.
Anteriormente indicamos que la informacin poda enviarse a un correo electrnico
o a un programa que la gestione. Es mediante esta etiqueta que se gestionan los
formularios.
Si queremos que el formulario se enve a un correo, la accin quedara escrita de
la siguiente manera: <form
action=mailto:direcciondelcorreo@correo.com></form>. Este tipo de envos se
utilizaran para casos de formularios de contacto, de sugerencias, etc.
Si lo que queremos es que la informacin sea enviada a un programa que la
gestione, debemos indicarle en la accin, la url del archivo donde se encuentra
ubicado el programa que la gestionar. Lo escribiramos de la siguiente manera:
<form action="direccin completa del archivo que la gestionar" ...> </form>. Este
tipo de envos se utilizaran para casos de formularios de encuestas,
cuestionarios, etc.
method
Mediante este atributo le indicamos al formulario la forma en la que el formulario
ser enviado. Existen dos valores posibles: get y post.
El valor get es el valor por defecto. Si no concretamos el method, la informacin se
enviar a travs de este medio.
get indica que los datos enviados se adjuntarn en la barra de direcciones del
cliente, al final de la url correspondiente y despus de un signo de interrogacin de
cierre. Si se enva ms de un dato, stos irn separados por el smbolo &.
Un ejemplo de un formulario enviado por el method=get sera el siguiente:
http://www............?nombre1=valor1&nombre2=valor2
El valor post indica que el mtodo de envo no se har a travs de la url, sino
formando parte del cuerpo de la peticin.
enctype
Mediante este atributo indicaremos la forma en la que viajar la informacin que
se mande a travs del formulario.
La forma puede ser de varios tipos, aunque el ms comn es que la informacin
se enve como texto plano (enctype="text/plain").
Una vez vistos estos tres atributos, veremos como quedara el cdigo de un
formulario estndar a un correo electrnico:
<form action="mailto:direcciondelcorreo@correo.com"
method="post" enctype="text/plain"> </form>

Formularios II: campos de texto.

Los campos de entrada de los formularios se definen mediante el tag <input> y
sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y
de formas.
Vamos a ver a continuacin distintos tipos de cajas y veremos como varan sus
caractersticas.
Las cajas de texto bsicas: <input type= text>
La caja de texto bsica se escribira de la siguiente forma:
<input type="text" name="nombredelacaja">
y su apariencia sera la siguiente:

Hemos visto como el type= text le da a la caja una apariencia sencilla. Este tipo
de campos se usan para albergar informaciones cortas y concretas.
Podemos completar el estilo de esta caja gracias a los siguientes atributos:
size: mediante el atributo size podemos definir el tamao de la caja. Es decir, la
apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, ste
se desplazar pero sin que la caja vare su tamao. El texto ir desapareciendo
por la izquierda.
maxlength: Este atributo nos sirve para definir la cantidad mxima de letras que se
pueden escribir en la caja. No se podrn escribir en la caja ms caracteres que los
indicados por el maxlength.
value: Define si queremos que en la ventana haya un texto ya preescrito. Este
texto puede ayudar al usuario a saber cal es el tipo de dato que te piden en ese
campo.
name: para ponerle un nombre al campo. Esto resulta muy til a la hora de
gestionar la informacin que nos llegue.
Mira el siguiente cdigo:
<input type="text" size="15" maxlength="30" value="Nombre"
name="nombre">
Aqu vemos un tipo de caja text con un tamao de 15 y un lmite de caracteres
de 30. Adems, tiene un texto preescrito en l. El resultado sera el siguiente:

Nombre

Campos de texto largo: <textarea>
Un <textarea> es como una caja de texto sencilla, tipo text, pero en la que
dejamos al usuario espacio de sobra para poder escribir un texto largo. Son tiles
para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc.
Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que
vaya dentro de estas etiquetas formar parte del texto.
Sus atributos bsicos son rows y cols que servirn para definir el tamao del
textarea. Adems, no debemos olvidar el atributo name, que servir para definir
el nombre de este campo.
Un textarea llamado comentarios y con unas dimensiones de 10 filas y de 40
columnas, tendra el cdigo siguiente:
<textarea name="comentarios" rows="10" cols="40">Escribe
aqu tus comentarios</textarea>
Y se vera de la siguiente forma:

Textos con passwords
En muchos formularios se piden datos personales que el usuario no quiere que se
lean a su alrededor: contraseas, etc. Para ello debemos crear una caja que no
muestre los datos que se escriben en ella y que los codifique. Esto es ms sencillo
de lo que parece.
El siguiente cdigo es de un campo con datos codificados:
<input type="password" name="contrasea">

Y este sera el resultado obtenido:

Formularios III: listas de opciones.

Las listas de opciones son de gran ayuda para los formularios en los que
queremos saber la opinin de un aspecto concreto en nuestra Web, dentro de
diferentes opciones planteadas previamente por nosotros. Las listas de seleccin
u opciones se escriben gracias a la etiqueta <selection> y a su cierre.
Vamos a ponerte un ejemplo de la lista de opciones bsica, la ms sencilla. Si
queremos preguntar, por ejemplo, cul es el medio de transporte favorito de
nuestro usuarios, el cdigo de la lista de seleccin podra ser el siguiente:
<select name="transporte">
<option>Coche</option>
<option>Avin</option>
<option>Tren</option>
</select>
Y el resultado quedara de la siguiente manera.

Pero podemos personalizar esta lista de opciones mediante una serie de atributos.
Por ejemplo, podemos hacer que se vea ms de una opcin a la vez en la lista.
Para ello utilizaremos size, indicando el nmero de opciones que queremos que
se muestren.
En la lista anterior si quisieramos que se vieran dos opciones, deberamos cambiar
el cdigo anterior por el siguiente:
<select name="transporte" size="2">
</select>
Para obtener el siguiente resultado:

Coche
Avin

Tambin podemos definir si queremos que se pueda elegir ms de una opcin a la
vez mediante las teclas ctrl y shift. Para ello utilizaremos el atributo multiple. Mira
primero cmo quedara nuestro cdigo.
<select name="transporte" size="2" multiple>
</select>
Y aqu comprobars lo que nos permite hacer este atributo.

Coche
Avin

Otra cosa que podemos predefinir es que la opcin que aparezca seleccionada al
principio no sea la primera que est en la lista. Esto se realiza gracias al atributo
selected y lo tenemos que poner en la opcin que queramos que aparezca como
seleccionada. En el cdigo siguiente, queramos que apareciera seleccionada la
opcin del tren.
<option selected>Tren</option>
</select>
Y aqu puedes ver cual ha sido el resultado.

Tren

Por ltimo esta el atributo value. Este atributo es muy til para gestionar los datos,
sobre todo si le llega a un programa. Con este atributo lo que se le hace es atribuir
un nmero o una letra a cada opcin.
El atributo se escribe dentro de cada opcin y se define el valor del mismo. Por
ejemplo, en la primera lista que te hemos presentado podramos valorar nuestras
opciones de la siguiente manera:
<option value="1">Coche</option>
<option value="2">Avin</option>
<option value="3">Tren</option>
</select>
Y en el supuesto de seleccionar por ejemplo la opcin del avin, al programa (o al
correo electrnico) le llegara el siguiente dato: transporte=2. si te fijas, transporte
es el nombre de esta lista de opciones.
Listas de botones: radio
A continuacin vamos a ver otro tipo de listas de opciones o de seleccin. Son
listas con botones de tipo radio. Estos botones se escriben mediente la etiqueta
type=radio.
Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a cada
opcin le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el
mismo nombre. El cdigo nuevo quedara de la siguiente manera:
<input type="radio" name="transporte" value="1">Coche
<br>
<input type="radio" name="transporte" value="2">Avin
<br>
<input type="radio" name="transporte" value="3">Tren
Y el cambio de aspecto es evidente. Aqu lo tenis:

Coche
Avin
Tren
Por defecto no saldr ninguna opcin activada. Pero si queremos activar alguna
de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el cdigo
siguiente la lista de opciones tiene activada la opcin avin:
<input type="radio" name="transporte" value="1">Coche
<br>
<input type="radio" name="transporte" value="2"
checked>Avin
<br>
<input type="radio" name="transporte" value="3">Tren
Y observa el resultado que obtenemos

Coche
Avin
Tren
Listas de cajas: checkbox.
Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por
dos detalles que vamos a mostrarte a continuacin.
El primero de ellos y fundamental es que las cajas son de un tipo diferente y se
escriben, por tanto, de forma diferente. Las cajas se escriben mediante
type=checkbox.
Otra diferencia es que as como las listas de botones tipo radio slo permitian
elegir una opcin (siempre y cuando los nombres de las opciones fueran los
mismos), las listas de cajas permiten seleccionar una o varias opciones.
Aqu tienes el cdigo de una lista que hemos escrito para demostrarte todo lo que
te hemos explicado anteriormente:
<input type="checkbox" name="transporte"
value="1">Coche
<br>
<input type="checkbox" name="transporte" value="2"
checked>Avin
<br>
<input type="checkbox" name="transporte" value="3">Tren
Y observa a continuacin el resultado:

Coche
Avin
Tren
Formularios IV: botones submit y reset.

Botn de envo
Para enviar la informacin, el formulario necesita de un botn que le indique que el
formulario ha concluido y que pueden enviar la informacin.
Los botones de envo se crean con la etiqueta input de tipo submit. Adems,
hay que definir el texto que queremos que est escrito en el botn. Esto lo
conseguimos con el atributo value. As, el cdigo de un botn sencillo de
formulario sera el siguiente:
<input type="submit" value="Enviar informacin">
Obteniendo el siguiente resultado en nuestra Web:

Enviar inf ormacin

Botn de resetear la informacin
Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde
el principio y volver a escribir la informacin. Para ello es muy til el botn para
borrar la informacin.
El botn se escribe casi igual que el anterior, cambiando el type, que en el caso de
estos botones es reset y cambiando el mensaje interno del botn, o sea, el
value.
El ejemplo sencillo de este botn tendra el siguiente cdigo:
<input type="reset" value="Borrar informacin">
Y el resultado de ese cdigo sera este botn:

Borrar inf ormacin

HTML Guia

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Guia

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

HTML, siglas de HyperText Markup Language (lenguaje de marcado de

Você também pode gostar