<html> <body> <form> Primer numero: <input type="text" name="num1" id="num1" /> <br /> Segundo numero: <input type="text" name="num2" id="num2" /> <br /> <p id="resultado">Suma: </p> <button type="button" onclick=' var casilla1=document.getElementById("num1"); var n1 = casilla1.value; var casilla2=document.getElementById("num2"); var n2 = casilla2.value; var resultado=document.getElementById("resultado"); resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2)); resultado.style.color = "blue"; '>Calcular suma</button> </form> </body> </html>
Mostrando entradas con la etiqueta formulario. Mostrar todas las entradas
Mostrando entradas con la etiqueta formulario. Mostrar todas las entradas
sábado, 25 de marzo de 2017
Formulario para sumar 2 numeros
martes, 21 de marzo de 2017
Formulario nos pide datos, mail, dni, correo y nos lo envía al correo electrónico
<!-- 5). Formularios, validación longitud, email, etc. Expresiones regulares. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
function Valida(formulario) {
/* Validación de campos NO VACÍOS */
if ((formulario.campo1.value.length == 0) || (formulario.campo2.value.length ==0) || (formulario.cpostal.value.length ==0) || (formulario.dni.value.length ==0) || (formulario.email.value.length ==0)) {
alert('falta información en el campo1');
return false;
}
if (isNaN(parseInt(formulario.campo2.value))) {
alert('el campo2 debe ser un número');
return false;
}
/* validación del CÓDIGO POSTAL*/
var ercp=/(^([0-9]{5,5})|^)$/;
if (!(ercp.test(formulario.cpostal.value))) {
alert('El contenido del código postal no es un CÓDIGO POSTAL');
return false;
}
/* validación del DNI */
var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
if (!(erdni.test(formulario.dni.value))) {
alert('Contenido del dni no es un DNI válido.');
return false;
}
/* validación del e-mail */
var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;
if (!(ercorreo.test(formulario.email.value))) {
alert('Contenido del email no es CORREO ELECTRÓNICO válido.');
return false;
}
/* si no hemos detectado fallo devolvemos TRUE */
return true;
}
</script>
</head>
<body>
<form name="miFormulario" onsubmit="return Valida(this);" action="mailto:mi@mail.com" >
Campo1 <input type="text" name="campo1"><br>
Campo2 <input type="text" name="campo2"><br>
cpostal <input type="text" name="cpostal"><br>
dni <input type="text" name="dni"><br>
email <input type="text" name="email"><br>
<input type="submit" value="Enviar" name="enviar">
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
function Valida(formulario) {
/* Validación de campos NO VACÍOS */
if ((formulario.campo1.value.length == 0) || (formulario.campo2.value.length ==0) || (formulario.cpostal.value.length ==0) || (formulario.dni.value.length ==0) || (formulario.email.value.length ==0)) {
alert('falta información en el campo1');
return false;
}
if (isNaN(parseInt(formulario.campo2.value))) {
alert('el campo2 debe ser un número');
return false;
}
/* validación del CÓDIGO POSTAL*/
var ercp=/(^([0-9]{5,5})|^)$/;
if (!(ercp.test(formulario.cpostal.value))) {
alert('El contenido del código postal no es un CÓDIGO POSTAL');
return false;
}
/* validación del DNI */
var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
if (!(erdni.test(formulario.dni.value))) {
alert('Contenido del dni no es un DNI válido.');
return false;
}
/* validación del e-mail */
var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;
if (!(ercorreo.test(formulario.email.value))) {
alert('Contenido del email no es CORREO ELECTRÓNICO válido.');
return false;
}
/* si no hemos detectado fallo devolvemos TRUE */
return true;
}
</script>
</head>
<body>
<form name="miFormulario" onsubmit="return Valida(this);" action="mailto:mi@mail.com" >
Campo1 <input type="text" name="campo1"><br>
Campo2 <input type="text" name="campo2"><br>
cpostal <input type="text" name="cpostal"><br>
dni <input type="text" name="dni"><br>
email <input type="text" name="email"><br>
<input type="submit" value="Enviar" name="enviar">
</form>
</body>
</html>
Formulario que pide datos y tiene botones de enviar, borrar y restablecer
<!DOCTYPE>
<html lang='es'>
<head>
<title>Formulario</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
</script>
</head>
<body>
<form action="" method="get">
D.N.I............:<input type="text" name="dni"/></br>
Nombre...........:<input type="text" name="apellido"/></br>
Dirección........:<input type="text" name="dirección"/></br>
Población........:<input type="text" name="pobalción"/></br>
Provincia........:<input type="text" name="provincia"/></br>
Código Postal....:<input type="text" name="codigo_postal"/></br>
<input type="reset" value="Restablecer"/>
<input type="submit" value="Enviar"/>
<input type="button" value="Cancelar"/>
</form>
</body>
</html>
<html lang='es'>
<head>
<title>Formulario</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
</script>
</head>
<body>
<form action="" method="get">
D.N.I............:<input type="text" name="dni"/></br>
Nombre...........:<input type="text" name="apellido"/></br>
Dirección........:<input type="text" name="dirección"/></br>
Población........:<input type="text" name="pobalción"/></br>
Provincia........:<input type="text" name="provincia"/></br>
Código Postal....:<input type="text" name="codigo_postal"/></br>
<input type="reset" value="Restablecer"/>
<input type="submit" value="Enviar"/>
<input type="button" value="Cancelar"/>
</form>
</body>
</html>
Formulario que nos pide tre nombres y comprueba que no haya campos vacios antes de enviar el formulario
<!-- ). Formularios, validación longitud, email, etc. Expresiones regulares. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
function Valida(miForm) {
/* Validación de campos NO VACÍOS */
if ((miForm.Jugador1.value.length == 0) ||
(miForm.Jugador2.value.length ==0) ||
(miForm.Jugador3.value.length ==0)){
alert('falta información en los campos');
return false;
}
return true;
}
</script>
</head>
<body>
<form name="miForm" method="get" onsubmit="return Valida(this)" action="mailto:mi@mail.com" >
<p>
Jugador1 <input type="text" name="Jugador1"><br>
Jugador2 <input type="text" name="Jugador2"><br>
Jugador3 <input type="text" name="Jugador3"><br>
<input type="submit" value="Enviar" name="enviar"/>
</p>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
function Valida(miForm) {
/* Validación de campos NO VACÍOS */
if ((miForm.Jugador1.value.length == 0) ||
(miForm.Jugador2.value.length ==0) ||
(miForm.Jugador3.value.length ==0)){
alert('falta información en los campos');
return false;
}
return true;
}
</script>
</head>
<body>
<form name="miForm" method="get" onsubmit="return Valida(this)" action="mailto:mi@mail.com" >
<p>
Jugador1 <input type="text" name="Jugador1"><br>
Jugador2 <input type="text" name="Jugador2"><br>
Jugador3 <input type="text" name="Jugador3"><br>
<input type="submit" value="Enviar" name="enviar"/>
</p>
</form>
</body>
</html>
Formulario con menú desplegable, menú ckeckbok y menú radio
<!-- 5.1-1. Crear un formulario que validen todos los campos. Ninguno puede quedar
en blanco y todos deben ajustarse al tipo de dato que contienen. Informa al usuario
de los posibles errores en cuanto salga de un campo para entrar en otro y también
cuando pulse el botón Validar. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida(f) {
var ok = true;
var msg = "Debes escribir algo en los campos:\n";
if(f.txtNombre.value == ""){
msg += "- Nombre\n";
ok = false;
}
if(f.txtPApellido.value == ""){
msg += "- Primer Apellido\n";
ok = false;
}
if(f.txtMail.value == ""){
msg += "- E-Mail\n";
ok = false;
}
if(f.txtDireccion.value == ""){
msg += "- Dirección\n";
ok = false;
}
if(f.txtPoblacion.value == ""){
msg += "- Población\n";
ok = false;
}
/*
if(f.txtProvincia.value == ""){
msg += "- Provincia\n";
ok = false;
}*/
indice = f.txtProvincia.selectedIndex; //indice = document.getElementById("txtProvincia").selectedIndex;
if( indice == null || indice == 0 ) {
msg += "- Provincia\n";
ok = false;
}
//Checkbox
var marcados=0;
if(document.getElementById('CbTodos').checked){
marcados++;
}
if(document.getElementById('UpSemana').checked){
marcados++;
}
if(document.getElementById('UpMes').checked){
marcados++;
}
if(document.getElementById('UpAnio').checked){
marcados++;
}
if( marcados==0) {
msg += "- Checkbox\n";
ok = false;
}
//Radio Button para control de estado civil
opciones=document.getElementsByName("RbECivil");
var rmarcado=false;
for(var i=0; i<opciones.length;i++){
if(opciones[i].checked){
rmarcado=true;
//break;
}
}
if(!rmarcado){
msg += "- RadioButton\n";
ok = false;
//return false;
}
//Salida
if(ok == false)
alert(msg);
return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post" onsubmit="return valida(this)">
<TABLE border="0">
<tr>
<td><label for="txtNombre">Nombre(*):</label></td>
<td><input type="text" name="txtNombre" id="txtNombre" size="20"/></td>
</tr>
<tr>
<td><label for="txtPApellidos">Primer Apellido(*):</label></td>
<td><input type="text" name="txtPApellido" id="txtPApellido" size="20"/></td>
</tr>
<tr>
<td><label for="txtMail">E-Mail(*):</label></td>
<td><input type="text" name="txtMail" id="txtMail"/></td>
</tr>
<tr>
<td><label for="txtDireccion">Dirección(*):</label></td>
<td><input type="text" name="txtDireccion" id="txtDireccion" size="20"/></td>
</tr>
<tr>
<td><label for="txtPoblacion">Población(*):</label></td>
<td><input type="text" name="txtPoblacion" id="txtPoblacion" size="20"/></td>
</tr>
<tr>
<td><label for="txtProvincia">Provincia(*):</label></td>
<td><select name="txtProvincia" id="txtProvincia"/>
<option value="">- Seleccione una provincia -</option>
<option value="1">Álava</option>
<option value="2">Albacete</option>
<option value="3">Alicante</option>
<option value="4">Almeria</option>
<option value="5">Asturias</option>
<option value="6">Ávila</option>
<option value="7">Badajoz</option>
<option value="8">Barcelona</option>
<option value="9">Burgos</option>
<option value="10">Cáceres</option>
<option value="11">Cádiz</option>
<option value="12">Cantabria</option>
<option value="13">Castellón</option>
<option value="14">Ciudad Real</option>
<option value="15">Córdoba</option>
<option value="16">Cuenca</option>
<option value="17">Gerona</option>
<option value="18">Granada</option>
<option value="19">Guadalajara</option>
<option value="20">Guipúzcoa</option>
<option value="21">Huelva</option>
<option value="22">Huesca</option>
<option value="23">Islas Baleares</option>
<option value="24">Jaén</option>
<option value="25">La Coruña</option>
<option value="26">La Rioja</option>
<option value="27">Las Palmas</option>
<option value="28">León</option>
<option value="29">Lérida</option>
<option value="30">Lugo</option>
<option value="31">Madrid</option>
<option value="32">Málaga</option>
<option value="33">Murcia</option>
<option value="34">Navarra</option>
<option value="35">Orense</option>
<option value="36">Palencia</option>
<option value="37">Pontevedra</option>
<option value="38">Salamanca</option>
<option value="39">Segovia</option>
<option value="40">Sevilla</option>
<option value="41">Soria</option>
<option value="42">Tarragona</option>
<option value="37">Santa Cruz de Tenerife</option>
<option value="37">Teruel</option>
<option value="37">Toledo</option>
<option value="37">Valencia</option>
<option value="37">Valladoliz</option>
<option value="37">Vizcaya</option>
<option value="37">Zamora</option>
<option value="37">Zaragoza</option>
</select>
</td>
</tr>
<tr>
<td rowspan="2"><label for="RbECivil">Estado Civil(*):</label></td>
<td>
<input type="radio" name="RbECivil" id="Solteroa" value="Soltero/a"/>
<label for="Soltero">Soltero/a</label>
</td>
</tr>
<tr>
<td><input type="radio" name="RbECivil" id="casado" value="Casado/a"/>
<label for="Casado">Casado/a</label></td>
</tr>
<tr>
<td rowspan="4"><label for="NConexion">Cada cuanto te conectas?(*):</label></td>
<td>
<input type="checkbox" name="CbTodos" id="CbTodos"/>
<label for="CbTodos">Todos los dias</label>
</td>
</tr>
<tr>
<td><input type="checkbox" name="UpSemana" id="UpSemana"/>
<label for="UpSemana">Un par de veces por semana</label></td>
</tr>
<tr>
<td><input type="checkbox" name="UpMes" id="UpMes"/>
<label for="UpMes">Un par de veces por mes</label></td>
</tr>
<tr>
<td><input type="checkbox" name="UpAnio" id="UpAnio"/>
<label for="UpAnio">Un par de veces por año</label></td>
</tr>
</TABLE>
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar >>"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>
en blanco y todos deben ajustarse al tipo de dato que contienen. Informa al usuario
de los posibles errores en cuanto salga de un campo para entrar en otro y también
cuando pulse el botón Validar. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida(f) {
var ok = true;
var msg = "Debes escribir algo en los campos:\n";
if(f.txtNombre.value == ""){
msg += "- Nombre\n";
ok = false;
}
if(f.txtPApellido.value == ""){
msg += "- Primer Apellido\n";
ok = false;
}
if(f.txtMail.value == ""){
msg += "- E-Mail\n";
ok = false;
}
if(f.txtDireccion.value == ""){
msg += "- Dirección\n";
ok = false;
}
if(f.txtPoblacion.value == ""){
msg += "- Población\n";
ok = false;
}
/*
if(f.txtProvincia.value == ""){
msg += "- Provincia\n";
ok = false;
}*/
indice = f.txtProvincia.selectedIndex; //indice = document.getElementById("txtProvincia").selectedIndex;
if( indice == null || indice == 0 ) {
msg += "- Provincia\n";
ok = false;
}
//Checkbox
var marcados=0;
if(document.getElementById('CbTodos').checked){
marcados++;
}
if(document.getElementById('UpSemana').checked){
marcados++;
}
if(document.getElementById('UpMes').checked){
marcados++;
}
if(document.getElementById('UpAnio').checked){
marcados++;
}
if( marcados==0) {
msg += "- Checkbox\n";
ok = false;
}
//Radio Button para control de estado civil
opciones=document.getElementsByName("RbECivil");
var rmarcado=false;
for(var i=0; i<opciones.length;i++){
if(opciones[i].checked){
rmarcado=true;
//break;
}
}
if(!rmarcado){
msg += "- RadioButton\n";
ok = false;
//return false;
}
//Salida
if(ok == false)
alert(msg);
return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post" onsubmit="return valida(this)">
<TABLE border="0">
<tr>
<td><label for="txtNombre">Nombre(*):</label></td>
<td><input type="text" name="txtNombre" id="txtNombre" size="20"/></td>
</tr>
<tr>
<td><label for="txtPApellidos">Primer Apellido(*):</label></td>
<td><input type="text" name="txtPApellido" id="txtPApellido" size="20"/></td>
</tr>
<tr>
<td><label for="txtMail">E-Mail(*):</label></td>
<td><input type="text" name="txtMail" id="txtMail"/></td>
</tr>
<tr>
<td><label for="txtDireccion">Dirección(*):</label></td>
<td><input type="text" name="txtDireccion" id="txtDireccion" size="20"/></td>
</tr>
<tr>
<td><label for="txtPoblacion">Población(*):</label></td>
<td><input type="text" name="txtPoblacion" id="txtPoblacion" size="20"/></td>
</tr>
<tr>
<td><label for="txtProvincia">Provincia(*):</label></td>
<td><select name="txtProvincia" id="txtProvincia"/>
<option value="">- Seleccione una provincia -</option>
<option value="1">Álava</option>
<option value="2">Albacete</option>
<option value="3">Alicante</option>
<option value="4">Almeria</option>
<option value="5">Asturias</option>
<option value="6">Ávila</option>
<option value="7">Badajoz</option>
<option value="8">Barcelona</option>
<option value="9">Burgos</option>
<option value="10">Cáceres</option>
<option value="11">Cádiz</option>
<option value="12">Cantabria</option>
<option value="13">Castellón</option>
<option value="14">Ciudad Real</option>
<option value="15">Córdoba</option>
<option value="16">Cuenca</option>
<option value="17">Gerona</option>
<option value="18">Granada</option>
<option value="19">Guadalajara</option>
<option value="20">Guipúzcoa</option>
<option value="21">Huelva</option>
<option value="22">Huesca</option>
<option value="23">Islas Baleares</option>
<option value="24">Jaén</option>
<option value="25">La Coruña</option>
<option value="26">La Rioja</option>
<option value="27">Las Palmas</option>
<option value="28">León</option>
<option value="29">Lérida</option>
<option value="30">Lugo</option>
<option value="31">Madrid</option>
<option value="32">Málaga</option>
<option value="33">Murcia</option>
<option value="34">Navarra</option>
<option value="35">Orense</option>
<option value="36">Palencia</option>
<option value="37">Pontevedra</option>
<option value="38">Salamanca</option>
<option value="39">Segovia</option>
<option value="40">Sevilla</option>
<option value="41">Soria</option>
<option value="42">Tarragona</option>
<option value="37">Santa Cruz de Tenerife</option>
<option value="37">Teruel</option>
<option value="37">Toledo</option>
<option value="37">Valencia</option>
<option value="37">Valladoliz</option>
<option value="37">Vizcaya</option>
<option value="37">Zamora</option>
<option value="37">Zaragoza</option>
</select>
</td>
</tr>
<tr>
<td rowspan="2"><label for="RbECivil">Estado Civil(*):</label></td>
<td>
<input type="radio" name="RbECivil" id="Solteroa" value="Soltero/a"/>
<label for="Soltero">Soltero/a</label>
</td>
</tr>
<tr>
<td><input type="radio" name="RbECivil" id="casado" value="Casado/a"/>
<label for="Casado">Casado/a</label></td>
</tr>
<tr>
<td rowspan="4"><label for="NConexion">Cada cuanto te conectas?(*):</label></td>
<td>
<input type="checkbox" name="CbTodos" id="CbTodos"/>
<label for="CbTodos">Todos los dias</label>
</td>
</tr>
<tr>
<td><input type="checkbox" name="UpSemana" id="UpSemana"/>
<label for="UpSemana">Un par de veces por semana</label></td>
</tr>
<tr>
<td><input type="checkbox" name="UpMes" id="UpMes"/>
<label for="UpMes">Un par de veces por mes</label></td>
</tr>
<tr>
<td><input type="checkbox" name="UpAnio" id="UpAnio"/>
<label for="UpAnio">Un par de veces por año</label></td>
</tr>
</TABLE>
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar >>"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>
Formulario que nos pide DNI, nombre, dirección, código postal y lo envía por correo
<!-- 5). Formularios, validación longitud, email, etc. Expresiones regulares. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
function Valida(formulario) {
/* Validación de campos NO VACÍOS */
if ((formulario.campo1.value.length == 0) ||
(formulario.campo2.value.length ==0) ||
(formulario.cpostal.value.length ==0) ||
(formulario.dni.value.length ==0) ||
(formulario.email.value.length ==0)) {
alert('falta información en los campos');
return false;
}
if (isNaN(parseInt(formulario.campo2.value))) {
alert('el campo2 debe ser un número');
return false;
}
/* validación del CÓDIGO POSTAL*/
var ercp=/(^([0-9]{5,5})|^)$/;
if (!(ercp.test(formulario.cpostal.value))) {
alert('El contenido del código postal no es un CÓDIGO POSTAL');
return false;
}
/* validación del DNI */
var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
if (!(erdni.test(formulario.dni.value))) {
alert('Introduzca un DNI válido con este formato 00000000-Z');
return false;
}
/* validación del e-mail */
var ercorreo=/\w+@\w+.\w+/;
if (!(ercorreo.test(formulario.email.value))) {
alert('Contenido del email no es CORREO ELECTRÓNICO válido.');
return false;
}
/* si no hemos detectado fallo devolvemos TRUE */
return true;
}
</script>
</head>
<body>
<form name="miFormulario" onsubmit="return Valida(this);" action="mailto:mi@mail.com" >
Campo1 <input type="text" name="campo1"><br>
Campo2 <input type="text" name="campo2"><br>
cpostal <input type="text" name="cpostal"><br>
dni <input type="text" name="dni"><br>
email <input type="text" name="email"><br>
<input type="submit" value="Enviar" name="enviar">
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
function Valida(formulario) {
/* Validación de campos NO VACÍOS */
if ((formulario.campo1.value.length == 0) ||
(formulario.campo2.value.length ==0) ||
(formulario.cpostal.value.length ==0) ||
(formulario.dni.value.length ==0) ||
(formulario.email.value.length ==0)) {
alert('falta información en los campos');
return false;
}
if (isNaN(parseInt(formulario.campo2.value))) {
alert('el campo2 debe ser un número');
return false;
}
/* validación del CÓDIGO POSTAL*/
var ercp=/(^([0-9]{5,5})|^)$/;
if (!(ercp.test(formulario.cpostal.value))) {
alert('El contenido del código postal no es un CÓDIGO POSTAL');
return false;
}
/* validación del DNI */
var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
if (!(erdni.test(formulario.dni.value))) {
alert('Introduzca un DNI válido con este formato 00000000-Z');
return false;
}
/* validación del e-mail */
var ercorreo=/\w+@\w+.\w+/;
if (!(ercorreo.test(formulario.email.value))) {
alert('Contenido del email no es CORREO ELECTRÓNICO válido.');
return false;
}
/* si no hemos detectado fallo devolvemos TRUE */
return true;
}
</script>
</head>
<body>
<form name="miFormulario" onsubmit="return Valida(this);" action="mailto:mi@mail.com" >
Campo1 <input type="text" name="campo1"><br>
Campo2 <input type="text" name="campo2"><br>
cpostal <input type="text" name="cpostal"><br>
dni <input type="text" name="dni"><br>
email <input type="text" name="email"><br>
<input type="submit" value="Enviar" name="enviar">
</form>
</body>
</html>
Formulario que nos pide nombre, dirección y telefono y nos lo envia por correo electronico
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida(f) {
var ok = true;
var msg = "Debes escribir algo en los campos:\n";//\n es retorno de linia
if(f.txtNombre.value == ""){
msg += "- Nombre\n";
ok = false;
}
if(f.txtDireccion.value == ""){
msg += "- Dirección\n";
ok = false;
}
var patron=/^[0-9]{9}$/;
if(f.txtTelefono.value == "" || (!patron.test(f.txtTelefono.value))){
msg += "- Teléfono\n";
ok = false;
}
//Salida
if(ok == false)
alert(msg);
return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post" onsubmit="return valida(this)">
<table border="0">
<tr>
<td><label for="txtNombre">Nombre(*):</label></td>
<td><input type="text" name="txtNombre" id="txtNombre" size="20"/></td>
</tr>
<tr>
<td><label for="txtDireccion">Dirección(*):</label></td>
<td><input type="text" name="txtDireccion" id="txtDireccion" size="20"/></td>
</tr>
<tr>
<td><label for="txtTelefono">Teléfono(*):</label></td>
<td><input type="text" name="txtTelefono" id="txtTelefono" /></td>
</tr>
</table>
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar >>"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida(f) {
var ok = true;
var msg = "Debes escribir algo en los campos:\n";//\n es retorno de linia
if(f.txtNombre.value == ""){
msg += "- Nombre\n";
ok = false;
}
if(f.txtDireccion.value == ""){
msg += "- Dirección\n";
ok = false;
}
var patron=/^[0-9]{9}$/;
if(f.txtTelefono.value == "" || (!patron.test(f.txtTelefono.value))){
msg += "- Teléfono\n";
ok = false;
}
//Salida
if(ok == false)
alert(msg);
return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post" onsubmit="return valida(this)">
<table border="0">
<tr>
<td><label for="txtNombre">Nombre(*):</label></td>
<td><input type="text" name="txtNombre" id="txtNombre" size="20"/></td>
</tr>
<tr>
<td><label for="txtDireccion">Dirección(*):</label></td>
<td><input type="text" name="txtDireccion" id="txtDireccion" size="20"/></td>
</tr>
<tr>
<td><label for="txtTelefono">Teléfono(*):</label></td>
<td><input type="text" name="txtTelefono" id="txtTelefono" /></td>
</tr>
</table>
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar >>"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>
Formularioq ue nos dice si la matricula es correcta o no
<!-- 2). Escribe un código que comprueba si el usuario ha escrito correctamente una matrícula
de automóvil que debe seguir el patrón código del país (1 o 2 letras), un espacio en blanco,
numeración (4 dígitos), un espacio en blanco y letras (3 letras, empezando en BBB y acabando
en ZZZ, sin las vocales).-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validación con expresión regular</title>
<script type="text/javascript">
function validar() {
var m = document.getElementById("matricula").value;
//var expreg = /^[A-Z]{1,2}\s\d{4}\s([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]){3}$/;//COMUNIDAD
//var expreg = /^[0-9]{4}\s[A-Z]{3}$/;EUROPEA
var expreg = /^\d{4}\s[A-Z]{3}$/;
if(expreg.test(m))
alert("La matrícula es correcta");
else
alert("La matrícula NO es correcta");
}
</script>
</head>
<body>
<form id="miForm" action="#" method="post">
<p>
Matrícula: <input type="text" id="matricula" /><br />
<input type="button" value="Validar" onclick="validar()" />
</p>
</form>
</body>
</html>
de automóvil que debe seguir el patrón código del país (1 o 2 letras), un espacio en blanco,
numeración (4 dígitos), un espacio en blanco y letras (3 letras, empezando en BBB y acabando
en ZZZ, sin las vocales).-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Validación con expresión regular</title>
<script type="text/javascript">
function validar() {
var m = document.getElementById("matricula").value;
//var expreg = /^[A-Z]{1,2}\s\d{4}\s([B-D]|[F-H]|[J-N]|[P-T]|[V-Z]){3}$/;//COMUNIDAD
//var expreg = /^[0-9]{4}\s[A-Z]{3}$/;EUROPEA
var expreg = /^\d{4}\s[A-Z]{3}$/;
if(expreg.test(m))
alert("La matrícula es correcta");
else
alert("La matrícula NO es correcta");
}
</script>
</head>
<body>
<form id="miForm" action="#" method="post">
<p>
Matrícula: <input type="text" id="matricula" /><br />
<input type="button" value="Validar" onclick="validar()" />
</p>
</form>
</body>
</html>
Formulario en el que introducimosnombre producto, precio, nos suma el iva y nos da el precio final
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida() {
var ok = true;
var msg = "Debes escribir algo en los campos:\n";//\n es retorno de linia
var f=document.form1;
if(f.txtNombre.value == ""){
msg += "- Nombre producto\n";
ok = false;
}
if((f.txtPrecio.value == "")||isNaN(f.txtPrecio.value)){
msg += "- Precio\n";
ok = false;
}
else{
f.txtfinal.value=(f.txtPrecio.value)*1.16;
}
//Salida
if(ok == false)
alert(msg);
//return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post">
<table border="0">
<tr>
<td>Nombre producto(*):</td>
<td><input type="text" name="txtNombre" size="20"/></td>
</tr>
<tr>
<td>Precio(*):</td>
<td><input type="text" name="txtPrecio" size="20"/></td>
<td>€</td>
</tr>
<tr>
<td>IVA 16%</td>
</tr>
<tr>
<td>Precio Final:</td>
<td><input type="text" name="txtfinal" size="20" readonly="readonly"/></td>
<td>€</td>
</tr>
</table>
<input type="button" name="btnEnviar" value="Enviar >>" onclick="valida()"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida() {
var ok = true;
var msg = "Debes escribir algo en los campos:\n";//\n es retorno de linia
var f=document.form1;
if(f.txtNombre.value == ""){
msg += "- Nombre producto\n";
ok = false;
}
if((f.txtPrecio.value == "")||isNaN(f.txtPrecio.value)){
msg += "- Precio\n";
ok = false;
}
else{
f.txtfinal.value=(f.txtPrecio.value)*1.16;
}
//Salida
if(ok == false)
alert(msg);
//return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post">
<table border="0">
<tr>
<td>Nombre producto(*):</td>
<td><input type="text" name="txtNombre" size="20"/></td>
</tr>
<tr>
<td>Precio(*):</td>
<td><input type="text" name="txtPrecio" size="20"/></td>
<td>€</td>
</tr>
<tr>
<td>IVA 16%</td>
</tr>
<tr>
<td>Precio Final:</td>
<td><input type="text" name="txtfinal" size="20" readonly="readonly"/></td>
<td>€</td>
</tr>
</table>
<input type="button" name="btnEnviar" value="Enviar >>" onclick="valida()"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>
Formulario con menú que se despliega
<!DOCTYPE>
<html lang='es'>
<head>
<title>Formulario con despliegue de recuadro. Ejercicio 3.25</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
function comprobarYEnviar(){
textNombre=document.getElementById("textNombre");
if(textNombre.value.length>0){
var regExpNumero=/\d+/;
textNumero=document.getElementById("textNumero");
if(regExpNumero.test(textNumero.value)){
var regExpEMail=/\w+@\w+.\w+/;
textEMail=document.getElementById("textEMail");
if (regExpEMail.test(textEMail.value)){
selectLista=document.getElementById("selectListado");
if (selectLista.selectedIndex >=2){//todo correcto}
document.getElementById("formulario").submit();
}
else
window.alert("No se ha seleccionado un elemento de"+"lalista.");
}
else
window.alert("El e-mail no es correcto *@*.*");
}
else
window.alert("El número está vacio o no es correcto");
}
else
window.alert("No se ha introducido un nombre");
}
</script>
</head>
<body>
<form action="" method="post" id="formulario">
<table align="center">
<caption>Formulario Sencillo</caption>
<tr>
<td>Nombre:</td>
<td><input type="text" name="textNombre" id="textNombre"/></td>
</tr>
<tr>
<td>Número:</td>
<td><input type="text" name="textNumero" id="textNumero"/></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="textEMail" id="textEMail"/></td>
</tr>
<tr>
<td>
<select name="selectListado" id="selectListado">
<option value="Inicial">Selecciona algo...</option>
<option value="Inicial"></option>
<option value="inicial">Opción 1</option>
<option value="inicial">Opción 2</option>
</select>
</td>
</tr>
<td colspan="2" align="center">
<input type="button" value="Enviar" onclick="comprobarYEnviar()">
</td>
</tr>
</table>
</form>
</body>
</html>
<html lang='es'>
<head>
<title>Formulario con despliegue de recuadro. Ejercicio 3.25</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
function comprobarYEnviar(){
textNombre=document.getElementById("textNombre");
if(textNombre.value.length>0){
var regExpNumero=/\d+/;
textNumero=document.getElementById("textNumero");
if(regExpNumero.test(textNumero.value)){
var regExpEMail=/\w+@\w+.\w+/;
textEMail=document.getElementById("textEMail");
if (regExpEMail.test(textEMail.value)){
selectLista=document.getElementById("selectListado");
if (selectLista.selectedIndex >=2){//todo correcto}
document.getElementById("formulario").submit();
}
else
window.alert("No se ha seleccionado un elemento de"+"lalista.");
}
else
window.alert("El e-mail no es correcto *@*.*");
}
else
window.alert("El número está vacio o no es correcto");
}
else
window.alert("No se ha introducido un nombre");
}
</script>
</head>
<body>
<form action="" method="post" id="formulario">
<table align="center">
<caption>Formulario Sencillo</caption>
<tr>
<td>Nombre:</td>
<td><input type="text" name="textNombre" id="textNombre"/></td>
</tr>
<tr>
<td>Número:</td>
<td><input type="text" name="textNumero" id="textNumero"/></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="textEMail" id="textEMail"/></td>
</tr>
<tr>
<td>
<select name="selectListado" id="selectListado">
<option value="Inicial">Selecciona algo...</option>
<option value="Inicial"></option>
<option value="inicial">Opción 1</option>
<option value="inicial">Opción 2</option>
</select>
</td>
</tr>
<td colspan="2" align="center">
<input type="button" value="Enviar" onclick="comprobarYEnviar()">
</td>
</tr>
</table>
</form>
</body>
</html>
miércoles, 15 de marzo de 2017
Programa que gestione los datos de stock de una tienda de comestibles, la información a recoger será: nombre del producto, precio, cantidad en stock. La tienda dispone de 10 productos distintos.
<!---32. Programa que gestione los datos de stock de una tienda de comestibles, la información a recoger será: nombre del producto, precio, cantidad en stock. La tienda dispone de 10 productos distintos. El programa debe ser capaz de:
• Dar de alta un producto nuevo.
• Buscar un producto por su nombre.
• Modificar el stock y precio de un producto dado.
--->
<html>
<head>
<script type="text/javascript">
function cargar(obj){
var i;
for(i=0;i<5;i++){
Productos[i]=prompt('Ingrese Nombre producto:','');
}
}
function buscar(obj){
var f;
for(f=0;f<Productos.length;f++)
{
obj.result.value=(Productos[f]);
}
}
function calcula(obj){
//alert(obj.expr.value+2);
obj.resul.value = eval(obj.expr.value)+2;
}
var Productos=new Array();
</script>
</head>
<body>
<form>
Cargar Array:<input type="button" value="Cargar" onclick="cargar(this.form)"/></br>
Buscar por nombre:<input type="button" value="buscar" onclick="buscar(this.form)"/></br>
Modificar datos:<input type="button" value="Modificar" onclick="modificar(this.form)"/></br>
Resultado:<input type="text" name="result" size="20"/></br>
Introducir expresión: <INPUT TYPE="text" NAME="expr" SIZE="20"></br>
Resultado: <INPUT TYPE="text" NAME="resul" SIZE="20"></BR>
<INPUT TYPE="button" VALUE="evalua" onClick="calcula(this.form)">
</form>
</body>
</html>
• Dar de alta un producto nuevo.
• Buscar un producto por su nombre.
• Modificar el stock y precio de un producto dado.
--->
<html>
<head>
<script type="text/javascript">
function cargar(obj){
var i;
for(i=0;i<5;i++){
Productos[i]=prompt('Ingrese Nombre producto:','');
}
}
function buscar(obj){
var f;
for(f=0;f<Productos.length;f++)
{
obj.result.value=(Productos[f]);
}
}
function calcula(obj){
//alert(obj.expr.value+2);
obj.resul.value = eval(obj.expr.value)+2;
}
var Productos=new Array();
</script>
</head>
<body>
<form>
Cargar Array:<input type="button" value="Cargar" onclick="cargar(this.form)"/></br>
Buscar por nombre:<input type="button" value="buscar" onclick="buscar(this.form)"/></br>
Modificar datos:<input type="button" value="Modificar" onclick="modificar(this.form)"/></br>
Resultado:<input type="text" name="result" size="20"/></br>
Introducir expresión: <INPUT TYPE="text" NAME="expr" SIZE="20"></br>
Resultado: <INPUT TYPE="text" NAME="resul" SIZE="20"></BR>
<INPUT TYPE="button" VALUE="evalua" onClick="calcula(this.form)">
</form>
</body>
</html>
Formulario, botón que pinde nombre, dni, email
<!DOCTYPE>
<html lang='es'>
<head>
<title>Formulario</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
</script>
</head>
<body>
<form action="" method="get">
D.N.I............:<input type="text" name="dni"/></br>
Nombre...........:<input type="text" name="apellido"/></br>
Dirección........:<input type="text" name="dirección"/></br>
Población........:<input type="text" name="pobalción"/></br>
Provincia........:<input type="text" name="provincia"/></br>
Código Postal....:<input type="text" name="codigo_postal"/></br>
<input type="reset" value="Restablecer"/>
<input type="submit" value="Enviar"/>
<input type="button" value="Cancelar"/>
</form>
</body>
</html>
<html lang='es'>
<head>
<title>Formulario</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
</script>
</head>
<body>
<form action="" method="get">
D.N.I............:<input type="text" name="dni"/></br>
Nombre...........:<input type="text" name="apellido"/></br>
Dirección........:<input type="text" name="dirección"/></br>
Población........:<input type="text" name="pobalción"/></br>
Provincia........:<input type="text" name="provincia"/></br>
Código Postal....:<input type="text" name="codigo_postal"/></br>
<input type="reset" value="Restablecer"/>
<input type="submit" value="Enviar"/>
<input type="button" value="Cancelar"/>
</form>
</body>
</html>
Formulario en tabla con menú desplegable
<!DOCTYPE>
<html lang='es'>
<head>
<title>Formulario con despliegue de recuadro. Ejercicio 3.25</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
function comprobarYEnviar(){
textNombre=document.getElementById("textNombre");
if(textNombre.value.length>0){
var regExpNumero=/\d+/;
textNumero=document.getElementById("textNumero");
if(regExpNumero.test(textNumero.value)){
var regExpEMail=/\w+@\w+.\w+/;
textEMail=document.getElementById("textEMail");
if (regExpEMail.test(textEMail.value)){
selectLista=document.getElementById("selectListado");
if (selectLista.selectedIndex >=2){//todo correcto}
document.getElementById("formulario").submit();
}
else
window.alert("No se ha seleccionado un elemento de"+"lalista.");
}
else
window.alert("El e-mail no es correcto *@*.*");
}
else
window.alert("El número está vacio o no es correcto");
}
else
window.alert("No se ha introducido un nombre");
}
</script>
</head>
<body>
<form action="" method="post" id="formulario">
<table align="center">
<caption>Formulario Sencillo</caption>
<tr>
<td>Nombre:</td>
<td><input type="text" name="textNombre" id="textNombre"/></td>
</tr>
<tr>
<td>Número:</td>
<td><input type="text" name="textNumero" id="textNumero"/></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="textEMail" id="textEMail"/></td>
</tr>
<tr>
<td>
<select name="selectListado" id="selectListado">
<option value="Inicial">Selecciona algo...</option>
<option value="Inicial"></option>
<option value="inicial">Opción 1</option>
<option value="inicial">Opción 2</option>
</select>
</td>
</tr>
<td colspan="2" align="center">
<input type="button" value="Enviar" onclick="comprobarYEnviar()">
</td>
</tr>
</table>
</form>
</body>
</html>
<html lang='es'>
<head>
<title>Formulario con despliegue de recuadro. Ejercicio 3.25</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
function comprobarYEnviar(){
textNombre=document.getElementById("textNombre");
if(textNombre.value.length>0){
var regExpNumero=/\d+/;
textNumero=document.getElementById("textNumero");
if(regExpNumero.test(textNumero.value)){
var regExpEMail=/\w+@\w+.\w+/;
textEMail=document.getElementById("textEMail");
if (regExpEMail.test(textEMail.value)){
selectLista=document.getElementById("selectListado");
if (selectLista.selectedIndex >=2){//todo correcto}
document.getElementById("formulario").submit();
}
else
window.alert("No se ha seleccionado un elemento de"+"lalista.");
}
else
window.alert("El e-mail no es correcto *@*.*");
}
else
window.alert("El número está vacio o no es correcto");
}
else
window.alert("No se ha introducido un nombre");
}
</script>
</head>
<body>
<form action="" method="post" id="formulario">
<table align="center">
<caption>Formulario Sencillo</caption>
<tr>
<td>Nombre:</td>
<td><input type="text" name="textNombre" id="textNombre"/></td>
</tr>
<tr>
<td>Número:</td>
<td><input type="text" name="textNumero" id="textNumero"/></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="textEMail" id="textEMail"/></td>
</tr>
<tr>
<td>
<select name="selectListado" id="selectListado">
<option value="Inicial">Selecciona algo...</option>
<option value="Inicial"></option>
<option value="inicial">Opción 1</option>
<option value="inicial">Opción 2</option>
</select>
</td>
</tr>
<td colspan="2" align="center">
<input type="button" value="Enviar" onclick="comprobarYEnviar()">
</td>
</tr>
</table>
</form>
</body>
</html>
lunes, 13 de marzo de 2017
FUNCIONES: hola mundo
EN BODY
<form<
<inmput type="button" name="boton" value="Púlsame" onclick="HolaMundo()">
</input>
</form>
EN HEAD
<script type=text/javascript"<
function HolaMundo()
{
alert("¡Hola mundo!");
}
<form<
<inmput type="button" name="boton" value="Púlsame" onclick="HolaMundo()">
</input>
</form>
EN HEAD
<script type=text/javascript"<
function HolaMundo()
{
alert("¡Hola mundo!");
}
Suscribirse a:
Entradas (Atom)