HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!DOCTYPE html>
<html>
<body>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2436099/formkeep%20275x92.png' alt='formkeep logo'>
<h3>Sample Form Template | FormKeep</h3>
<br>
<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST" target="_blank" class="container">
<!-- For detailed information check out these two sites
https://www.w3schools.com/tags/att_input_type.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types
-->
<!-- type="text" A single-line text field. Line-breaks are automatically removed from the input value.
placeholder="Your name..." is a great way to hint to the customer what kind of
value you're expecting in the field and will not be submitted when they submit the form.
-->
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="John Smith"><br><br>
<!-- type="email" a field for editing an e-mail address. -->
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="john@example.com"><br><br>
<!-- type="tel" on mobile devices will bring up a phone keyboard -->
<label for="tel">Phone Number</label>
<input type="tel" id="tel" name="tel" placeholder="555-123-4567"><br><br>
<!-- textarea is a multi-line plain-text editing control, useful when you want to
allow users to enter a sizeable amount of free-form text.
-->
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Reason for contacting us" rows="5"></textarea><br><br>
<!-- https://formkeep.com/guides/checkboxes-for-negative-or-multiple-answers
By supplying a hidden "no" value with the same name as the checkbox, we will
always get a "no" or "yes" value. Without that the subscribe value will not
be sent if the field is unchecked.
-->
<input type="hidden" name="subscribe" value="no">
<label for="checkbox"><input type="checkbox" id="checkbox" name="subscribe" value="yes" checked>Subscribe to our newsletter
</label><br><br>
<!-- force older browsers to submit your form data as UTF8. It helps ensure all submissions to your form will be encoded the same way.
See https://intercom.help/formkeep/frequently-asked-questions/why-do-you-include-the-utf8-hidden-field-in-your-example-forms
-->
<input type="hidden" name="utf8" value="✓">
<!-- There are certain names for common fields that browers will treat specially
and autofill values for the user automatically. If you can use these names for
your fields you should. See the url below for more detailed information about them
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
"name"
"organization-title"
"organization"
"street-address"
"address-line1"
"address-line2"
"address-line3"
"address-level4"
"address-level3"
"address-level2"
"address-level1"
"country"
"country-name"
"email"
"postal-code"
"language"
"bday"
"bday-day"
"bday-month"
"bday-year"
"sex"
"tel"
"tel-extension"
"url"
-->
<button type="submit">Submit</button>
<button type="reset">Clear Values</button>
</form>
<br><br><br><hr><br>
<b><i>See information below for additional HTML elements you can cut and paste and incorporate into your form.</i></b>
<h3>Extra Form Elements You Can Cut and Paste and Use</h3>
<!-- type="radio" A radio button, allowing a single value to be selected out of multiple choices.
give them all the same "name" to indicate which ones go together. You can use the 'checked'
attribute to default a value when the form is loaded.
-->
<fieldset>
<legend>Saluation</legend>
<label><input type="radio" id="mr" value="mr" name="saluation">Mr</label>
<label><input type="radio" id="mrs" value="mrs" name="saluation">Mrs</label>
<label><input type="radio" id="ms" value="ms" name="saluation">Ms</label>
<label><input type="radio" id="none" value="none" name="saluation" checked>None</label>
</fieldset><br>
<!-- datalist elements allow you to specify some values, but also allow them to type any value
they'd like. the list="organization-title" and id="organization-title" need to match for this to
work properly. The id="title" should be different than the id of the datalist.
-->
<label for="organization-title">Job Title</label>
<input list="organization-title" id="title" name="title">
<datalist id="organization-title">
<option value="Manager">
<option value="Product Manager">
<option value="Engineer">
<option value="Marketing Manager">
<option value="Support Operations">
</datalist><br><br>
<!-- type="date" is a control for entering a date (year, month, and day, with no time). -->
<label for="date">What day should we contact you?</label>
<input type="date" id="date" name="date"><br><br>
<!-- type="time" is a control for entering a time value with no time zone. -->
<label for="time">What's the best time to contact you?</label>
<input type="time" id="time" name="time"><br><br>
<!-- type="url" is a field for entering a URL. example.com is a good placeholder for urls and emails -->
<label for="url">What website can we help you with?</label>
<input type="url" id="url" name="url" placeholder="https://example.com"><br><br>
<!-- You can use a select element for the same purpose as a radio, for larger lists
this is generally considered the better choice. You can use the 'selected'
attribute to default a value when the form is loaded.
-->
<label for="country">Country</label>
<select name="country">
<option value="">Country...</option>
<option value="BT">Bhutan</option>
<option value="BL">Bonaire</option>
<option value="BR">Brazil</option>
<option value="CA">Canada</option>
<option value="KY">Cayman Islands</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="GB">Great Britain</option>
<option value="GR">Greece</option>
<option value="IN">India</option>
<option value="IT">Italy</option>
<option value="JP">Japan</option>
<option value="NZ">New Zealand</option>
<option value="TW">Taiwan</option>
<option value="GB">United Kingdom</option>
<option value="US">United States of America</option>
</select><br><br>
<!-- type="number" is a control for entering a number. -->
<label for="number">What is the overall budget for this project?</label>
<input type="number" id="number" name="number"><br><br>
<!-- https://formkeep.com/guides/checkboxes-for-negative-or-multiple-answers
You can allow multiple selected values to the same name by adding a [] to the end of the name
-->
<fieldset>
<legend>Check all that apply</legend>
<label><input type="checkbox" name="help_needs[]" value="help_ux">UX Design</label><br>
<label><input type="checkbox" name="help_needs[]" value="help_business">Business Process Design</label><br>
<label><input type="checkbox" name="help_needs[]" value="help_backend">Backend Server</label><br>
<label><input type="checkbox" name="help_needs[]" value="help_all">Full Product Developement</label><br>
</fieldset><br>
<!-- type="month" is a control for entering a month and year, with no time zone. -->
<label for="month">Approximately when will this project be due?</label>
<input type="month" id="month" name="month"><br><br>
<!-- type="color" is a control for specifying a color. It will return the html hex color value -->
<label for="color">What is the color theme for this project?</label>
<input type="color" id="color" name="color"><br><br>
<!-- type="range" is a control for entering a number whose exact value is not important.
It displays a simple slider to allow the user to choose.
-->
<label for="range">How likely is it that you would recommend us to a friend or colleague?</label>
<input type="range" id="range" name="range" min="0" max="10"><br><br>
</body>
</html>
/* Setup a reasonable default font */
body {
font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif
}
/* Style all select, textareas and input types except color, radio, checkbox */
input:not([type=color]):not([type=radio]):not([type=checkbox]), select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
}
/* Style textarea elements */
textarea {
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* increase the size of the select element to match others */
select {
height: 4em;
}
/* add some space between the radio options*/
input[type=radio] {
margin-left: 10px;
margin-right: 5px;
}
/* add some space between the checkbox options*/
input[type=checkbox] {
margin-right: 10px;
}
/* Style the submit button with a specific background color etc */
button[type=submit] {
background-color: #14b2cf;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
/* When moving the mouse over the submit button, add a darker color */
button[type=submit]:hover {
background-color: #1091A9;
}
/* Style the reset button with a specific background color etc */
button[type=reset] {
background-color: #ddd;
color: #cd4747;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
/* When moving the mouse over the submit button, add a darker color */
button[type=reset]:hover {
background-color: #A72600;
color: white;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
Also see: Tab Triggers