Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added html-cheat-sheet/Media/pic_trulli.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,62 @@ <h1 style="text-align: center;">datalist</h1>
<h2>Datalist</h2>
<p>

The <code style="color:red">&lt;datalist&gt;</code> HTML element contains a set of <code style="color:red">
&lt;option&gt;
</code> elements that represent the
permissible or recommended
options available to choose from within other controls.
The <code style="color:red">&lt;datalist&gt;</code> HTML element tag specifies a list of pre-defined options for an &lt;input&gt; element.
<br><br>
The &lt;datalist&gt; tag is used to provide an "autocomplete" feature for &lt;input&gt; elements. Users
will see a drop-down list of pre-defined options as they input data.
<br><br>
The &lt;datalist&gt; element's id attribute must be equal to the &lt;input&gt; element's list attribute
(this binds them together).
</p>
<br>
<br>
<img src="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet/Images/datalist-code.png">
<div style="background:#e4eff1">
<p>Example:
<br><br>
A datalist with pre-defined options (connected to an &lt;input&gt; element):
</p>
<hr>
<code>
<pre>
&lt;form action="/action_page.php" method="get"&gt;
&lt;label for="browser"&gt;Choose your browser from the list:&lt;/label&gt;
&lt;input list="browsers" name="browser" id="browser"&gt;
&lt;datalist id="browsers"&gt;
&lt;option value="Edge"&gt;
&lt;option value="Firefox"&gt;
&lt;option value="Chrome"&gt;
&lt;option value="Opera"&gt;
&lt;option value="Safari"&gt;
&lt;/datalist&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;
</pre>
</code>
<samp>
<h1>The datalist element</h1>

<form action="/action_page.php" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
</samp>
<br>
</div>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,5 @@ <h2>fildset</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
</section>
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2>input</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2>output</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ <h2>select</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ <h2>textarea</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Form Elements/form-elements.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ <h2>autofocus</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2>disabled</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h2>The label form attribute</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,12 @@ <h2>&lt;height&gt; and &lt;width&gt;</h2>
height="200"&gt;
</pre>
</code>

<embed type="image/png"
src="https://github.com/MarcelDurgante/html-cheat-sheet/blob/main/Images/pic_trulli.png?raw=true"
width="300"
height="200">
<img src="/html-cheat-sheet/Media/pic_trulli.png" alt="a white house" width="300px" height="200px">
</div>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ <h2>&lt;input&gt;</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/forms.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/forms.html">Return</a>

</section>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h2>list</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ <h2>maxlength</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return<a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ <h2>min and max</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return<a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ <h2>multiple</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h2>pattern </h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ <h2>placeholder </h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ <h2>readonly</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h2>required</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h2>size</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ <h2>step</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h2>type</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ <h2>value</h2>
<br>
<br>
<a
href="/Users/marceldurgante/Documents/Assembler/html-cheat-sheet2-/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Attributes/input-attributes.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ <h2>button Types</h2>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h2>checkbox </h2>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h1>Show a Color Picker</h1>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h1>Show a Date Control</h1>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ <h3>Show an email field (allows multiple email addresses). Separate each email a
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h3>Show a file-select field which allows multiple files:</h3>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h1>A Hidden Field (look in source code)</h1>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ <h1>Display an Image as the Submit button</h1>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ <h2>input types</h2>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/forms.html">Return</a>

</section>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <h1>Display a Month Input Control</h1>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h1>Display a Number Field</h1>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ <h1>Display a Password Field</h1>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ <h1>Display Radio Buttons</h1>
<br>
<br>
<a
href="input-types.html">Return</a>
href="/html-cheat-sheet/Pages/Forms/Form Pages/Input Types/input-types.html">Return</a>
</section>
</body>

Expand Down
Loading