Coding User Guided or Selected Values in HTML

HTML-CSS
1

I’m creating a number of data entry forms that will frontend my website. All of the forms include city/county/state/country elements. I’d like to constrain values for state and country to those values published by the USPS. I haven’t tried to do that for countries (it’s a long list) but I have incorporated the state list in <option> tag pairs that I used with <select> tag pairs. This is cluttering my code. Adding country lists will add hundreds of lines of code for each instance across several forms.

Is there a way to create a list external to the inline code and link to it from HTML? I’m thinking something along the lines of using link . . . to put CSS in a separate file or files.

I remember reading that there are 2 ways to present users with the means of choosing data. One used the <select> tags but I cannot remember the other HTML keyword and cannot find it searching. The other method presents the entry panel and uses something like type-ahead as users type, presenting values from a programmed list. This is the technique I’d like to use for the names of countries, but cannot find the keyword I need.

Thanks for any help.

2

Hi @ahraitch

You could use JavaScript.
Add the list of countries names to an array.
Then use the .map() method to populate each country name in an option element. This way you can reuse the JS code anywhere you want.

Happy coding

1 Like
3

Thank you for removing the blinders.

I should have known that frontend scripting with Javascript would take care of this. I get tunnel vision, these days, it seems. I’ve been totally focused on HTML/CSS and SQL and have ignored javascript.

Thanks for the wake up call.

1 Like