CONTROLES PROPIOS DE HTML
DEFINICIONES
Eventos: es una acción como hacer clic, doble clic, presionar una tecla, mover
el puntero del mouse, etc. Que el usuario debe realizar para que un objeto
ejecute una acción determinada, cada control responde a diferentes eventos,
algunos de ellos tienen características comunes. Los eventos pueden
Visualizarse en la ventana de código.
Métodos: Son procedimientos definidos en Visual Basic para realizar
operaciones especificas sobre los objetos. (Controles o Formularios)
Controles: Son los objetos que conforman la interfaz grafica de un programa; a
través de ellos, un usuario interactúa con la aplicación. Sus características
Pueden cambiarse por medio de la ventana propiedades.
Propiedades: Son los datos que hacen referencia a un objeto o formulario.
Ejemplo: Color de fondo del formulario, Fuente de texto de un TextBox.
CONTROLES
BUTTON
Un control OptionButton muestra una opción que se puede activar o desactivar,
pero con dependencia del estado de otros controles OptionButton que existan
en el formulario.
Generalmente, los controles OptionButton se utilizan en un grupo de opciones
para mostrar opciones de las cuales el usuario sólo puede seleccionar una. Los
controles OptionButton se agrupan dibujándolos dentro de un contenedor como
un control Frame, un control PictureBox o un formulario. Para agrupar controles
OptionButton en un Frame o PictureBox, dibuje en primer lugar el Frame o
PictureBox y, a continuación, dibuje dentro los controles OptionButton. Todos
los controles OptionButton que están dentro del mismo contenedor actúan
como un solo grupo, e independientes de los controles OptionButton de otros
grupos distintos.
Aunque puede parecer que los controles OptionButton y CheckBox funcionan
de forma similar, hay una diferencia importante: Cuando un usuario selecciona
un OptionButton, los otros controles del mismo grupo OptionButton dejan de
estas disponibles automáticamente. Por contraste, se puede seleccionar
cualquier número de controles CheckBox.
Control Botón de Comando (Commandbutton)
Permite que la aplicación inicie, interrumpa o termine un proceso.
Propiedades
Cancel True/False. Establece si el botón se comportará como el botón cancelar
en el formulario y se invocará su evento Click cada vez que se presione la
tecla ESC.
Caption Establece el texto que muestra el botón.
Default True/False. Establece si el botón se comportará como el botón
predeterminado en el formulario.
Font Establece la fuente, estilo y tamaño para el texto del control.
Name Nombre del botón.
Visible True/False. Establece si el botón será visible para el usuario.
Eventos
Click Ocurre cuando se hace clic sobre el botón.
Métodos
SetFocus Mueve el enfoque al botón.
SUBMIT
Propiedad Descripción
action Cadena que contiene el valor del atributo ACTION
del tag FORM
elements Array que contiene una entrada por cada elemento
en el formulario (como campos de texto, listas de
selección, botones,...)
encoding Cadena que contiene el tipo MIME utilizado para
codificar los contenidos del formulario que se envían
al servidor. Refleja el atributo ENCTYPE del tag
FORM
name Cadena que contiene el valor del atributo NAME del
tag FORM
target Cadena que contiene el nombre de la ventana
objetivo del submit (ventana en la que se publican
los resultados)
length Refleja el número de elementos del formulario
method Cadena que contiene el valor del atributo METHOD
del tag FORM
Método Descripción
handleEvent Invoca el manejador del evento especificado
reset Simula la pulsación del botón del ratón sobre un
botón de reset del formulario
submit Envía el formulario
EJEMPLO:
<HTML>
<HEAD><TITLE>Ejemplo de metodo submit()</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function CompruebaValor(Formu) {
if ([Link] == "100")
[Link]()
else
[Link] = ""
} //-->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST onSubmit="alert('¡Respuesta correcta!'); return
false">
¿Cuánto vale 10 * 10?
<INPUT TYPE="text" NAME="respuesta"
onChange="CompruebaValor([Link])">
</FORM>
</BODY>
</HTML>
Evento Descripción
onReset Captura la pulsación del botón reset
onSubmit Captura la pulsación del botón submit
Botones submit y reset
Los botones submit y reset poseen las propiedades name y value,
pudiendo utilizarse con ellos el método click() y el evento onClick().
El botón submit posee un método y un evento específicos: el método
submit() y el evento onSubmit. El método submit() realiza el emisión
del formulario (es equivalente a pulsar el botón submit). El evento
onSubmit se produce cuando se envía el formulario, permitiendo realizar
operaciones con los datos del formulario antes de realizar el envío (por
ejemplo, validación de campos).
Cuadro de selección (checkbox)
Propiedad Descripción
checked Indica el estado actual del cuadro de selección
defaultChecked Indica el estado por defecto del elemento
name Indica el nombre del elemento tal y como está
especificado en el tag INPUT
value Indica el valor el elemento tal y como está
especificado en el tag INPUT
Método Descripción
click() Simula la pulsación del botón del ratón sobre el
cuadro de selección
Evento Descripción
onClick Captura la pulsación del botón del ratón sobre el
cuadro de selección
Botón de selección (radio)
Es similar al cuadro de selección (checkbox) con la diferencia de que
varios elementos de este tipo pueden agruparse con un solo nombre de
modo que sólo uno de ellos podrá estar seleccionado.
Propiedad Descripción
checked Indica el estado actual del botón de selección
defaultChecked Indica el estado por defecto del elemento
name Indica el nombre del elemento tal y como está
especificado en el tag INPUT
value Indica el valor del elemento tal y como está
especificado en el tag INPUT
index Indica el índice del botón de selección actualmente
seleccionado en el grupo
length Indica el número de botones de selección en el
grupo
Método Descripción
click() Simula la pulsación del botón del ratón sobre el
botón de selección
Evento Descripción
onClick Captura la pulsación del botón del ratón sobre el
botón de selección
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo de cuadro de selección (checkbox)</TITLE>
<SCRIPT>
<!--
function Calcula(Formu, Campo) {
if ([Link][1].checked) {
[Link] = [Link]([Link])
} else {
[Link] = [Link] * [Link]
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
<P>Valor:<BR>
<INPUT TYPE="text" NAME="entrada" VALUE=0
onChange="Calcula([Link], [Link]);">
<P>Acción:<BR>
<INPUT TYPE="radio" NAME="BotonAccion" VALUE="cuadrado"> Al
cuadrado<BR>
<INPUT TYPE="radio" NAME="BotonAccion" VALUE="raiz2"> Raíz
cuadrada<BR>
<P>Resultado:<BR>
<INPUT TYPE=text NAME="resultado" VALUE=0>
</FORM>
</BODY>
</HTML>
PASSWORD
Password Control: Ofrece seguridad de acceso a los usuarios de tus
programas con contraseña.
Password Control
Cuadro de texto (text)
Propiedad Descripción
defaultValue Indica el valor por defecto del elemento tal y como
está especificado en el tag INPUT
name Indica el nombre del elemento tal y como está
especificado en el tag INPUT
value Indica el valor actual del elemento
Método Descripción
focus() Da el foco al elemento (convierte el cuadro de texto
en la zona activa actual)
blur() Quita el foco del elemento
select() Selecciona el texto actual del cuadro de texto
Evento Descripción
onChange Captura el cambio de valor del campo de texto
onFocus Captura la recuperación del foco por parte del
cuadro de texto
onBlur Captura la pérdida del foco
onSelect Captura la selección del texto
Área de texto (textarea)
Posee las propiedades defaultValue, name y value, con el mismo
significado que para el cuadro de texto. Los métodos focus(), blur() y
select() pueden utilizarse con este elemento, al igual que los eventos
onFocus, onBlur y onSelect.
Lista de selección (select)
Propiedad Descripción
options Array que contiene una entrada por cada elemento
de la lista de selección
selectedIndex Da el índice de la opción de la lista seleccionada
actualmente
options[n]. Indica el valor del elemento n de la lista, tal y como
value está especificado en el tag OPTION
options[n]. Contiene la cadena de texto que representa la
text opción n de la lista
options[n]. Indica si la opción n está actualmente seleccionada
selected
options[n]. Indica si la opción n es la seleccionada por defecto
defaultSelected
Método Descripción
focus() Da el foco al elemento
blur() Quita el foco del elemento
Evento Descripción
onChange Captura el cambio de selección en la lista
onFocus Captura la recuperación del foco por parte de la lista
de selección
onBlur Captura la pérdida del foco
Como ejemplo, dado el siguiente código HTML:
<SELECT NAME="Ejemplo" onFocus="Ver()">
<OPTION SELECTED VALUE="Opción 1">1
<OPTION VALUE="Opción 2">2
<OPTION VALUE="Opción 3">3
</SELECT>
Las propiedades de la lista de selección se acceden como se muestra,
tomando los valores que aparecen a la derecha:
[Link][1].value = "Opción 2"
[Link][2].text = "3"
[Link] = 0
[Link][0].defaultSelected = true
[Link][1].selected = false
HIDDEN
Aun cuando la propiedad Hidden de un control está establecida en true,
el control seguirá mostrándose si el modo de presentación que tenga la
página en ese momento permite mostrar los controles ocultos. Por
ejemplo, el modo de edición permite mostrar los controles ocultos, de
manera que los usuarios puedan editarlos. Cuando los controles ocultos
son visibles en ciertos modos de presentación, el título del control
muestra una cadena que indica que el control está en estado oculto.
Cuando la propiedad Hidden de un control WebPart se establece en
false, que es el valor predeterminado, el control se muestra en la página.
Observe que si la propiedad AllowHide se establece en false, los
usuarios finales no pueden editar el valor de la propiedad Hidden.
En el ejemplo de código siguiente se muestra el uso de la propiedad
Hidden de un control de elementos Web personalizado. En este ejemplo
se supone el uso de un control personalizado, TextDisplayWebPart, que
se encuentra en la sección Ejemplo de la información general de la clase
WebPart.
Observe que en la página Web, en el marcado declarativo del elemento
<aspSample:TextDisplayWebPart>, el valor del atributo Hidden se
establece en true. El control TextDisplayWebPart no aparecerá si la
página se carga en un explorador. Sin embargo, el control todavía está
presente en la página y en su zona, y aún podría participar en
conexiones con otros controles WebPart si se crearon dichas conexiones
<%@ page language="VB" %>
<%@ register tagprefix="aspSample"
Namespace="[Link]"
Assembly="TextDisplayWebPartVB"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link] >
<head id="Head1" runat="server">
<title>[Link] Example</title>
</head>
<body>
<form id="Form1" runat="server">
<asp: webpartmanager id="WebPartManager1" runat="server" />
<asp:webpartzone
id="WebPartZone1"
runat="server"
title="Zone 1"
PartChromeType="TitleAndBorder">
<parttitlestyle font-bold="true" ForeColor="#3300cc" />
<partstyle
borderwidth="1px"
borderstyle="Solid"
bordercolor="#81AAF2" />
<zonetemplate>
<aspSample:TextDisplayWebPart
runat="server"
id="textwebpart"
title = "Text Content WebPart"
Hidden="true" />
</zonetemplate>
</asp:webpartzone>
</form>
</body>
</html>
OLGA LUCIA VALLEJO
Ingeniería de Sistemas
Programación Avanzada