El componente <input> de tipo radio tiene las propiedades:
- form: referencia al formulario en el que se encuentra el componente.
- name: nombre del componente (el mismo que el atributo HTML name).
- type: tipo del componente (el mismo que el atributo HTML type).
- value: valor del componente (el mismo que el atributo HTML value).
Vea también: [ Input File en HTML ]
Relacionado: [ Propiedades genéricas del DOM en JavaScript ]
Para acceder desde JavaScript a los cuadros de lista desplegable creados con la etiqueta HTML <select> debemos usar los Objetos Select() (el cuadro de lista en sí) y Option() (contiene la información de cada elemento).
El Objeto Select() dispone de las siguientes propiedades:
- form: referencia al formulario en el que se encuentra el componente.
- length: devuelve el número de elementos en el cuadro de lista.
- multiple: devuelve o establece si se pueden seleccionar varios valores a la vez.
- name: nombre del componente (el mismo que el atributo HTML name).
- selectedIndex: devuelve o establece el índice o posición del elemento seleccionado (comienzan desde cero).
- size: alto del componente (el mismo que el atributo HTML size).
- type: tipo del componente (el mismo que el atributo HTML type).
También podemos usar la Colección options con la que podemos obtener sus elementos, cada uno de los cuales es un Objeto Option(), que veremos algo más adelante.
Asimismo dispone de los métodos:
- add(): inserta un elemento (un Objeto Option()). Como segundo parámetro podemos indicar el índice antes del cual será insertado.
- remove(): borra el elemento que se encuentra en el índice o posición que hemos indicado.
Al crear un Objeto Option() se le pasan como parámetros el texto y el valor que tendrá el nuevo elemento. Tiene las propiedades:
- defaultSelected: valor del elemento seleccionado.
- form: referencia al formulario en el que se encuentra el componente.
- index: devuelve o establece la posición de un elemento.
- selected: usado para devolver si un elemento está seleccionado, o bien para seleccionarlo (hace referencia al atributo HTML del mismo nombre).
- text: devuelve el texto del elemento.
- value: muestra el valor del elemento (el mismo que el atributo HTML value).
A continuación te mostramos un ejemplo:
<html>
<head>
<title>Curso de JavaScript</title>
<script language="JavaScript">
function insertar()
{
var valor = document.getElementById("txt1").value;
var texto = document.getElementById("txt2").value;
if( valor != "" && texto != "" )
{
var objOption = new Option(texto, valor);
document.getElementById("select1").add( objOption );
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="#" >
<select id="select1" name="select1" size="4">
<option value="A">Opción 1</option>
<option value="B">Opción 2</option>
</select><p/>
Valor: <input type="text" id="txt1" name="txt1" value="" size="7" />
Texto: <input type="text" id="txt2" name="txt2" value="" />
<input type="button" id="boton1" name="boton1" onclick="insertar();" value="Insertar elemento" />
</form>
</body>
</html>
Explicación: Al pulsar en el botón se comprobará si se han introducido el valor y el texto del nuevo elemento, y en tal caso se creará un Objeto Option() que insertaremos después en el cuadro de lista.
En este otro ejemplo con el evento onchange detectamos cuándo se ha seleccionado otro elemento en el cuadro de lista desplegable, y mostramos su valor en el cuadro de texto (en caso de que no seleccione ninguno, se borrará su contenido):
<html>
<head>
<title>Curso de JavaScript</title>
<script language="JavaScript">
function cambiar()
{
var seleccionado = document.getElementById("selContinentes").selectedIndex;
if( seleccionado == 0 )
document.getElementById("text1").value = "";
else
document.getElementById("text1").value = document.getElementById("selContinentes").options[ seleccionado ].value;
}
</script>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="#" >
Continentes:
<select id="selContinentes" name="selContinentes" onchange="cambiar();">
<option value="NINGUNO">( NINGUNO )</option>
<option value="AFRICA">África</option>
<option value="AMERICA">América</option>
<option value="ASIA">Asia</option>
<option value="EUROPA">Europa</option>
<option value="OCEANIA" selected>Oceanía</option>
</select>
Seleccionado: <input type="text" value="" id="text1" name="text1" />
</form>
</body>
</html>
Vea también: [ Cuadros de lista en HTML ]
Relacionado: [ Propiedades genéricas del DOM en JavaScript ]
Los componentes de tipo text y password se comportan del mismo, siendo la diferencia entre ellos que el segundo no muestra los caracteres que se escriben en él.
Tienen las siguientes propiedades:
- DefaultValue: devuelve o establece el valor por defecto.
- form: referencia al formulario en el que se encuentra el cuadro de texto.
- maxLength: devuelve o establece el número de caracteres permitidos (hace referencia al atributo HTML maxlength).
- name: nombre del cuadro de texto (el mismo que el atributo HTML name).
- readOnly: muestra o establece si se puede escribir o no en el cuadro de texto (el mismo que el atributo HTML readonly).
- size: devuelve o establece el ancho del cuadro de texto (el mismo que el atributo HTML size).
- type: tipo del cuadro de texto (el mismo que el atributo HTML type).
- value: valor del cuadro de texto (el mismo que el atributo HTML value).
También disponen del método select(), con el que podremos seleccionar el texto del componente.
Vea también: [ Cuadros de texto en HTML ] - [ Input Password en HTML ]
Vea también: [ Propiedades genéricas del DOM en JavaScript
Las propiedades del componente Textarea son:
- cols: devuelve o establece el ancho del componente (hace referencia al atributo HTML cols).
- DefaultValue: devuelve o establece el valor por defecto.
- disabled: devuelve o establece si el componente está activado o desactivado (hace referencia al atributo HTML del mismo nombre).
- form: referencia al formulario en el que se encuentra el componente.
- name: nombre del componente (el mismo que el atributo HTML name).
- readOnly: muestra o establece si se puede escribir o no en el componente (el mismo que el atributo HTML readonly).
- rows: devuelve o establece el alto del componente (hace referencia al atributo HTML rows).
- type: tipo del componente (el mismo que el atributo HTML type).
- value: valor del componente (el mismo que el atributo HTML value).
Con el método select() podemos seleccionar el texto del componente.
Vea también: [ Textarea en HTML ]
Relacionado: [ Propiedades genéricas del DOM en JavaScript ]
