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