Scribd
Upload
33 views

Formulario

The document contains HTML and CSS code for a registration form. The HTML includes inputs for name, last name, email, password, terms and conditions checkbox, and submit button. It also includes JavaScript for form validation and reCAPTCHA. The CSS styles the form with colors, padding, borders, etc. On page load, a welcome alert will display telling the user to complete registration.

Uploaded by

Rigoberto Torres solin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
33 views

Formulario

The document contains HTML and CSS code for a registration form. The HTML includes inputs for name, last name, email, password, terms and conditions checkbox, and submit button. It also includes JavaScript for form validation and reCAPTCHA. The CSS styles the form with colors, padding, borders, etc. On page load, a welcome alert will display telling the user to complete registration.

Uploaded by

Rigoberto Torres solin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>

<script>
function hola() {
alert("Bienvenido, a continuacion realice el registro"); }
</script>

<script>
function onLoadCallBack (){
grecaptcha.render('divrecaptcha',{
sitekey: '',callback: succescall,
});
}
</script>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<link rel="stylesheet" href="stylef.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<title>formulario</title>

</head>
<body onLoad=hola();>
<form action="" name="formulario" method="get ">
<section class="form-register">
<h4> Formulario registro </h4>
<input class="controls" type="text" name="nombres" id="nombre" placeholder="Ingrese
su nombre">
<input class="controls" type="text" name="apellidos" id="apellidos"
placeholder="Ingrese sus apellidos">
<input class="controls" type="email" name="correo" id="correo" placeholder="Ingrese
su correo">
<input class="controls" type="password" name="correo" id="correo"
placeholder="Ingrese su contraseña">
<p> Estoy de acuerdo con <a href="#">Terminos y Condiciones</a></p>
<input type="checkbox" name="terminos" id="terminos"> Acepto terminos y Condiciones
<br>
<input class=" botons" type="submit" value="Registrar">

<div class="g-recaptcha" data-sitekey=""></div>

<p> <a href="#"> Ya tengo cuenta</a></p>


</section>
</form>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.m
in.js"
integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>

</body>
</html>

--------------------PARTE EN CSS-----------------------

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-image: url('fondo.jpg');
}

.form-register {
width: 400px;
background: #24303c;
padding: 30px;
margin: auto;
margin-top: 100px;
border-radius: 5px;
font-family: 'Times New Roman';
color: white;
box-shadow: 7px 13px 37px #000;
}
.form-register h4 {
font-size: 22px;
margin-bottom: 20px;
}
.controls {
width: 100%;
background: 24303c;
padding: 10px;
border-radius: 4px;
margin-bottom: 16px;
border: 1px solid #1f53c4;
font-family: 'calibri';
font-size: 18px;
}

.form-register p {
height: 40px;
text-align: center;
font-size: 18px;
line-height: 40px;
}

.form-register a:hover {
color: aliceblue;
text-decoration: underline;
}

.form-register .botons {
width: 100%;
background: #1f53c4;
border: none;
padding: 12px;
color: white;
margin: 16px 0;
font-size: 16px;
}
.form-register .checkbox {
width: 100%;
font-family: 'Times New Roman';
text-align: center;
}

You might also like