Solución Ejercicio Grupal - ARGENTINA PROGRAMA 4.0
Se pide realizar el siguiente ejercicio:
CÓDIGO HTML 
CÓDIGO HTML 
<body>
<section class="form-register">
<h1>Formulario de Datos</h1>
Nombre: <input class="controls" type="text" name="name[]" id="Textnombre"
maxlength="30" minlength="2" required placeholder="Ingresar Nombre"><br>
Apellido: <input class="controls" type="text" name="name[]" id="Textapellido"
maxlength="25" minlength="2" placeholder="Ingresar Apellido"><br>
Edad: <input class="controls" type="number" name="name[]" id="Textedad" min="18"
max="120" required placeholder="Ingresar Edad"><br>
DNI: <input class="controls" type="text" name="name[]" id="Textdni" maxlength="8"
required placeholder="Ingresar DNI"><br>
EMAIL: <input class="controls" type="email" name="name[]" id="Textemail"
placeholder="Ingresar Email"><br>
<input id="btn_guardar" type="button" value="Insertar Registro"
onclick="InsertIntoTable()">
</section>
</br>
<center>
<table>
<caption><h3>Tabla de Ingreso de Datos Formulario</h3></caption>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
<th>DNI</th>
<th>Email</th>
</tr>
</thead>
<tbody id="TableBody">
</tbody>
</table>
</center>
</body>
<br>
<Footer>
© 2023 Alejandro Montero 2023 - Argentina Programa 4.0</Footer>
El CSS del formulario, se puede modificar según gusto del usuario.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: -moz-linear-gradient(left,rgb(248, 101, 101),rgb(248, 101, 101),rgb(228, 86, 86), rgb(160, 59, 59), rgb(124, 41, 41),black,black);
background: -webkit-linear-gradient(left,rgb(248, 101, 101),rgb(248, 101, 101),rgb(228, 86, 86), rgb(160, 59, 59), rgb(124, 41, 41),black,black);
background: -moz-linear-gradient(left,rgb(248, 101, 101),rgb(248, 101, 101),rgb(228, 86, 86), rgb(160, 59, 59), rgb(124, 41, 41),black,black);
background: -o-linear-gradient(left,rgb(248, 101, 101),rgb(248, 101, 101),rgb(228, 86, 86) rgb(160, 59, 59), rgb(124, 41, 41),black,black);
background: linear-gradient(to right,rgb(248, 101, 101),rgb(248, 101, 101),rgb(228, 86, 86), rgb(160, 59, 59), rgb(124, 41, 41),black,black);
}
h1{
text-align: center;
color: #63031b;
}
.form-register {
width: 550px;
background: whitesmoke;
padding: 20px;
margin: auto;
margin-top: 15px;
border-radius: 4px;
font-family: 'calibri';
color: white;
box-shadow: 7px 13px 37px #000;
}
.form-register h4 {
font-size: 22px;
margin-bottom: 20px;
}
.controls {
width: 100%;
background: white;
padding: 10px;
border-radius: 4px;
margin-bottom: 16px;
border: 1px solid #1f53c5;
font-family: 'calibri';
font-size: 18px;
color: black;
}
.form-register p {
height: 40px;
text-align: center;
font-size: 18px;
line-height: 40px;
}
.form-register a {
color: white;
text-decoration: none;
}
.form-register a:hover {
color: white;
text-decoration: underline;
}
.form-register .botons {
width: 100%;
background: #1f53c5;
border: none;
padding: 12px;
color: white;
margin: 16px 0;
font-size: 16px;
}
footer{
font-size:12px;
text-align:center;
}
table{
border-collapse: collapse;
}
table, td, th {
border: 2px solid rgb(207, 207, 218);
padding:30px;
color:whitesmoke;
}
#btn_guardar{
width: 100%;
background: #63031b;
border: none;
padding: 12px;
color: white;
margin: 16px 0;
font-size: 16px;
}
Para el SCRIP lo agregue en el mismo <HEAD> es interno lo comparto
<script>
var names=document.getElementsByName('name[]');
function InsertIntoTable()
{
var TableRow="<tr></tr>";
for(key=0; key < names.length; key++)
TableRow = TableRow.substring(0,TableRow.length-5) + "<td>"
+ names[key].value + "</td>" + TableRow.substring(TableRow.length-5);
var TrElement = document.createElement("tr");
TrElement.innerHTML = TableRow;
document.getElementById("TableBody").appendChild(TrElement);
}
</script>
Asi queda el trabajo:
Comentarios
Publicar un comentario