<!---------------- Formularios -----------------------
<form
Atributos form:
name: Nombre del formulario válido para diferenciar los diferentes formularios javascript
action: - a que programa llama. por ejemplo php
- mailto:aitor@kaixo.com ya no se utiliza ya que requiere tener un cliente de correo instalado
method:
get: se ven los parámetros en la url del navegador
post: no se ven. Por ejemplo para enviar contraseñas, imágenes,..
enctype
text/plain: por defecto
multipart/form-data: para hacer uploads de ficheros en php
Atributos input
name: nombre
value: valor por defecto
type: - text (por defecto) caja de texto
size: tamaño de la caja
maxlenght: máximo número de caracteres
- submit, botón de envio
- password para password
- hidden: Campos ocultos se utiliza para "modificar" en php
- radio :botón de opción: El name te permite agrupar y solo te permite seleccionar 1 !!!
checked="checked" : selecciona por defecto
- chekbox: casilla de verificación: te permite seleccionar varios
Atributo select option: listas de selección
<select name="nombre">
<option />
</select>
selected="selected" por defecto
multiple="multiple" multiselección
Textarea: Áreas de texto. Por ejemplo comentarios
Parámetros
row: filas
cols: columnas
-->
<form name="miformulario" action="mailto:aitor@kaixo.com" method="get" enctype="multipart/form-data">
<!--- input text ----->
Nombre:<input name="nombre" type="text" value="Aitor" /><br/>
Apellidos:<input name="apellidos" /><br/>
Password:<input name="palabraclave" type="password" /><br/>
Dni: <input name="dni" type="text" size="10" maxlength="9"/><br/>
<input type="hidden" value="123" name=oculto />
<!-- input radio ------->
Sexo: <input type="radio" name="sexo" value="chico" />Masculino
<input type="radio" name="sexo" value="chica" checked="checked" />Femenino
<input type="radio" name="aficion" value="leer" />aaaaaaaaaa
<!-- input checkbox ------->
<br/>Mis aficiones favoritas son: <input type="checkbox" name="aficion" value="dep" />Deporte
<input type="checkbox" name="aficion" value="mus" checked="checked" />Musica
<input type="checkbox" name="aficion" value="cine" />Cine
<!---- listas seleccion -->
<br/>Selecciona tu provincia:
<select name="nombre">
<option value="1">Alava</option>
<option value="2" selected="selected">Bizkaia </option>
<option value="3">Gipuzkoa</option>
</select>
<!---- listas seleccion con multiselección -->
<br/>Selecciona tu provincia:
<select name="nombre" multiple="multiple">
<option value="1">Alava</option>
<option value="2" selected="selected">Bizkaia </option>
<option value="3">Gipuzkoa</option>
</select>
<!--- textarea --->
<br/>Comentarios:
<textarea rows="20" cols="80"> Introduce tus comentarios</textarea>
<!-- botones --->
<input type="reset" value="Borrar" />
<input type="submit" value="Enviar" />
</form>
Desarrollo web
viernes, 5 de octubre de 2012
tablas en html
<!----- tablas
table: inicio tabla
th: inicio fila cabecera
tr: inicio fila
td: inicio celda
atributos:
border: borde
width: ancho (porcentaje o tamaño fijo) 80%, 400 tanto para celdas como para filas
height: alto tanto celdas como filas
bgcolor: color del fondo
cellspacing: el espacio del borde al inicio de la celda //en table
cellpadding: el spacio del principio de la celda hasta el texto // en table
colspan: junta dos o más columnas
rowspan: junta dos o más filas
valign: Centrado vertical: top, middle, bottom
align: Centrado horizontal: left, right, center
--->
<table border="1" cellspacing="20" cellpadding="10" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<table border="1" cellspacing="20" cellpadding="10" >
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
table: inicio tabla
th: inicio fila cabecera
tr: inicio fila
td: inicio celda
atributos:
border: borde
width: ancho (porcentaje o tamaño fijo) 80%, 400 tanto para celdas como para filas
height: alto tanto celdas como filas
bgcolor: color del fondo
cellspacing: el espacio del borde al inicio de la celda //en table
cellpadding: el spacio del principio de la celda hasta el texto // en table
colspan: junta dos o más columnas
rowspan: junta dos o más filas
valign: Centrado vertical: top, middle, bottom
align: Centrado horizontal: left, right, center
--->
<table border="1" cellspacing="20" cellpadding="10" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<table border="1" cellspacing="20" cellpadding="10" >
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
Imagenes en html
<!-- imagenes -->
<!------ asfasdfasdf -->
<img src="http://www.ofiline.com/imagenes/logo.gif" />
<a href="http://www.gallina.com"><img src="images/pepito.gif" /></a>
<!------ asfasdfasdf -->
<img src="http://www.ofiline.com/imagenes/logo.gif" />
<a href="http://www.gallina.com"><img src="images/pepito.gif" /></a>
Caracteres especiales en html
<!----- Caracteres especiales
 : Espacio
ñ: ñ
Ñ: Ñ
á: a
Á: Á
&: &
< <
> >
-->
<html>
 : Espacio
ñ: ñ
Ñ: Ñ
á: a
Á: Á
&: &
< <
> >
-->
<html>
listas de definición en html
<!-- listas de definición
dl: lista
dt: termino
dd: definición
-->
<p>Diccionario de la Real Academia</p>
<dl>
<dt>Brujula</dt>
<dd>Señórula montada en una escóbula</dd>
<dt>Oreja</dt>
<dd>Sesenta minutejos</dd>
</dl>
dl: lista
dt: termino
dd: definición
-->
<p>Diccionario de la Real Academia</p>
<dl>
<dt>Brujula</dt>
<dd>Señórula montada en una escóbula</dd>
<dt>Oreja</dt>
<dd>Sesenta minutejos</dd>
</dl>
listas ordenadas en html
<!--- listas ordenadas
ol li
atributo type: 1,a,i,A (si comienzan por 1,2,3 ; a,b,c,d ; i,ii,iii,iv ; A,B,C,..)
atributo start: 1,2,3 (
valores: circle, disc o square
por defecto tiene el valor 1 y 1.
-->
<br/>Mis aficiones favoritas son:
<ol type="a" start="3" >
<li>Deporte </li>
<li>Cine </li>
<li>.... </li>
</ol>
ol li
atributo type: 1,a,i,A (si comienzan por 1,2,3 ; a,b,c,d ; i,ii,iii,iv ; A,B,C,..)
atributo start: 1,2,3 (
valores: circle, disc o square
por defecto tiene el valor 1 y 1.
-->
<br/>Mis aficiones favoritas son:
<ol type="a" start="3" >
<li>Deporte </li>
<li>Cine </li>
<li>.... </li>
</ol>
listas desordenadas en html
<!--- listas desordenadas
ul li
atributo type: tipo de viñeta
valores: circle, disc o square
por defecto tiene el valor cicle:
-->
<br/>Mis aficiones favoritas son:
<ul type="square">
<li>Deporte </li>
<li>Cine </li>
<li>.... </li>
</ul>
<!--- Se pueden anidar las listas -->
<br/>Mis aficiones favoritas son:
<ul type="square">
<li>Deporte </li>
<ul>
<li>Fútbol</li>
<li>Baloncesto</li>
<li>Balonmano</li>
</ul>
<li>Cine </li>
<li>.... </li>
</ul>
ul li
atributo type: tipo de viñeta
valores: circle, disc o square
por defecto tiene el valor cicle:
-->
<br/>Mis aficiones favoritas son:
<ul type="square">
<li>Deporte </li>
<li>Cine </li>
<li>.... </li>
</ul>
<!--- Se pueden anidar las listas -->
<br/>Mis aficiones favoritas son:
<ul type="square">
<li>Deporte </li>
<ul>
<li>Fútbol</li>
<li>Baloncesto</li>
<li>Balonmano</li>
</ul>
<li>Cine </li>
<li>.... </li>
</ul>
Suscribirse a:
Comentarios (Atom)