forked from marquez.juan/Ejercicio-inicial--git-y-HTML
97 lines
4.8 KiB
HTML
97 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<ddashtml>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<title>Probando javascript</title>
|
|
<link rel="stylesheet" href="estilo.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
|
|
</head>
|
|
<body class="container">
|
|
<main role="main">
|
|
<header>
|
|
<h1>Este es el título de la página</h1>
|
|
<h3>Este es el subtitulo</h3>
|
|
</header>
|
|
<div class="row">
|
|
<section class="card col m-4">
|
|
<h1>Esta es una sección</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
|
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
|
|
aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.</p>
|
|
<div class="text-center">
|
|
<button type="button" class="btn btn-success" onclick="mostrar_formulario()">
|
|
Mostrar formulario (con "onclick")
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<section class="card col m-4">
|
|
<div class="card-header">
|
|
<h1>Esta es otra sección</h1>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
|
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
|
|
aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
cupidatat non proident, sunt in culpa qui officia deserunt
|
|
mollit anim id est laborum.</p>
|
|
<div class="text-center">
|
|
<button type="button" class="btn btn-success" id="btn-formulario">
|
|
Mostrar formulario
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<section id="formulario" class="col-6 offset-3 border border-3 border-warning rounded p-3 shadow d-none">
|
|
<form id="form" action="#">
|
|
<label for="nya" class="form-label">Nombre y apellido: </label>
|
|
<input type="text" name="nya" id="nya" class="form-control"><br>
|
|
|
|
<label for="opciones">Elegir: </label>
|
|
<input type="radio" name="opciones" value="m">Masculino
|
|
<input type="radio" name="opciones" value="f">Femenino
|
|
<br>
|
|
|
|
<label for="mail">Correo electrónico</label>
|
|
<input type="email" name="mail" id="mail" placeholder="Escriba su email"><br>
|
|
|
|
<label for="cuotas">Cantidad de cuotas:</label>
|
|
<input type="number" name="cuotas" id="cuotas" value="1" min="1" max="12"><br>
|
|
|
|
<label for="provincia">Provincia:</label>
|
|
<select name="provincia" id="provincia">
|
|
<option value="s">Santa Fe</option>
|
|
<option value="e">Entre Ríos</option>
|
|
<option value="c">Córdoba</option>
|
|
</select><br>
|
|
|
|
<div class="form-check form-switch">
|
|
<input type="checkbox" name="es_estudiante" id="es_estudiante" class="form-check-input">
|
|
<label for="es_estudiante" class="form-check-label">¿Es estudiante?</label><br>
|
|
</div>
|
|
|
|
<label for="observaciones">Observaciones: </label>
|
|
<textarea name="observaciones" id="observaciones" rows="8" cols="40"></textarea><br>
|
|
|
|
<input type="submit" value="Enviar">
|
|
</form>
|
|
</section>
|
|
<footer>
|
|
<p>Este es el pie de página, tiene
|
|
<a href="juansemarquez.com/prog1">un enlace</a>.</p>
|
|
</footer>
|
|
</main>
|
|
<script src="formulario.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|