Hitching a Ride on the huMONGOus Meteor, Part 4 of 9
0/5 (0 vote)
Part 4 of the 9-part series "As the Meteor Blazes" - Creating the HTML to Receive Input from the User
You Can't be Everywhere and Save Everybody
To prepare for saving data to the TimeAndSpace collection, we should first create a form on the page that can be submitted.
So let's add some HMTL to the project's *.hmtl file, so that it looks like this:
<head>
<title>timeandspace</title>
</head>
<body>
<h1>A List of the Places I Have Lived</h1>
{{> addTimeSpaceForm}}
</body>
<template name="addTimeSpaceForm">
<form>
<label for="city">City</label>
<input type="text" name="city" id="city">
<br/>
<label for="state">State</label>
<input type="text" name="state" id="state">
<br/>
<label for="yearin">Year Arrived</label>
<input type="text" name="yearin" id="yearin">
<br/>
<label for="yearout">Year Departed</label>
<input type="text" name="yearout" id="yearout">
<br/>
<input type="submit" name="insertdocument" id="insertdocument" value="Add Place Lived">
</form>
</template>
And here's what it looks like in the browser now:
Are You Using Steroids?
This is indeed 9X uglier than a bag of butts, but what we're focusing on right now is getting ready to add some documents (rows) to the collection (table), so for now this will do. Later, we'll add some gingerbread (CSS) to make it look better.
That gets us to the point where we're ready to add the code to put data entered on the form in the collection. We will take up with that in the next installment of "As the Meteor Blazes."
All Articles in the Series "Hitching a Ride on the HuMONGOus Meteor" (or, "As the Meteor Blazes")
PART 2: Making changes to the default HTML
PART 3: Creating a MongoDB Collection
PART 4: Creating the HTML to Receive Input from the User
PART 6: Reading MongoDB Data and Displaying it on the page
PART 7: Gussying up/spiffifying the page with HTML and CSS