Para criar um formulário deve-se utilizar a tag form e dentro dela a tag p para cada item do formulário e detro desse item utilizar a tag input type="text" name='' id'' alem é claro do input type='submit' value='enviar' para adicionar o botão para salvar
Primeiro formulário
os dados cadastrados no formulario precisar ser salvos em algum arquivo para isso dentro da tag form deve-se colocar action = " " e o caminho/nome para o arquivo. Para desativar o autocomplete para evitar que no formulario apareca sugestão enquanto digita basta adicionar na tag form a propriedade autocomplete="off"
Formulário que possui senha
Sempre que utilizar dados sensiveis utilizar method de salvamento post pois se usar get as informações são adicionadas a url. Para que não apareca a senha enquanto digita colocar no input o type password. E para que não permita enviar um formulario sem preencher um dado no input deve ser adicionado required
Para determinar o minimo e o maximo de caracteres que caixa do formulario deve ter precisa-se adicionar no input as propriedade minlength="" e maxlength="" com os respectivos tamanho. Se quiser mudar o tamanho da caixa na tag input adicionar a propriedade size="" com o tamanho. Se quiser deixar um texto dentro da caixa enquanto o usuário não digita nada basta adicionar a propriedade placeholder="texto."
Para páginas de login é interessante deixar o autocomplete ligado para facilitar para o usuario, para isso na tag form colocar a propriedade autocomplete="on" e em cada input do login adicionar o autocomplete referente ao dado por exemplo para nome utilizar autocomplete="username"
Tipos de dados: number, month, date, time
Quando o type do input for number o usuario só pode digitar numeros para definir qual a faixa de números que será aceita deve-se utilizar as propriedades min e max com os respectivos numeros desejados além disso pode-se definir quais os intervalos entre os números que serão aceitos
Type month permite escolher o mesmo e o ano, já type date permite escolher também o dia, ou seja, dia,mês e ano. Para sugerir uma data ou até mesmo um number utiliza-se value="" diferentemente de quando é um texto que utiliza a propriedade placeholder. Já para adicionar uma caixa para adiconar a hora bastar adicionar um input com type="time"
Telefone e e-mail
checkbox e radio button
para radio button os input tem que ter o mesmo nome para que apenas uma opção possa ser escolhida, caso contrario todas as opções podem ser marcadas e não se consegue desmarcar
carregar uma foto
select, datalist, textarea
Diferença entre o select e datalist é o que select so permite escolher as opções que foram fornecidas no codigo durante a construção do formulário, enquanto datalist permite que o usuário escreva com suas palavras ou selecione uma opção disponivel. Já textarea permite apenas que usuário digite algo, não fornece opções de escolha
output
calculando a idade de acordo com ano de nascimento