HTML5 controls

<!-- Details & Summary -->
<details>
    <summary>Sample</summary>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur repellendus obcaecati quaerat architecto. Harum doloremque repellendus vitae odio officia architecto voluptatibus quae quaerat, magnam delectus? Dolore cupiditate voluptates suscipit explicabo.
    </div>
</details>

<!-- Input -->
<input type="color">
<input type="range" value="2" min="0" max="3">
<input type="date">
<input type="time">
<input type="datetime-local">

<!-- Meter -->
<meter value="30" min="0" max="100"></meter>

<!-- Progress -->
<progress></progress>
<progress value="1" max="10"></progress>

<!-- Datalist -->
<input type="text" list="suggestions" placeholder="Car Search">
<datalist id="suggestions">
    <option value="Honda">Honda</option>
    <option value="Subaru">Subaru</option>
    <option value="Toyota">Toyota</option>
    <option value="Other">Other</option>
</datalist>

<!-- Option Groups -->
<select>
    <optgroup label="Member">
        <option value="Dashboard">Dashboard</option>
        <option value="Profile">Profile</option>
    </optgroup>
    <optgroup label="Admin">
        <option value="Security">Security</option>
        <option value="Settings">Settings</option>
    </optgroup>
</select>

Source: youtube.com

Similar codes

9 votes334 views3 answers
Solid black line css
Html
7 votes314 views2 answers
Twitter share link html
Html
14 votes311 views2 answers
Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0.
Html
-1 vote327 views1 answer
Negrita html
Html
-2 votes324 views1 answer
Html href to gmail
Html
0 vote312 views1 answer
Javascript on focus lost
Html
0 vote323 views2 answers
Html interview questions
Html
0 vote377 views1 answer
How to give h1 h2 in r studio
Html
0 vote326 views2 answers
How to change hidden on html
Html
50 votes373 views6 answers
Html text color
Html