htmlformsskeleton-css-boilerplate

How to send form using Skeleton Boilerplate


I am using Skeleton right out of the box, and doing a very simple landing page.

I am using the form style provided on their website sample (http://getskeleton.com/#forms):

    <!-- The above form looks like this -->
<form>
  <div class="row">
    <div class="six columns">
      <label for="exampleEmailInput">Your email</label>
      <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
    </div>
    <div class="six columns">
      <label for="exampleRecipientInput">Reason for contacting</label>
      <select class="u-full-width" id="exampleRecipientInput">
        <option value="Option 1">Questions</option>
        <option value="Option 2">Admiration</option>
        <option value="Option 3">Can I get your number?</option>
      </select>
    </div>
  </div>
  <label for="exampleMessage">Message</label>
  <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
  <label class="example-send-yourself-copy">
    <input type="checkbox">
    <span class="label-body">Send a copy to yourself</span>
  </label>
  <input class="button-primary" type="submit" value="Submit">
</form>

<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->

<!-- Note: The class .u-full-width is just a utility class shorthand for width: 100% -->

But I am not seeing where I control where the form is sent to upon submit.

Can someone explain how I can send a form using Skeleton?

Sorry for the stupid question, but I am lost.

Thanks, Melvins


Solution

  • I believe that they're just giving you the layout html and css. You need to provide either an action attribute (action='myurl') or id (id='myform') to the form element. Here's a simple example just using the action attribute:

    <p>Click 'Submit' to send the input name to 'myform.php'</p>
    <form action="myform.php">
      Name: <input type="text" name="name">
      <input type="submit">
    </form>

    Better, you can use jQuery or javascript to set up an event handler that will detect a click on the button and send your form input data wherever you like:

    $( "#myform" ).submit(function( event ) {
      alert( "name data sent to myform.php" );
      $.post( "myform.php" );
      event.preventDefault();
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <p>Click 'Submit' to send the input name to 'myform.php'</p>
        <form id="myform">
          Name: <input type="text" name="name">
          <input type="submit">
        </form>