Partystreusel

Input Types 

<p>
      <label for="text">text Input</label>
      <input id="text" type="text" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="password">password Input</label>
      <input id="password" type="password" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="url">url Input</label>
      <input id="url" type="url" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="email">email Input</label>
      <input id="email" type="email" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="tel">tel Input</label>
      <input id="tel" type="tel" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="time">time Input</label>
      <input id="time" type="time" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="date">date Input</label>
      <input id="date" type="date" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="datetime">datetime Input</label>
      <input id="datetime" type="datetime" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="month">month Input</label>
      <input id="month" type="month" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="week">week Input</label>
      <input id="week" type="week" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="number">number Input</label>
      <input id="number" type="number" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="search">search Input</label>
      <input id="search" type="search" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="hidden">hidden Input</label>
      <input id="hidden" type="hidden" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="color">color Input</label>
      <input id="color" type="color" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="range">range Input</label>
      <input id="range" type="range" placeholder="Lorem ipsum">
  </p>
  <p>
      <label for="file">file Input</label>
      <input id="file" type="file" placeholder="Lorem ipsum">
  </p>

  <p>
      With required:
  </p>
  <p>
      <label for="required">Required Field <abbr title="Required">*</abbr></label>
      <input id="required" type="text" required placeholder="This field is required">
  </p>
  <p>
      <label for="textarea">Textarea</label>
      <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
  </p>
 
{{#each input-types}}
  <p>
    <label for="{{this}}">{{this}} Input</label>
    <input id="{{this}}" type="{{this}}" placeholder="Lorem ipsum">
  </p>
{{/each}}

<p>
  With required:
</p>
<p>
  <label for="required">Required Field <abbr title="Required">*</abbr></label>
  <input id="required" type="text" required placeholder="This field is required">
</p>
<p>
  <label for="textarea">Textarea</label>
  <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>
 
{
  "input-types": [
    "text",
    "password",
    "url",
    "email",
    "tel",
    "time",
    "date",
    "datetime",
    "month",
    "week",
    "number",
    "search",
    "hidden",
    "color",
    "range",
    "file"
  ]
}

There are no notes for this item.