Hitching a Ride on the huMONGOus Meteor, Part 4 of 9

B. Clay Shannon

0.00/5 (No votes)

8 Aug 2015CPOL1 min read

5.2K

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."