-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (125 loc) · 6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario Dinámico</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<h1>Formulario usuarios</h1>
</nav>
<div class="container mt-5">
<div class="card">
<div class="card-body">
<h2 class="card-title">Formulario de usuarios</h2>
<form id="user-form">
<div class="row mb-3">
<label for="name" class="col-sm-3 col-form-label">Nombre</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name"
placeholder="Ingrese su nombre">
</div>
</div>
<div class="row mb-3">
<label for="lastName" class="col-sm-3 col-form-label">Apellido</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastName" name="lastName"
placeholder="Ingrese su apellido">
</div>
</div>
<div class="row mb-3">
<label for="gender" class="col-sm-3 col-form-label">Género</label>
<div class="col-sm-10">
<select class="form-select" id="gender" name="gender">
<option selected>Seleccione...</option>
<option value="Female">Femenino</option>
<option value="Male">Masculino</option>
<option value="Other">Otro</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="date" class="col-sm-3 col-form-label">Fecha</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="date" name="date">
</div>
</div>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary" id="buttonFetch">Enviar con Fetch</button>
<button type="submit" class="btn btn-primary" id="buttonAjax">Enviar con AJAX</button>
</div>
</div>
</form>
</div>
</div>
<div class="card mt-5">
<div class="card-body">
<h2 class="card-title">Eliminar usuario</h2>
<form id="form-eliminar">
<div class="row mb-3">
<label for="id-eliminar" class="col-sm-3 col-form-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id-eliminar" placeholder="Ingrese el ID">
</div>
</div>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-danger" id="btn-eliminar-ajax">Eliminar con
AJAX</button>
<button type="submit" class="btn btn-danger" id="btn-eliminar-php">Eliminar con
FETCH</button>
</div>
</div>
</form>
</div>
</div>
<div class="card mt-5">
<div class="card-body">
<h2 class="card-title">Actualizar usuario</h2>
<form id="form-actualizar">
<div class="row mb-3">
<label for="id-actualizar" class="col-sm-3 col-form-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id-actualizar" placeholder="Ingrese el ID">
</div>
</div>
<div class="row mb-3">
<label for="nombre-actualizar" class="col-sm-3 col-form-label">Nombre</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nombre-actualizar"
placeholder="Ingrese el nuevo nombre">
</div>
</div>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary" id="btn-actualizar-ajax">Actualizar con
AJAX</button>
<button type="submit" class="btn btn-primary" id="btn-actualizar-php">Actualizar con
FETCH</button>
</div>
</div>
</form>
</div>
</div>
<div class="card mt-5">
<div class="card-body">
<h2 class="card-title">Impresión de Base de Datos</h2>
<div class="row mb-3">
<div lass="col-sm-10 offset-sm-2">
<button class="btn btn-primary" id="printAjax">Impresion BD AJAX</button>
<button class="btn btn-primary" id="printFetch">Impresion BD FETCH</button>
</div>
</div>
</div>
<div id="print-section">
<!-- Aquí se imprimirán los resultados -->
<p>No hay datos que mostrar.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>