lundi 29 juin 2015

How to output multiple fields to a single page


I am looking to output text from multiple fields to a single page so that I can just copy and paste it. I made a basic HTML document with fields and I just want to hit submit and have it output all of the information condensed into one page all together. This is what I have

<style>
form {
  padding-top: 30px;
  min-width: 458px;
  > div,
  > fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 8px 0;
    clear: both;
  }
  label,
  legend {
    float: left;
    width: 50px;
    padding: 7px 10px;
    &.radio-label {
      float: none;
      padding: 0;
    }
  }
  .choice-group {
    padding: 7px 10px 0 10px;
  }
  input[type=checkbox],
  input[type=radio] {
    margin-right: 20px;
  }
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  textarea {
    width: 200px;
    border: 1px solid darken(tan, 20%);
    padding: 7px 10px;
    border-radius: 4px;
    outline: 0;
    &:focus {
      border-color: black;
    }
    &.short {
      width: 60px;
    }
    &.medium {
      width: 150px;
    }
    &.very-short {
      width: 40px;
    }
    &.long {
      width: 300px;
    }
  }
}

.screen-reader {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

body {
  background: #E27C37;
  padding: 20px;
  font-size: small;
}
</style>
<h1>Prefill Machine</h1>

<form action="#0" id="form">

  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Digby Coyier" required>
  </div>

  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="digby@digby.com" required>
  </div>

  <div>
    <label for="name">Username</label>
    <input type="text" name="username" id="username" placeholder="digby2007" required>
  </div>

  <div>
    <label for="name">Password</label>
    <input type="password" name="pw" id="pw" required>
  </div>

  <div>
    <label for="name">Repeat</label>
    <input type="password" name="pw-repeat" id="pw-repeat" required>
  </div>


  <fieldset>
    <legend>Radio Choice</legend>

    <div class="choice-group">
      <label class="radio-label" for="radio-choice-1">Choice 1</label>
      <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />

      <label class="radio-label" for="radio-choice-2">Choice 2</label>
      <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
    </div>
  </fieldset>

  <div>
    <label for="select-choice">Select Choice</label>
    <div class="choice-group">
      <select name="select-choice" id="select-choice">
        <option value="Choice 1">Choice 1</option>
        <option value="Choice 2">Choice 2</option>
        <option value="Choice 3">Choice 3</option>
      </select>
    </div>
  </div>

  <div>
    <label for="message">Message</label>
    <textarea cols="40" rows="8" name="message" id="message"></textarea>
  </div>

  <div>
    <label for="cc">Credit Card #</label>
    <input type="text" name="cc" id="cc" placeholder="4242 4242 4242 4242" required>
  </div>

  <div>
    <label for="exp-1">Expiration <span class="screen-reader">Month</span></label>
    <input class="very-short" type="number" name="exp-1" id="exp-1" placeholder="08" min="1" max="12">
    <label for="exp-2" class="screen-reader">Expiration Year</label>
    <input type="number" name="exp-2" class="very-short" id="exp-2" placeholder="16" min="14">
  </div>

  <div>
    <label for="exp-1">CVV</label>
    <input class="short" type="text" name="cvv" id="cvv" placeholder="123">
  </div>

  <div>
    <label for="name">Address</label>
    <input type="text" class="long" name="address" id="address" placeholder="123 Super Street">
  </div>

  <div>
    <label for="city">&nbsp;<span class="screen-reader">City<span></label>
    <input type="text" name="city" id="city" class="medium"  placeholder="Milwaukee">
    <label for="state" class="screen-reader">State</label>
    <input type="text" name="state" class="very-short" id="state" placeholder="WI">
    <label for="zip" class="screen-reader">Zip</label>
    <input type="text" name="zip" class="short" id="zip" placeholder="55555" pattern="(\d{5}([\-]\d{4})?)" required>
  </div>

  <div>
    <label for="agree-terms">Agree?</label>
    <div class="choice-group">
      <input type="checkbox" name="agree-terms" id="agree-terms">
    </div>
  </div>

  <div>
    <input type="submit" value="Submit" id="submit-button">
  </div>
</form>

I want the page to fill in everything when I click submit so I will look like the following:

Name: John Smith
Email: John.Smith@mail.com
USERNAME: JSMith
Password:123456
Choice 1

And so on

This way I can just copy and paste it all into an email or a text file.


Aucun commentaire:

Enregistrer un commentaire