Skip to content

HTML.md

Latest commit

 

History

History
85 lines (62 loc) · 2.02 KB

HTML.md

File metadata and controls

85 lines (62 loc) · 2.02 KB
Raw

Awesome HTML Tips Awesome

Contents

HTML Native Search

<div class="wrapper">
  <h1>
    Native HTML Search
  </h1>
  
  <input list="items">
  
  <datalist id="items">
    <option value="Marko Denic">
    <option value="FreeCodeCamp">
    <option value="FreeCodeTools">
    <option value="Web Development">
    <option value="Web Developer">
  </datalist>
</div>

Link to Codepen

Fieldset Element

You can use

element to group several controls as well as labels () within a web form.

<form>
  <fieldset>
    <legend>Choose your favorite language</legend>

    <input type="radio" id="javascript" name="language">
    <label for="javascript">JavaScript</label><br/>

    <input type="radio" id="python" name="language">
    <label for="python">Python</label><br/>

    <input type="radio" id="java" name="language">
    <label for="java">Java</label>
  </fieldset>
</form>

Link to Codepen

Window Opener

Pages opened with target=”_blank” allow the new page to access the original’s window.opener. This can have security and performance implications. Include rel=”noopener” or rel=”noreferrer” to prevent this.

<a href="https://freecodetools.org" target="_blank" rel="noopener">
  Free Code Tools
</a>

Base Element

If you want to open all links in the document in a new tab, you can use element:

<head>
   <base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
  This link will be opened in a new tab: &nbsp;
  <a href="https://freecodetools.org/">
    Free Code Tools
  </a>
</div>

Link to Codepen