Interests And Hobbies List For HTML, JavaScript, PHP Array

In this section, you can access pre-made code designed for integrating a detailed selection of interests and hobbies into your web projects. We offer three essential elements: an HTML dropdown menu, a JavaScript array, and a PHP array, each featuring a diverse assortment of interests and hobbies categorized for your convenience.

Below, you will find the HTML dropdown menu that you can directly incorporate into your forms, a JavaScript array perfect for client-side manipulation and dynamic content generation, and a PHP array ideal for server-side processing and database operations. Each snippet is thoroughly commented and structured for easy understanding and modification.

Create Custom Interests And Hobbies List for Your Needs

Customize your preferred Interests And Hobbies names by selecting options from the provided table. You can then include these selected names in the dropdown menu, JavaScript array, or PHP array. The codes for the selected interests and hobbies names will be displayed below.

Multilingual Options. Translated versions of the interests and hobbies list are available in various languages

Language

#	Name	Category
1	Reading	Creative
2	Writing	Creative
3	Painting	Creative
4	Photography	Creative
5	Crafting	Creative
6	Knitting	Creative
7	Sculpting	Creative
8	Filmmaking	Creative
9	Sports	Physical Activities
10	Dancing	Physical Activities

HTML Drop Down

This HTML dropdown provides a categorized list of interests and hobbies. It's ready to be included in your forms and can be easily styled to match your website's design.

HTML

<select id="interests-hobbies" name="interests-hobbies" aria-label="Select interests hobbies">
    <option value="">Select interests hobbies</option>
    <optgroup label="Creative">
        <option value="calligraphy">Calligraphy</option>
        <option value="crafting">Crafting</option>
        <option value="digital-art">Digital Art</option>
        <option value="drawing">Drawing</option>
        <option value="filmmaking">Filmmaking</option>
        <option value="graphic-design">Graphic Design</option>
        <option value="journaling">Journaling</option>
        <option value="knitting">Knitting</option>
        <option value="painting">Painting</option>
        <option value="photography">Photography</option>
        <option value="pottery">Pottery</option>
        <option value="reading">Reading</option>
        <option value="sculpting">Sculpting</option>
        <option value="sewing">Sewing</option>
        <option value="writing">Writing</option>
    </optgroup>
    <optgroup label="Physical Activities">
        <option value="backpacking">Backpacking</option>
        <option value="cycling">Cycling</option>
        <option value="dancing">Dancing</option>
        <option value="fitness">Fitness</option>
        <option value="gymnastics">Gymnastics</option>
        <option value="hiking">Hiking</option>
        <option value="martial-arts">Martial Arts</option>
        <option value="parkour">Parkour</option>
        <option value="pilates">Pilates</option>
        <option value="rock-climbing">Rock Climbing</option>
        <option value="running">Running</option>
        <option value="sports">Sports</option>
        <option value="swimming">Swimming</option>
        <option value="team-sports">Team Sports</option>
        <option value="yoga">Yoga</option>
    </optgroup>
    <optgroup label="Outdoor Activities">
        <option value="astronomy">Astronomy</option>
        <option value="bird-watching">Bird Watching</option>
        <option value="camping">Camping</option>
        <option value="fishing">Fishing</option>
        <option value="gardening">Gardening</option>
        <option value="geocaching">Geocaching</option>
        <option value="orienteering">Orienteering</option>
    </optgroup>
    <optgroup label="Travel and Culture">
        <option value="cultural-festivals">Cultural Festivals</option>
        <option value="culinary-tours">Culinary Tours</option>
        <option value="food-tasting">Food Tasting</option>
        <option value="historical-tours">Historical Tours</option>
        <option value="language-exchange">Language Exchange</option>
        <option value="museum-visits">Museum Visits</option>
        <option value="traveling">Traveling</option>
        <option value="world-cinema">World Cinema</option>
    </optgroup>
    <optgroup label="Music and Performance">
        <option value="djing">DJing</option>
        <option value="music">Music</option>
        <option value="playing-an-instrument">Playing an Instrument</option>
        <option value="singing">Singing</option>
        <option value="theater">Theater</option>
    </optgroup>
    <optgroup label="Food and Drink">
        <option value="baking">Baking</option>
        <option value="beer-brewing">Beer Brewing</option>
        <option value="cheese-tasting">Cheese Tasting</option>
        <option value="cooking">Cooking</option>
        <option value="home-brewing">Home Brewing</option>
        <option value="mixology">Mixology</option>
        <option value="wine-tasting">Wine Tasting</option>
    </optgroup>
    <optgroup label="Technology and Gaming">
        <option value="augmented-reality">Augmented Reality</option>
        <option value="coding">Coding</option>
        <option value="esports">Esports</option>
        <option value="game-development">Game Development</option>
        <option value="gaming">Gaming</option>
        <option value="robotics">Robotics</option>
        <option value="technology">Technology</option>
        <option value="virtual-reality">Virtual Reality</option>
    </optgroup>
    <optgroup label="Social and Community">
        <option value="attending-events">Attending Events</option>
        <option value="community-gardening">Community Gardening</option>
        <option value="debating">Debating</option>
        <option value="hosting-parties">Hosting Parties</option>
        <option value="joining-clubs">Joining Clubs</option>
        <option value="meeting-new-people">Meeting New People</option>
        <option value="mentoring">Mentoring</option>
        <option value="participating-in-group-sports">Participating in Group Sports</option>
        <option value="public-speaking">Public Speaking</option>
        <option value="social-activism">Social Activism</option>
        <option value="traveling-with-friends">Traveling with Friends</option>
        <option value="volunteering">Volunteering</option>
    </optgroup>
    <optgroup label="Collecting">
        <option value="antiques">Antiques</option>
        <option value="artifacts">Artifacts</option>
        <option value="coin-collecting">Coin Collecting</option>
        <option value="comic-books">Comic Books</option>
        <option value="postcards">Postcards</option>
        <option value="stamp-collecting">Stamp Collecting</option>
        <option value="vintage-toys">Vintage Toys</option>
    </optgroup>
    <optgroup label="Relaxation">
        <option value="listening-to-music">Listening to Music</option>
        <option value="meditation">Meditation</option>
        <option value="mindfulness">Mindfulness</option>
        <option value="spending-time-with-family">Spending Time with Family</option>
        <option value="watching-movies">Watching Movies</option>
    </optgroup>
    <optgroup label="Intellectual">
        <option value="debate">Debate</option>
        <option value="philosophy">Philosophy</option>
        <option value="playing-chess">Playing Chess</option>
        <option value="programming">Programming</option>
        <option value="reading-history">Reading History</option>
        <option value="science-experiments">Science Experiments</option>
        <option value="solving-puzzles">Solving Puzzles</option>
        <option value="writing-code">Writing Code</option>
        <option value="writing-essays">Writing Essays</option>
    </optgroup>
    <optgroup label="Spiritual and Metaphysical">
        <option value="astrology">Astrology</option>
        <option value="energy-healing">Energy Healing</option>
        <option value="tarot-reading">Tarot Reading</option>
    </optgroup>
</select>

Run code Edit Code Download

JavaScript Array

JavaScript Array of file format list.

This JavaScript array organizes interests and hobbies into categories. It's perfect for dynamic content generation, filtering, and client-side operations.

JavaScript

const interestsAndHobbies = [
  {
    category: "Creative",
    options: [
      "Calligraphy",
      "Crafting",
      "Digital Art",
      "Drawing",
      "Filmmaking",
      "Graphic Design",
      "Journaling",
      "Knitting",
      "Painting",
      "Photography",
      "Pottery",
      "Reading",
      "Sculpting",
      "Sewing",
      "Writing"
    ]
  },
  {
    category: "Physical Activities",
    options: [
      "Backpacking",
      "Cycling",
      "Dancing",
      "Fitness",
      "Gymnastics",
      "Hiking",
      "Martial Arts",
      "Parkour",
      "Pilates",
      "Rock Climbing",
      "Running",
      "Sports",
      "Swimming",
      "Team Sports",
      "Yoga"
    ]
  },
  {
    category: "Outdoor Activities",
    options: [
      "Astronomy",
      "Bird Watching",
      "Camping",
      "Fishing",
      "Gardening",
      "Geocaching",
      "Orienteering"
    ]
  },
  {
    category: "Travel and Culture",
    options: [
      "Cultural Festivals",
      "Culinary Tours",
      "Food Tasting",
      "Historical Tours",
      "Language Exchange",
      "Museum Visits",
      "Traveling",
      "World Cinema"
    ]
  },
  {
    category: "Music and Performance",
    options: [
      "DJing",
      "Music",
      "Playing an Instrument",
      "Singing",
      "Theater"
    ]
  },
  {
    category: "Food and Drink",
    options: [
      "Baking",
      "Beer Brewing",
      "Cheese Tasting",
      "Cooking",
      "Home Brewing",
      "Mixology",
      "Wine Tasting"
    ]
  },
  {
    category: "Technology and Gaming",
    options: [
      "Augmented Reality",
      "Coding",
      "Esports",
      "Game Development",
      "Gaming",
      "Robotics",
      "Technology",
      "Virtual Reality"
    ]
  },
  {
    category: "Social and Community",
    options: [
      "Attending Events",
      "Community Gardening",
      "Debating",
      "Hosting Parties",
      "Joining Clubs",
      "Meeting New People",
      "Mentoring",
      "Participating in Group Sports",
      "Public Speaking",
      "Social Activism",
      "Traveling with Friends",
      "Volunteering"
    ]
  },
  {
    category: "Collecting",
    options: [
      "Antiques",
      "Artifacts",
      "Coin Collecting",
      "Comic Books",
      "Postcards",
      "Stamp Collecting",
      "Vintage Toys"
    ]
  },
  {
    category: "Relaxation",
    options: [
      "Listening to Music",
      "Meditation",
      "Mindfulness",
      "Spending Time with Family",
      "Watching Movies"
    ]
  },
  {
    category: "Intellectual",
    options: [
      "Debate",
      "Philosophy",
      "Playing Chess",
      "Programming",
      "Reading History",
      "Science Experiments",
      "Solving Puzzles",
      "Writing Code",
      "Writing Essays"
    ]
  },
  {
    category: "Spiritual and Metaphysical",
    options: [
      "Astrology",
      "Energy Healing",
      "Tarot Reading"
    ]
  }
];

Usage Example

Use this array to create dynamic dropdown menu

HTML

<select id="interests-hobbies">
  <option value="">Select interests hobbies</option>
</select>

javaScripr

const interestsSelect = document.getElementById("interests-hobbies");
// Populate dropdown
interestsAndHobbies.forEach(group => {
    const optgroup = document.createElement("optgroup");
    optgroup.label = group.category;

    group.options.forEach(option => {
        const optionElement = document.createElement("option");
        optionElement.value = option.toLowerCase().replace(/\s+/g, '-');
        optionElement.textContent = option;
        optgroup.appendChild(optionElement);
    });

    interestsSelect.appendChild(optgroup);
});

Try it your self Real Time Preview

Download Edit Code

PHP Array

Array of interests and hobbies

This PHP array mirrors the structure of the JavaScript array. It's ideal for server-side processing, database operations, and generating dynamic HTML.

PHP

<?php
$interestsAndHobbies = [
    [
        'category' => 'Creative',
        'options' => ['Calligraphy','Crafting','Digital Art','Drawing','Filmmaking','Graphic Design','Journaling','Knitting','Painting','Photography','Pottery','Reading','Sculpting','Sewing','Writing']
    ],
    [
        'category' => 'Physical Activities',
        'options' => ['Backpacking','Cycling','Dancing','Fitness','Gymnastics','Hiking','Martial Arts','Parkour','Pilates','Rock Climbing','Running','Sports','Swimming','Team Sports','Yoga']
    ],
    [
        'category' => 'Outdoor Activities',
        'options' => ['Astronomy','Bird Watching','Camping','Fishing','Gardening','Geocaching','Orienteering']
    ],
    [
        'category' => 'Travel and Culture',
        'options' => ['Cultural Festivals','Culinary Tours','Food Tasting','Historical Tours','Language Exchange','Museum Visits','Traveling','World Cinema']
    ],
    [
        'category' => 'Music and Performance',
        'options' => ['DJing','Music','Playing an Instrument','Singing','Theater']
    ],
    [
        'category' => 'Food and Drink',
        'options' => ['Baking','Beer Brewing','Cheese Tasting','Cooking','Home Brewing','Mixology','Wine Tasting']
    ],
    [
        'category' => 'Technology and Gaming',
        'options' => ['Augmented Reality','Coding','Esports','Game Development','Gaming','Robotics','Technology','Virtual Reality']
    ],
    [
        'category' => 'Social and Community',
        'options' => ['Attending Events','Community Gardening','Debating','Hosting Parties','Joining Clubs','Meeting New People','Mentoring','Participating in Group Sports','Public Speaking','Social Activism','Traveling with Friends','Volunteering']
    ],
    [
        'category' => 'Collecting',
        'options' => ['Antiques','Artifacts','Coin Collecting','Comic Books','Postcards','Stamp Collecting','Vintage Toys']
    ],
    [
        'category' => 'Relaxation',
        'options' => ['Listening to Music','Meditation','Mindfulness','Spending Time with Family','Watching Movies']
    ],
    [
        'category' => 'Intellectual',
        'options' => ['Debate','Philosophy','Playing Chess','Programming','Reading History','Science Experiments','Solving Puzzles','Writing Code','Writing Essays']
    ],
    [
        'category' => 'Spiritual and Metaphysical',
        'options' => ['Astrology','Energy Healing','Tarot Reading']
    ]
];
?>

Usage Example PHP Array

Here is a quick example of how you might use this array to generate an HTML select option

PHP

<?php
$selectOption = '';
// create dropdown
foreach ($interestsAndHobbies as $group) {
    $selectOption .= '<optgroup label="' . htmlspecialchars($group['category']) . '">';

    foreach ($group['options'] as $option) {
        $value = strtolower($option);
        $value = preg_replace('/\s+/', '-', $value);
        $text = htmlspecialchars($option);
        $selectOption .= '<option value="' . $value . '">' . $text . '</option>'.PHP_EOL;
    }

    $selectOption .= '</optgroup>'.PHP_EOL;
}
?>

<select id="interests-hobbies">
  <?php echo $selectOption ?>
</select>

Download

Use Cases

The Interests and Hobbies code snippets are useful in many web development situations. Here are some common uses:

User Profile Creation
Event Management Systems
Educational websites
Job Boards and Professional Networks
Survey and Market Research Tools

Report Problem