EventLoop | HTML Input Elements

eventloop-html-input-elements.markdown

EventLoop | HTML Input Elements

A Pen by Kostas X on CodePen.

License.

index.html

<table>

        <thead>
                <tr>
                  <th colspan="4"><h2>HTML5 Input Types</h2></th>
                </tr>
              </thead>
      
        <tr>
          <th>Type</th>
          <th>Output</th>
          <th>Copy</th>
          <th>Code</th>
        </tr>
                
        <!-- type="text" -->
        <tr>
          <td>&lt;input type="text" /&gt;</td>
          <td>
            <input type="text" name="username" placeholder="Enter text" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
        <!-- type="password" -->
        <tr>
          <td>&lt;input type="password" /&gt;</td>
          <td>
            <input type=password name="password"/>
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
                
        <!-- type="checkbox" -->
        <tr>
          <td>&lt;input type="checkbox" /&gt;</td>
          <td>
            <input checked=true type="checkbox" id="check"  />
            <label for="check">I Agree:</label>
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
      
          <!-- type="radio" -->
        </tr>
                
        <!-- type="radio" -->
        <tr>
          <td>&lt;input type="radio" /&gt;</td>
          <td>
            <input type="radio" id="brand" name="brand"/>
            <label for="brand">Linux</label>
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
        <!-- type="button" -->
        <tr>
          <td>&lt;input type="button" /&gt;</td>
          <td>
            <input type="button" name="send" value="Send" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
        <!-- type="submit" -->
        <tr>
          <td>&lt;input type="submit" /&gt;</td>
          <td>
            <input type="submit" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
        <!-- type="reset" -->
        <tr>
          <td>&lt;input type="reset" /&gt;</td>
          <td>
            <input type="reset" value="Reset form" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
        <!-- type="file" -->
        <tr>
          <td>&lt;input type="file" /&gt;</td>
          <td>
            <input type="file" name="cv" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
        <!-- type="hidden" -->
        <tr>
          <td>&lt;input type="hidden" /&gt;</td>
          <td>
            <input type="hidden" name="enabled" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
                
        <!-- type="image" -->
        <tr>
          <td>&lt;input type="image" /&gt;</td>
          <td>
            <input type="image" width="140px" src="https://stickeroid.com/uploads/pic/full-pngmart/4da657659d41559216e05239d4601e6b21a7f3dd.png"/>
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
        <!-- type="datetime-local" -->
        <tr>
          <td>&lt;input type="datetime-local" /&gt;</td>
          <td>
            <input type="datetime-local" name="booking" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="date" -->
        <tr>
          <td>&lt;input type="date" /&gt;</td>
          <td>
            <input type="date" name="arrivale_date" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="month" -->
        <tr>
          <td>&lt;input type="month" /&gt;</td>
          <td>
            <input type="month" name="book_month" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="time" -->
        <tr>
          <td>&lt;input type="time" /&gt;</td>
          <td>
            <input type="time" name="appointment_time" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="week" -->
        <tr>
          <td>&lt;input type="week" /&gt;</td>
          <td>
            <input type="week" name="booking_week" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="number" -->
        <tr>
          <td>&lt;input type="number" /&gt;</td>
          <td>
            <input type="number" name="persons" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="range" -->
        <tr>
          <td>&lt;input type="range" /&gt;</td>
          <td>
            <label for="range">Volume</label>
            <input type="range" min="0" max="10" value="5" id="range"/>
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="email" -->
        <tr>
          <td>&lt;input type="email" /&gt;</td>
          <td>
            <input type="email" placeholder="your@email.here" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="url" -->
        <tr>
          <td>&lt;input type="url" /&gt;</td>
          <td>
            <input type="url" name="yoursite" placeholder="Your site URL" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="search" -->
        <tr>
          <td>&lt;input type="search" /&gt;</td>
          <td>
            <label for="search">Search site:</label>
            <input type="search" name="search" id="search" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="tel" -->
        <tr>
          <td>&lt;input type="tel" /&gt;</td>
          <td>
            <input type="tel" name="phone" placeholder="Your phone" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
      
          <!-- type="color" -->
        <tr>
          <td>&lt;input type="color" /&gt;</td>
          <td>
            <input type="color" name="theme" />
          </td>
          <td><button>Copy Code</button></td>
          <td><textarea name="" rows="2"></textarea></td>
        </tr>
  <tfoot>
    <tr>
      <td colspan="4">Click on an element in the <strong>Type</strong> Column to be taken to a Reference page for the selected input element</td>
    </tr>
  </tfoot>           
  
      </table>

script.js

console.clear();
// Copy Code to Clipboard
let clipboard = new ClipboardJS( 'button', {
    text: function( trigger ) {
      return trigger.parentElement.previousElementSibling.innerHTML.trim();
    }
});

clipboard.on('success', function(e) {
  e.trigger.style.backgroundColor = "limegreen";
  e.trigger.textContent = "Copied!";
  setTimeout(function(){
    e.trigger.style.backgroundColor = "gray";
    e.trigger.textContent = "Copy Code";
  }, 2000 );
    e.clearSelection();
});

document
.querySelectorAll("input")
.forEach(function($input){

  $input.parentElement.nextElementSibling.nextElementSibling.firstChild.value = $input.parentElement.innerHTML.trim();

});

document.querySelectorAll("td:nth-child(1)").forEach(function($td){
  $td.addEventListener("click", function(e){
  let split = e.target.textContent.match(/type="([a-zA-Z-]+)"/);
  window.open( "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/"+split[1], "_blank");
  })
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

style.css

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}
thead h2 {
  margin: 0;
}
thead th {
  background: indigo;
  color: white;
}
th {
  background: #dfdfdf;
  padding: 15px;
}
table { 
  margin: 0 auto;
  padding: 15px;
}
td:nth-child(3),
td:nth-child(2),
td:nth-child(1) {
  text-align: center;
  padding: 2px 8px;
}
td:nth-child(2){
  border-bottom: 1px solid #ddd;
}
td:nth-child(1){
  min-width: 200px;
  cursor: pointer;
  transition: all 300ms ease;
  font-family: courier;
  font-size: 0.9em;
  border: none;
  text-align:center;
  background: #f2f2f2;
}
td:nth-child(1):hover{
  background: gray;
  color: white;
}

button {
  cursor: pointer;
  background-color: gray;
  color: white;
  border: none;
  padding: 15px 6px;
  font-size: 0.9em;
  width: 80px;
}
textarea {
  background: #f0f0f0;
  font-size: 0.9em;
  font-family: courier;
  width: 400px;
  padding: 10px;
  border: none;
}
table tfoot td {
  padding: 20px !important;
  background-color: orange !important;
}