Can I teach myself to make this HTML form?
July 24, 2015 8:57 AM   Subscribe

I want to build a simple (?) HTML form that will generate, from user selections, a line of text that a user can then copy to the clipboard. This would make workflow easier for myself and about a dozen of my colleagues, and also reduce spelling errors.

The thing I want to make is not a grocery list, but that's a good analogy. Only one store can be selected, but multiple grocery items may. A feature I'd very much like to have, but which isn't strictly necessary, would be to check a box for a finished recipe and have the list generate the ingredients for the recipe (which ingredients could also be selected individually).

I have the very most rudimentary knowledge of HTML (like seriously, I can add formatting and tables and stuff, but that's about it) but am willing to teach myself how to build something like this, but given my lack of knowledge I don't even know whether that is realistic.

QUESTION: Given the example below illustrating the input and output I want to achieve, is this something I could teach myself to make? If so, what HTML elements would I need to learn? Any tutorials or beginner sites you like would be especially helpful.

Here is an example of the way the selected radio buttons "( )" and check boxes "[ ]" might look, and the output I want to see from the selections:

Type of List
( ) Aldi list
(.) Whole Foods list
( ) Trader Joe's list

Items
[ ] Green apples
[X] Red apples
[X] Skim milk
[ ] Eggs
[ ] Cheese
[ ] Butter
[X] Cheese omelettes

Output:

WholeFoodsList: RedApples SkimMilk Eggs Cheese Butter
posted by mama casserole to Computers & Internet (6 answers total) 9 users marked this as a favorite
 
I think this might get you started.
posted by beagle at 9:10 AM on July 24, 2015


How soon do you want it and how long are you willing to spend learning on how to do it? If there is no rush and it's a learning exercise then here is a list of things you would need to know to make this work for you.

Database for form information. This could be a typical SQL server or a noSQL server or something like a google doc even. Depends on what you want to do with with the information afterwards and where it is going.
Backend api that sends the form information to the database location. You'll need to learn a server side language such as ruby, python, php, javascript, etc.
Design the front end of the form you will probably need to use a bit of javascript to do dynamic things and capture the information from the fields and send them along to the api.

You could start here with these intros to get some of the basics of how to design a form and grab the information on submit and see it in the console. Then from there move on to doing something with the data.

https://www.codecademy.com/tracks/javascript
https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-html/p/html-basics#
posted by andendau at 9:38 AM on July 24, 2015 [1 favorite]


I would use Javascript to do this. I actually made something pretty conceptually similar (link in profile).

My version is complex than you're looking for (creating a link to email, save to Google Docs). You'd just want to output to a text area.

I'm not a programmer (marketing writer represent) but here's what I did:
  • Worked through HTML/CSS, Javascript, jQuery Codecademy lessons
  • Started building what I wanted.
  • Google as soon as I got stuck.
  • Usually ended up on Stack Overflow that had exactly what I was looking for
  • Keep going until I got stuck again and repeat.
Eventually I had something that worked and I was happy with.
posted by paulcole at 9:41 AM on July 24, 2015 [2 favorites]


No need for SQL or anything like that. You can do what you want in a webpage with Javascript. There are plenty of basic tutorials that should give you enough basic knowledge to be able to search for what you need. Alternately, someone with the appropriate knowledge could do this in an hour.

If the lists were going to change often, I would consider using Google Apps Script with a Google Spreadsheet holding the lists, just to make it easier to change them.
posted by ssg at 10:27 AM on July 24, 2015


Best answer: This can be very simple if you want to make it simple. You will need some basic html and some basic javascript (jquery might be simplest).

You need to know inputs (of the types: checkbox, radio, and button). And something to contain the text like a label. And you need to know some javascript to handle what happens when you click the button.

You don't really need a database for this unless you find yourselves constantly changing the "Items" or "Types of Lists"

(Really it could be this simple: https://jsfiddle.net/t0xjejhq)
posted by czytm at 10:29 AM on July 24, 2015 [5 favorites]


Response by poster: Aaaand five answers later, I not only feel like I can do this, but I have a framework to work from, along with resources to consult when I get stuck or want to learn more.

Best answer to czytm for getting me started with a model that's so close to what I need, but all answers were helpful. Thank you!
posted by mama casserole at 11:22 AM on July 24, 2015


« Older The Handyman Can (Maybe Charge Too Much)?   |   What is this book about girls in love, aliens, and... Newer »
This thread is closed to new comments.