0

Input Select para anos: economizando 110 linhas de código

R
Raphael Zaneti

Ao desenvolvermos formulários para aplicações web, é comum surgir a necessidade de criarmos uma Input para o usuário inserir um ano - para nascimento, formatura, ou qualquer outra finalidade. Podemos fazer isso por Input Text, mas convenhamos que um Input Select é muito mais agradável para o usuário, não?


Para fazer isso, a solução mais óbvia - e menos prática - é inserirmos no código HTML uma "option" para cada ano, dentro do Input Select. Imagine, você ter que construir um código com a seguinte estrutura:

<form>
        ...
        Ano de nascimento: <select name="ano" id="ano">
            <option value=1900>1900</option>
            <option value=1901>1901</option>
            <option value=1902>1902</option>
            <option value=1903>1903</option>
            <!-- e por aí vai, até 2020, somando 120 linhas de código!-->
        </select>
        ...
</form>


Nada prático! Em vez disso, o JavaScript nos dá uma alternativa muito mais prática, que combina a criação de elementos com um contador. É simples:


function yearList() {
        let year = document.getElementById('ano') //busca o elemento HTML com o id "ano"
        for(let i = 1900; i<2022; i++){ //loop contendo o ano inicial e final que deverão constar no input select
            let option = document.createElement("option") //cria um elemento "option" na variável option
            option.value = i //atribui o valor do índice ao value do option
            option.text = i //atribui o valor do índice ao text do option
            year.appendChild(option) //cria um option como "filho" para o select, contendo o value e o text equivalentesao index atual
        }
    }
    yearList()

//10 linhas, descontados os comentários :-)
0
0

Comentários (3)

0
Diogo Dantas

Diogo Dantas

08/07/2021 09:49

A dica é boa, mas você pode usar o HTML tag "date" para obter o mesmo resultado assim:


<label for="nascimento">Data de Nascimento</label>

<input type="date" id="nascimento" name="nascimento">

0
Márcio Cardoso

Márcio Cardoso

06/07/2021 18:57

html resolve fácil, com date.

com uma linha, sem mistério.

0
Thiago Oliveira

Thiago Oliveira

06/07/2021 18:27

Boa, eu faço essa logica com framework intermediario quando conecto o back com o front, mas ficou bom deixando puramente no front

28 anos, Porto Alegre <-> São Paulo, em transição de carreira!

Brasil