Los formularios se utilizan en las páginas web para que el usuario ingrese los detalles requeridos que luego lo envían al servidor para su procesamiento. Un formulario también se conoce como formulario web o formulario HTML. Los ejemplos del uso de formularios prevalecen en sitios web de comercio electrónico, banca en línea, encuestas en línea, por nombrar algunos.
Sintaxis para formulario en HTML
HTML
<body> <h1 style="text-align: center;">REGISTRATION FORM</h1> <form name="RegForm" onsubmit="return GEEKFORGEEKS()" method="post"> <p>Name: <input type="text" size="65" name="Name" /></p> <br /> <p>Address: <input type="text" size="65" name="Address" /> </p> <br /> <p>E-mail Address: <input type="text" size="65" name="EMail" /></p> <br /> <p>Password: <input type="text" size="65" name="Password" /></p> <br /> <p>Telephone: <input type="text" size="65" name="Telephone" /></p> <br /> <p> SELECT YOUR COURSE <select type="text" value="" name="Subject"> <option>BTECH</option> <option>BBA</option> <option>BCA</option> <option>B.COM</option> <option>GEEKFORGEEKS</option> </select> </p> <br /> <br /> <p>Comments: <textarea cols="55" name="Comment"> </textarea></p> <p> <input type="submit" value="send" name="Submit" /> <input type="reset" value="Reset" name="Reset" /> </p> </form> </body>
Validación de un formulario: los datos ingresados en un formulario deben estar en el formato correcto y ciertos campos deben completarse para poder usar el formulario enviado de manera efectiva. Nombre de usuario, contraseña, información de contacto son algunos detalles que son obligatorios en los formularios y, por lo tanto, deben ser proporcionados por el usuario.
A continuación se muestra un código en HTML, CSS y JavaScript para validar un formulario.
HTML se utiliza para crear el formulario.
JavaScript para validar el formulario.
CSS para diseñar el diseño del formulario.
Validación de formulario:
JAVASCRIPT
<script>
function GEEKFORGEEKS() {
var name =
document.forms.RegForm.Name.value;
var email =
document.forms.RegForm.EMail.value;
var phone =
document.forms.RegForm.Telephone.value;
var what =
document.forms.RegForm.Subject.value;
var password =
document.forms.RegForm.Password.value;
var address =
document.forms.RegForm.Address.value;
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; //Javascript reGex for Email Validation.
var regPhone=/^\d{10}$/; // Javascript reGex for Phone Number validation.
var regName = /\d+$/g; // Javascript reGex for Name validation
if (name == "" || regName.test(name)) {
window.alert("Please enter your name properly.");
name.focus();
return false;
}
if (address == "") {
window.alert("Please enter your address.");
address.focus();
return false;
}
if (email == "" || !regEmail.test(email)) {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (password == "") {
alert("Please enter your password");
password.focus();
return false;
}
if(password.length <6){
alert("Password should be atleast 6 character long");
password.focus();
return false;
}
if (phone == "" || !regPhone.test(phone)) {
alert("Please enter valid phone number.");
phone.focus();
return false;
}
if (what.selectedIndex == -1) {
alert("Please enter your course.");
what.focus();
return false;
}
return true;
}
</script>
Estilizando el formulario:
CSS
<style>
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form {
margin: 0 auto;
width: 600px;
}
</style>
CÓDIGO COMBINADO [TODAS LAS SECCIONES ANTERIORES CLUBADAS]
HTML
<html>
<head>
<script>
function GEEKFORGEEKS() {
var name =
document.forms.RegForm.Name.value;
var email =
document.forms.RegForm.EMail.value;
var phone =
document.forms.RegForm.Telephone.value;
var what =
document.forms.RegForm.Subject.value;
var password =
document.forms.RegForm.Password.value;
var address =
document.forms.RegForm.Address.value;
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; //Javascript reGex for Email Validation.
var regPhone=/^\d{10}$/; // Javascript reGex for Phone Number validation.
var regName = /\d+$/g; // Javascript reGex for Name validation
if (name == "" || regName.test(name)) {
window.alert("Please enter your name properly.");
name.focus();
return false;
}
if (address == "") {
window.alert("Please enter your address.");
address.focus();
return false;
}
if (email == "" || !regEmail.test(email)) {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (password == "") {
alert("Please enter your password");
password.focus();
return false;
}
if(password.length <6){
alert("Password should be atleast 6 character long");
password.focus();
return false;
}
if (phone == "" || !regPhone.test(phone)) {
alert("Please enter valid phone number.");
phone.focus();
return false;
}
if (what.selectedIndex == -1) {
alert("Please enter your course.");
what.focus();
return false;
}
return true;
}
</script>
<style>
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form {
margin: 0 auto;
width: 600px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">REGISTRATION FORM</h1>
<form name="RegForm" onsubmit="return GEEKFORGEEKS()" method="post">
<p>Name: <input type="text"
size="65" name="Name" /></p>
<br />
<p>Address: <input type="text"
size="65" name="Address" />
</p>
<br />
<p>E-mail Address: <input type="text"
size="65" name="EMail" /></p>
<br />
<p>Password: <input type="text"
size="65" name="Password" /></p>
<br />
<p>Telephone: <input type="text"
size="65" name="Telephone" /></p>
<br />
<p>
SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
<option>GEEKFORGEEKS</option>
</select>
</p>
<br />
<br />
<p>Comments: <textarea cols="55"
name="Comment"> </textarea></p>
<p>
<input type="submit"
value="send" name="Submit" />
<input type="reset"
value="Reset" name="Reset" />
</p>
</form>
</body>
</html>
Validaciones utilizadas en los fragmentos de código anteriores:
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; //Javascript reGex for Email Validation.
var regPhone=/^\d{10}$/; // Javascript reGex for Phone Number validation.
var regName = /\d+$/g; // Javascript reGex for Name validation
Aquí hemos utilizado 3 expresiones regulares en Javascript para validación de correo electrónico, validación de número de teléfono y validación de nombre de usuario.
- regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;
La expresión regular anterior verifica la identificación de correo válida ingresada por el usuario.
\w muestra cualquier carácter de palabra, incluidos caracteres, números y guiones bajos
+ El símbolo muestra una o más combinaciones de caracteres.
Los caracteres especiales que se usan con más frecuencia en los identificadores de correo son el punto (.), el guión bajo (_) y (-). Por lo tanto, los hemos incluido en \.- expresión .
* Indica cero o más combinaciones de caracteres dados.
$ Indica el final de la string o expresión regular.
g denota todas las coincidencias desde el principio hasta el final de la string dada con expresión regular. g se usa para encontrar todas las ocurrencias del patrón en lugar de detenerse después de la primera coincidencia.
- regPhone=/^\d{10}$/;
En la validación del número de teléfono:
^ denota el inicio de la string y debe ser de tipo \d . Eso significa que debe contener solo dígitos del 0 al 9. No se aceptarán caracteres que no sean dígitos en \d.
{10} indica que la longitud de los caracteres del dígito debe ser exactamente 10 únicamente. No se permitirán caracteres extra o menos.
$ Indica el final de la string.
/ y / denota el inicio y el final de la expresión regular.
- nombrereg = /\d+$/g;
Bajo la validación del nombre de usuario:
El nombre original del usuario no debe contener ningún tipo de Números, por lo tanto, para evitarlo, hemos usado nuevamente \d clase de caracteres que aceptará solo cualquier combinación de 0-9 dígitos (Aquí + denota una o más combinaciones de cualquier dígito del 0 al 9 ). Después de que la verificación se lleve a cabo usando regName.test(name) .
Donde “nombre” es el valor de la variable ingresado por el usuario en el campo de nombre del formulario. Si contiene algún tipo de valor de dígito, aparecerá un mensaje de «Ingrese su nombre correctamente».
- Validación de la longitud de la contraseña:
Si la contraseña ingresada por el usuario es demasiado pequeña, el navegador debe enviar un mensaje al usuario indicando que la longitud de la contraseña es demasiado pequeña o similar.
Por lo tanto, hemos utilizado esta validación también en el campo de formulario. Si la contraseña ingresada por el usuario tiene una longitud inferior a 6, el navegador le indicará al usuario que «la contraseña debe tener al menos 6 caracteres».
Please note that Regular_Expression.test(String) will check user entered string with the standard regular expression, If it matches then if condition will be satisfied and !Regular_Expression.test(String) will check for alternative condition.
- Validación en los elementos del menú desplegable:
Si no hemos seleccionado ningún elemento del menú desplegable, aparecerá el mensaje «Por favor ingrese su curso». Porque (-1) denota que no se selecciona ningún campo y los elementos de opción subsiguientes se consideran índices 0,1,2,3,4, etc.
Para fines de indexación, se utiliza el método .selectedIndex . Si estamos haciendo clic en BTECH, entonces selectedIndex = 0, para BBA selectedIndex = 1 y así sucesivamente.
Y si el usuario no selecciona ninguna opción, de forma predeterminada tomará selectedIndex = (-1) y no debería ocurrir. Por lo tanto , what.selectedIndex == (-1) se usa en la condición If.
Verificación de validación para el formulario anterior:
Forma resultante:
Referencia:
https://en.wikipedia.org/wiki/Form_(HTML)
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por ASHISH RANA 7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA