viernes, 5 de octubre de 2012

Formularios en html

<!---------------- 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>

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>

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>

Caracteres especiales en html

<!----- Caracteres especiales
&nbsp: Espacio
&ntilde: ñ
&Ntilde: Ñ
&aacute: a
&Aacute: Á
&amp:    &
&lt; <
&gt; >
-->
&lt;html&gt;

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&ntilde;&oacute;rula montada en una esc&oacute;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>

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&uacute;tbol</li>
                       
            <li>Baloncesto</li>           

            <li>Balonmano</li>
        </ul>
    <li>Cine </li>
    <li>.... </li>
</ul>