Age Group Selection Tools: HTML, JavaScript, and PHP

This page provides various tools and code snippets to help developers create age group selection interfaces for web applications. You can find HTML dropdowns, JavaScript arrays, and PHP arrays for different age groups, organized by basic ranges and more specific life stages.

We provide an HTML dropdown for easy setup, a JavaScript array for changing the front-end, and a PHP array for handling data on the server.

Create Custom Age Groups for Your Needs

Customize your preferred age group by choosing from the options listed in the table.You can include these selected age group in a dropdown menu, a JavaScript array, or a PHP array. The selected codes will be displayed below.

# Age Group Select
10-4 years
25-9 years
310-14 years
415-17 years
518-24 years
625-34 years
735-44 years
845-54 years
955-64 years
1065-74 years
1175-84 years
1285-94 years
1395+ years

HTML Drop Down

This is the part of the HTML code for choosing age group drop-down.

HTML
<select id="age-group" name="age-group" aria-label="Age Group">
    <option value="">Select Age Group</option>
    <option value="0-4">0-4 years</option>
    <option value="5-9">5-9 years</option>
    <option value="10-14">10-14 years</option>
    <option value="15-17">15-17 years</option>
    <option value="18-24">18-24 years</option>
    <option value="25-34">25-34 years</option>
    <option value="35-44">35-44 years</option>
    <option value="45-54">45-54 years</option>
    <option value="55-64">55-64 years</option>
    <option value="65-74">65-74 years</option>
    <option value="75-84">75-84 years</option>
    <option value="85-94">85-94 years</option>
    <option value="95-plus">95+ years</option>
</select>
Run code Edit Code Download

HTML Drop Down Age groups categorized by category

This code categorizes age groups into 19 options, ranging from newborns to retirees and other, including both specific age ranges and generational categories.

HTML
<select id="age-group" name="age-group" aria-label="Age Group">
    <option value="">Select an age group</option>
    <option value="newborns">Newborns (0-3 months)</option>
    <option value="babies">Babies (4-12 months)</option>
    <option value="infants">Infants (1-2 years)</option>
    <option value="toddlers">Toddlers (2-3 years)</option>
    <option value="preschoolers">Preschoolers (3-5 years)</option>
    <option value="school-age">School-age children (6-9 years)</option>
    <option value="preteens">Preteens (10-12 years)</option>
    <option value="teenagers">Teenagers (13-19 years)</option>
    <option value="young-adults">Young adults (20-29 years)</option>
    <option value="adults">Adults (30-39 years)</option>
    <option value="middle-aged-adults">Middle-aged adults (40-59 years)</option>
    <option value="seniors">Seniors (60-74 years)</option>
    <option value="elderly">Elderly (75+ years)</option>
    <option value="college-students">College students (18-24 years)</option>
    <option value="retirees">Retirees (65+ years)</option>
    <option value="gen-z">Generation Z (1997-2012)</option>
    <option value="millennials">Millennials (1981-1996)</option>
    <option value="gen-x">Generation X (1965-1980)</option>
    <option value="baby-boomers">Baby Boomers (1946-1964)</option>
</select>

You can customize this code to fit your specific needs, such as adding or removing age groups, changing the option values, or adding additional attributes to the select element.

Run code Edit Code Download

JavaScript Array

JavaScript Array of Age Group Selection.

  • Use to dynamically generate age group selections.

  • Easily adaptable for client-side validation or processing.

JavaScript
const ageGroups = [
    { value: "0-4", label: "0-4 years" },
    { value: "5-9", label: "5-9 years" },
    { value: "10-14", label: "10-14 years" },
    { value: "15-17", label: "15-17 years" },
    { value: "18-24", label: "18-24 years" },
    { value: "25-34", label: "25-34 years" },
    { value: "35-44", label: "35-44 years" },
    { value: "45-54", label: "45-54 years" },
    { value: "55-64", label: "55-64 years" },
    { value: "65-74", label: "65-74 years" },
    { value: "75-84", label: "75-84 years" },
    { value: "85-94", label: "85-94 years" },
    { value: "95-plus", label: "95+ years" }
];

Categorized

This age groups array shows detailed classifications of human life stages, from babies to the old, with 19 different categories.

JavaScript
const ageGroupsCategorized = [
  { value: "newborns", label: "Newborns (0-3 months)" },
  { value: "babies", label: "Babies (4-12 months)" },
  { value: "infants", label: "Infants (1-2 years)" },
  { value: "toddlers", label: "Toddlers (2-3 years)" },
  { value: "preschoolers", label: "Preschoolers (3-5 years)" },
  { value: "school-age", label: "School-age children (6-9 years)" },
  { value: "preteens", label: "Preteens (10-12 years)" },
  { value: "teenagers", label: "Teenagers (13-19 years)" },
  { value: "young-adults", label: "Young adults (20-29 years)" },
  { value: "adults", label: "Adults (30-39 years)" },
  { value: "middle-aged-adults", label: "Middle-aged adults (40-59 years)" },
  { value: "seniors", label: "Seniors (60-74 years)" },
  { value: "elderly", label: "Elderly (75+ years)" },
  { value: "college-students", label: "College students (18-24 years)" },
  { value: "retirees", label: "Retirees (65+ years)" },
  { value: "gen-z", label: "Generation Z (1997-2012)" },
  { value: "millennials", label: "Millennials (1981-1996)" },
  { value: "gen-x", label: "Generation X (1965-1980)" },
  { value: "baby-boomers", label: "Baby Boomers (1946-1964)" }
];

Usage Example

Use this array to create a dropdown menu

HTML
<select id="age-group">
  <option value="">Select Age Group</option>
</select>
javaScripr
const ageSelect = document.getElementById("age-group");

ageGroups.forEach(group => {
    const optionElement = document.createElement("option");
    optionElement.value = group.value;
    optionElement.textContent = group.label;
    ageSelect.appendChild(optionElement);
});

Try it your self Real Time Preview

Download Edit Code

PHP Array

Array of Age Group Selection

This PHP array can be used in various ways in a PHP application, such as generating form options, filtering data, or categorizing users by age group.

  • Useful for server-side processing and validation.

  • Can be integrated with form handling scripts.

PHP
<?php
$ageGroups = [
    ['value' => '0-4', 'label' => '0-4 years'],
    ['value' => '5-9', 'label' => '5-9 years'],
    ['value' => '10-14', 'label' => '10-14 years'],
    ['value' => '15-17', 'label' => '15-17 years'],
    ['value' => '18-24', 'label' => '18-24 years'],
    ['value' => '25-34', 'label' => '25-34 years'],
    ['value' => '35-44', 'label' => '35-44 years'],
    ['value' => '45-54', 'label' => '45-54 years'],
    ['value' => '55-64', 'label' => '55-64 years'],
    ['value' => '65-74', 'label' => '65-74 years'],
    ['value' => '75-84', 'label' => '75-84 years'],
    ['value' => '85-94', 'label' => '85-94 years'],
    ['value' => '95-plus', 'label' => '95+ years']
];
?>

PHP Array Categorized Age Gorps

  • Provides detailed age ranges for backend applications.

  • Useful for detailed demographic data processing.

PHP
<?php
$ageGroupsCategorized = [
    ['value' => 'newborns', 'label' => 'Newborns (0-3 months)'],
    ['value' => 'babies', 'label' => 'Babies (4-12 months)'],
    ['value' => 'infants', 'label' => 'Infants (1-2 years)'],
    ['value' => 'toddlers', 'label' => 'Toddlers (2-3 years)'],
    ['value' => 'preschoolers', 'label' => 'Preschoolers (3-5 years)'],
    ['value' => 'school-age', 'label' => 'School-age children (6-9 years)'],
    ['value' => 'preteens', 'label' => 'Preteens (10-12 years)'],
    ['value' => 'teenagers', 'label' => 'Teenagers (13-19 years)'],
    ['value' => 'young-adults', 'label' => 'Young adults (20-29 years)'],
    ['value' => 'adults', 'label' => 'Adults (30-39 years)'],
    ['value' => 'middle-aged-adults', 'label' => 'Middle-aged adults (40-59 years)'],
    ['value' => 'seniors', 'label' => 'Seniors (60-74 years)'],
    ['value' => 'elderly', 'label' => 'Elderly (75+ years)'],
    ['value' => 'college-students', 'label' => 'College students (18-24 years)'],
    ['value' => 'retirees', 'label' => 'Retirees (65+ years)'],
    ['value' => 'gen-z', 'label' => 'Generation Z (1997-2012)'],
    ['value' => 'millennials', 'label' => 'Millennials (1981-1996)'],
    ['value' => 'gen-x', 'label' => 'Generation X (1965-1980)'],
    ['value' => 'baby-boomers', 'label' => 'Baby Boomers (1946-1964)']
];
?>

Usage Example PHP Array

Here is a simple example of using this array to create an HTML select option.

PHP
<?php
$html = '';
foreach ($ageGroups as $group) {
    $value = strtolower($group['value']);
    $text = htmlspecialchars($group['label']);
    $html .= '<option value="' . $value . '">' . $text . '</option>'.PHP_EOL;
}
?>

<select id="age-group">
  <option value="">Select Age Group</option>
	<?php echo $html ?>
</select>
Download

Customization Tips

  • Adding/Removing Age Groups: Modify the code examples to add or remove age group options.

  • Changing Labels: Update display text to match application context.

Use Cases

  • Education: School admissions and curriculum design

  • E-commerce: Tailoring online shopping experiences to different age groups by recommending age-appropriate products.

  • Travel: Age-specific packages and promotions

  • Content Creation: Developing age-appropriate content for social media, websites, or promotional materials.

  • Treatment Plans: Creating age-appropriate treatment protocols for different age brackets.

  • Media Production: Producing TV shows, movies, or online content that appeals to specific age groups.

Other drop down list