JSFiddle - React, Tailwind, and code Playground
by secretgspot
HTML
<h1>HTML5 Forms</h1>
<form action="" method="post" id="sample">
<h2>Text</h2>
<p><input type="text" name="text" list="world"> (datalist)
<datalist id="world">
<option value="Hello">
<option value="Ciao">
<option value="Buon giorno">
<option value="Bonjour">
<option value="Привет">
</datalist>
</p>
<p><input type="text" name="text2" pattern="^\w*$"> (pattern[\w]) - Webkit, Presto</p>
<p><input type="text" name="text3" required> (required)</p>
<p><input type="text" name="text4" placeholder="input me"> (placeholder)</p>
<p><input type="text" name="text5" autofocus> (autofocus)</p>
<p><input type="text" name="text6" autocomplete="on"> (autocomplete)</p>
<p><input type="text" name="text7" multiple> (multiple)</p>
<h2>Date Pickers</h2>
<h3>datetime</h3>
<p><input type="datetime" name="datetime"></p>
<h3>datetime-local</h3>
<p><input type="datetime-local" name="datetime-local"></p>
<h3>date</h3>
<p><input type="date" name="date"></p>
<h3>month</h3>
<p><input name="month" type="month"></p>
<h3>week</h3>
<p><input type="week" name="week"></p>
<h3>time</h3>
<p><input type="time" name="week"></p>
<h2>Number</h2>
<p>Webkit, Presto</p>
<p><input type="number" name="number"></p>
<p><input type="number" name="number2" min="0" max="10" step="2"> (min=0,max=10,step=2)</p>
<h2>Range</h2>
<p>Webkit, Presto</p>
<p><input type="range" name="range"></p>
<h2>Email</h2>
<p><input type="email" name="email"> (email validate)</p>
<p><input type="email" name="email2" list="contacts" multiple> (multiple)
<datalist id="contacts">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
</datalist>
</p>
<h2>URL</h2>
<p><input type="url" name="url"> (url validate)</p>
<p><input type="url" name="url2" list="url_list"> (datalist)
<datalist id="url_list">
<option value="http://google.com" label="Google">
<option value="http://yahoo.com" label="Yahoo"> ...CSS
body { font-size: 11px; }