Usar um "for" em .html pra salvar um input em array em .php

Front-end
, ,
#1

tenho uma atividade com o seguinte enunciado:
1-Crie um programa que entre com os dados de altura e sexo de 10 pessoas.
-Imprima na tela quantas pessoas são do sexo masculino e quantas pessoas são do sexo feminino.
-Mostre também qual é a maior altura
-E se essa altura é de um homem ou uma mulher

eu queria fazer esse exercicio de maneira q eu nao precisasse fazer 10 inputs dentro do formulario no html
fazer como se fosse em python por exemplo,

altura = [0,0,0,0,0,0,0,0,0,0]
for x in range(0,10):
altura[x] += int(input("insira sua altura: "))
print (altura)

Eu preciso enviar esse formulario pra uma outra pagina php
A parte em php por enquanto ta tranquilo, so queria saber se tem como fazer o html ter apenas dois campos um de sexo e outro de altura e um botao para salvar, dps que os 10 valores forem salvos eles seriam enviaos para o php
não quero encher de input a tela do html, queria saber se tem como.

#2

Dá pra criar uma função em javascript que coloca os dados em um array toda vez que um botão for clicado, dai você envia pro php usando ajax:

<input id="sexo" type="text">
<input id="altura" type="text">
<button id="registrar">Registrar dados</button>
<button id="enviar">Enviar dados</button>

Javascript:

document.querySelector('#registrar').addEventListener('click', registrarDados);
document.querySelector('#enviar').addEventListener('click', enviarDados);

let dados = [];

function registrarDados(){
    if (dados.length === 10)
       return alert('Só são permitidos dados de 10 pessoas');
    let sexo = document.querySelector('#sexo').value;
    let altura= document.querySelector('#altura').value;

   dados.push({sexo, altura});
}
function enviarDados(){
   //seu ajax pra enviar os dados
}
1 curtida