MARCAS DE FORMATO

NCD Guía de Diseño en HTML v6.0

+ Estructura Básica

Formato Básico
      <form action="url" method=*>
       ...
      <input type=submit> <input type=reset>
      </form>

url=Dirección url del script CGI
*=GET, POST

Entrada Básica
      <input type=* name=**>

*=text, password, checkbox, radio, image, hidden, submit, reset
**=Nombre Simbólico del script CGI


+ Texto y Contraseña

<input type=*>
<input type=* value=**>
*=text, password 

<form action=/cgi-bin/post-query method=POST>
Su nombre: 
<input type=text name=nombre><br>
Su página web: 
<input type=text name=pagina value=http://><br>
Contraseña: 
<input type=password name=contrasena><br>
<input type=submit><input type=reset>
</form>
Su nombre:
Su página web:
Contraseña:


<input type=* size=**>
<input type=* maxlength=**> 

<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>





+ Caja y Radio

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**> 

<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=f01>
	Banano
<input type=checkbox name=f02 checked>
	Manzana
<input type=checkbox name=f03 value=Naranja>
	Naranja
<br><br>
<input type=submit><input type=reset>
</form>
Banano Manzana Naranja



<input type=radio value=**>
<input type=radio value=** checked> 

<form action=/cgi-bin/post-query method=POST>
<input type=radio name=frutas>
	Banano
<input type=radio name=frutas checked>
	Manzana
<input type=radio name=frutas value=Naranja>
	Naranja
<br><br>
<input type=submit><input type=reset>
</form>
Banano Manzana Orange




+ Coordenadas de Imagen

<input type=image src=url.gif> 

<form action=/cgi-bin/post-query method=POST>
<input type=image name=cara src=f.gif><br><br>
<input type=radio name=aumento value=2 checked>x2
<input type=radio name=aumento value=4>x4
<input type=radio name=aumento value=6>x6<br><br>
<input type=reset>
</form>


x2 x4 x6




+ Elementos Ocultos

<input type=hidden value=*> 

<form action=/cgi-bin/post-query method=POST>
<input type=hidden name=sumar value=usuario@aqui.com.co>
Aquí hay un elemento oculto. <br><br>
<input type=submit><input type=reset>
</form>
Aquí hay un elemento oculto.



+ Selección de Archivo

<input type=file> 

<form action="url del script" enctype="multipart/form-data" method=POST>
<input type=file name=upload> <BR><BR>
</form>



+ Botón

<input type=button value=#> 

<form>
<input type=button value="Abrir una Ventana!"
 onClick="window.open('samp/050window.htm')">
</form>


+ Menú de Selección

Menú de Selección - Construcción Básica
      <select name=*>
      <option> ...
      </select>


<option selected>
<option value=**> 

<form action=/cgi-bin/post-query method=POST>
<select name=frutas>
	<option>Banano
	<option selected>Manzana
	<option value=Mi_Favorita>Naranja
</select><br><br>
<input type=submit><input type=reset>
</form>




<select size=**> 

<form action=/cgi-bin/post-query method=POST>
<select name=frutas size=3>
	<option>Banano
	<option selected>Manzana
	<option value=Mi_Favorita>Naranja
	<option>Durazno
</select><br><br>
<input type=submit><input type=reset>
</form>




<select size=** multiple> 

<form action=/cgi-bin/post-query method=POST>
<select name=frutas size=3 multiple>
	<option selected>Banano
	<option selected>Manzana
	<option value=Mi_Favorita>Naranja
	<option selected>Durazno
</select><br><br>
<input type=submit><input type=reset>
</form>





+ Area de Texto

<textarea name=* rows=** cols=**> ... </textarea> 

<form action=/cgi-bin/post-query method=POST>
<textarea name=comentario rows=5 cols=30>
</textarea>
<br><br>
<input type=submit><input type=reset>
</form>




Corte de Palabras

<textarea wrap=off> ... </textarea>

Es lo mismo que el valor normal.


<textarea wrap=soft> ... </textarea> 

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comentario rows=5 cols=25> </textarea><br><br>
<input type=submit><input type=reset>
</form>




<textarea wrap=hard> ... </textarea> 

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comentario rows=5 cols=25> </textarea><br><br>
<input type=submit><input type=reset>
</form>





+ Estilo Antiguo de Entrada

<isindex prompt=*> 

<isindex prompt="Ingrese la palabra clave de la Búsqueda: ">
Este es un elemento desaprobado y debería ser reemplazado por INPUT.



+ Estilo de Botón

<button type=*> ... </button>
*=submit, reset 

<form action=/cgi-bin/post-query method=POST>
Su Nombre: <input type=text name=nombre><BR><BR>
<button type="submit"><IMG SRC="f.gif"><BR>SUBMIT</button>
<button type="reset"><IMG SRC="f.gif"><BR>RESET</button>
</form>
Su Nombre:



+ Estilo de Campo

<fieldset align=#> ... </fieldset>
*=left, center, right

<legend align=#> ... </legend>
*=top, bottom, left, center, right 

<form action=/cgi-bin/post-query method=POST>
<fieldset>
   <legend>Datos Personales</legend>
        Su Nombre: <input type=text name=nombre><br>
        E-Mail: <input type=text name=e-mail>
</fieldset>
<fieldset>
   <legend align=center>Información de Pago</legend>
        Tarjeta de Crédito:<input type=radio name=card>VISA
                    <input type=radio name=card>MASTER<br>
        Expira en: <input type=text name=exp>
</fieldset>   <br>
   <input type=submit><input type=reset>
</form>
Datos Personales Su Nombre:
E-Mail:
Información de Pago Tarjeta de Crédito: VISA MASTER
Expira en:



+ Título

<label for=#>
<input id=#> 

<label for="datos_entrada">
   Por favor deme su e-mail!
</label>
<form action=/cgi-bin/post-query method=POST>
   <input type=text name=e-mail id="datos_entrada">
   <input type=submit><input type=reset>
</form>
<-- Haga click en este texto para alcanzar el cajón rápidamente.


+ Navegación Tabulada

<input tabindex="#">    #=número 

<form action=/cgi-bin/post-query method=POST>
   Nombre: <input type=text tabindex="1"><br>
   Apellido:  <input type=text tabindex="3"><br>
   Comentario:    <input type=text tabindex="2"><br>
<input type=submit tabindex="4"><input type=reset>
</form>
Nombre:
Apellido:
Comentario:


+ Control Deshabilitado

<input disabled="#">
#=true, false 

<form action=/cgi-bin/post-query method=POST>
Nombre: <input type=text><br>
Apellido:  <input type=text disabled="true"><br>
</form>
Nombre:
Apellido:


Guía de Diseño en HTML | Guía de Hojas de Estilo
Documento | Página | Fuente (Letra) | Texto | Imagen | Formatos | Tabla | Marco | Objetos | XML
LISTA DE MARCAS HTML | Edición PDF

BACK TO NCD HOME
Network Communication Design - http://www.ncdesign.org/
 Copyright & Publishing 1994-2002 Network Communication Design msg@ncdesign.org
Derechos Reservados 1995-2006 por: Carlos J. Naranjo e-mail: <webmaster <ARROBA> orange-tech <PUNTO> net>