Novedades ES6

Control de forms, button y text con javascript

JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de aplicaciones que manejan formularios. En primer lugar, cuando se carga una página web, el navegador crea automáticamente un array llamado forms y que contiene la referencia a todos los formularios de la página.

La validación del formulario HTML se puede realizar mediante JavaScript, con el uso de eventos   

Eventos de HTML mas comunes

A continuación, se muestra una lista de algunos eventos HTML comunes

  onchange El evento se activa cuando se ha cambiado un elemento HTML
  onclick  El evento se activa cuando el usuario hace clic en un elemento HTML
  onmouseover El evento se activa cuando el usuario mueve el mouse sobre un elemento HTML
  onmouseout El evento se activa cuando el usuario aleja el mouse de un elemento HTML
  onkeydown El evento se activa cuando el usuario pulsa una tecla del teclado
  onload El evento se activa cuando el navegador ha terminado de cargar la página.
  onsubmit  El evento onsubmit ocurre cuando se envía un formulario.


<!DOCTYPE html>
<html>
<head>
 <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>
<script>    
function mostrar()
{
  var nom=document.getElementById('nombre').value;
  var ed=document.getElementById('edad').value;
  alert('Ingresó el nombre:' + nom);
  alert('Y la edad:' + ed);
}
</script>

<form>
  Ingrese su nombre:
  <input type="text" id="nombre"><br>
  Ingrese su edad:  <input type="text" id="edad"><br>
  <input type="button" value="Confirmar" onClick="mostrar()">
</form>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<script>

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Debe completar el nombre")
    return false;
  }
}
</script>
</head>
<body>
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post">
  Nombre: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>
</body>
</html>



<!DOCTYPE html>
<html>
<body>
<p>Click el boton para mostrar la fecha.</p>

div><button onclick="displayDate()">La fecha de hoy es?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>

</body>
</html>