ManuelRomero en 14:18 15 mar 2016

2016-03-15T14:18:54Z

ManuelRomero: Página creada con «{{Usuario:ManuelRomero/JavaScript/formularios/nav}}
{{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}

2016-03-15T14:15:25Z

Página creada con «{{Usuario:ManuelRomero/JavaScript/formularios/nav}} <br /> {{#widget:Slides}} {{MiTitulo| Curso de JavaScript}} <div class="slides layout-regular template-default"> <div...»

Página nueva
{{Usuario:ManuelRomero/JavaScript/formularios/nav}}
<br />

{{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}
<div class="slides layout-regular template-default">
<div class="slide">

==Formularios==
</div>
<div class="slide">
=== DOM y acceso al formulario ===
Mediante el array forms del document y su array de elementos:
<source lang="javascript">
document.forms[0]; //primer formulario de la página web
document.forms[0].elements[0]; //elemento 0 del formulario
//último elemento:
document.forms[0].elements[document.forms[0].elements.length-1];
</source>
Inconvenientes:
:Sintaxis a veces poco concisa
:Alteración del orden de los formularios en un entorno tan cambiante como la Web.
</div>
<div class="slide">

* Mediante el atributo name de los elementos (mejor opción):
<source lang="html4strict">
var formularioPrincipal = document.formulario;
var primerElemento = document.formulario.elemento;
<form name="formulario">
<input type="text" name="elemento" />
</form>
</source>
* Mediante el atributo id:
<source lang="html4strict">
var formularioPrincipal = document.getElementById("formulario");
var primerElemento = document.getElementById("elemento");
<form name="formulario" id="formulario" >
<input type="text" name="elemento" id="elemento" />
</form>
</source>
</div>
<div class="slide">

===Propiedades y eventos de los formularios===
Propiedades:
:'''type''': Indica el tipo de elemento del que se trata:<br>
:'''text, button, checkbox, select-one, select-multiple, textarea'''<br>
:'''value''': obtiene el texto que se muestra en un botón o en las cajas de texto (text o textarea)...<br>
:'''name''': se obtiene el valor del atributo name.<br>
:'''form''': para referirse al formulario de un elemento:<br>
<source lang="javascript">
document.getElementById("id_del_elemento").form
</source>
</div>
<div class="slide">

Eventos más habituales:
:'''onclick'''
:'''onchange''': al cambiar el valor de un elemento y perder el foco
:'''onfocus''' – '''onblur''': cuando el elemento tiene o pierde el foco.

</div>
<div class="slide">

===Obtención de los datos de un formulario===
====Cuadros de texto====
<source lang="javascript">
<input type="text" id="texto" />
var valor = document.getElementById("texto").value;
<textarea id="parrafo"></textarea>
var valor = document.getElementById("parrafo").value;
</source>
</div>
<div class="slide">
====Radiobutton====
<source lang="javascript">
<input type="radio" value="si" name="pregunta" id="pregunta_si"/> SI
<input type="radio" value="no" name="pregunta" id="pregunta_no"/> NO
<input type="radio" value="nsnc" name="pregunta" id="pregunta_nsnc"/> NS/NC
var elementos = document.getElementsByName("pregunta");
for(var i=0; i<elementos.length; i++) {
alert(" Elemento: " + elementos[i].value + "\n Seleccionado: " +
elementos[i].checked);
}
</source>
</div>
<div class="slide">

====checkbox====
<source lang="javascript">
<input type="checkbox" value="condiciones" name="condiciones" id="condiciones"/>
He leido y acepto las condiciones
<input type="checkbox" value="privacidad" name="privacidad" id="privacidad"/>
He leido la política de privacidad
.....
var elemento = document.getElementById("condiciones");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " +
elemento.checked);
elemento = document.getElementById("privacidad");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " +
elemento.checked);
</source>
</div>
<div class="slide">

====Listas select====
<source lang="javascript">
<select id="opciones" name="opciones">
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
<option value="4">Cuarto valor</option>
</select>

// Obtener la referencia a la lista
var lista = document.getElementById("opciones");

// Obtener el índice de la opción que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el índice y el array "options", obtener la opción seleccionada
var opcionSeleccionada = lista.options[indiceSeleccionado];
//se podría añadir aquí el .text o .value!!!

// Obtener el valor y el texto de la opción seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;

alert("Opción seleccionada: " + textoSeleccionado + "\n Valor de la opción: "
+ valorSeleccionado);

</source>
</div>
<div class="slide">

===Otras operaciones===
====Asignar el foco en el formulario====
Comprobamos que haya formularios y asignamos el foco al primer elemento que no sea de tipo hidden.
<source lang="javascript">
if(document.forms.length > 0) {
for(var i=0; i < document.forms[0].elements.length; i++) {
var campo = document.forms[0].elements[i];
if(campo.type != "hidden") {
campo.focus();
break;
}
}
}
</source>
</div>
<div class="slide">
====Evitar envío duplicado del formulario:====
Mediante un botón de tipo <input type="button" />, ya que el código JavaScript mostrado no funciona correctamente con un botón de tipo <input type="submit" />
<source lang="javascript">
<form id="formulario" action="#">
....
<input type="button" value="Enviar" onclick="this.disabled=true;
this.value=’Enviando...’; this.form.submit()" />
</form>
</source>
</div>
<div class="slide">

====Limitar el número de caracteres de un textarea ====
En algunos eventos (como onkeypress, onclick y onsubmit) se puede evitar su comportamiento normal si se devuelve el valor false.
textarea no tiene la propiedad maxlength
<source lang="javascript">
function limita(maximoCaracteres) {
var elemento = document.getElementById("texto");
if(elemento.value.length >= maximoCaracteres ) {
return false;
}
else {
return true;
}
}
<textarea id="texto" onkeypress="return limita(100);"></textarea>
</source>
</div>
<div class="slide">
====Validar que los elementos de un checkbox estén seleccionados ====
<source lang="javascript">
formulario = document.getElementById("formulario");
for(var i=0; i<formulario.elements.length; i++) {
var elemento = formulario.elements[i];
if(elemento.type == "checkbox") {
if(!elemento.checked) {
return false;
}
}
}
</source>
</div>

<div class="slide">
====Comprobar que se haya seleccionado al menos una opción en un radiobutton ====
<source lang="javascript">
opciones = document.getElementsByName("opciones");

var seleccionado = false;
for(var i=0; i<opciones.length; i++) {
if(opciones[i].checked) {
seleccionado = true;
break;
}
}

if(!seleccionado) {
return false;
}
</source>
</div>
</div>

@@ Línea 1: / Línea 1: @@
 {{Usuario:ManuelRomero/JavaScript/formularios/nav}}
 <br />
 {{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}