textarea
textareas show like this:
but they function like this:
<textarea id="id" style="width: 213px; height: 82px;"></textarea>
these are useful for comments or markup fourm posting because they support text input and resizing (drag the lines on the bottom right corner of it)
progress
progress bars show like this:
but they function like this:
<progress></progress>
these are useful for marking progress in a game, saving data, or uploading files/text, etc
fieldset
fieldsets show in two ways, with a legend, and without a legend
this is with a legend:
and this is without a legend:
but they function like this:
<fieldset>
<legend>your text here</legend>
<p>your text here</p>
</fieldset>
these are useful for marking places on a form(s)
tip: add some basic CSS to add colour
input
inputs show in lots of ways, because they have lots of types, such as: text, button, email, address, phone, file, etc
so i'll only show text, buttons, and files
buttons show like this:
buttons function like this:
<input type="button">
text functions like this:
<input type="text">
files function like this:
<input type="file">
inputs are very useful for submit buttons, sign in/login pages, etc
tip: add placeholder="your placeholder" to your text inputs to help users know what they're for
form
forms dont show because they are used to add actions to inputsš .
forms function like this (with an inputš ):
<form>
<input type="text">
</form>
datalist
datalists are used to store items that can be searched for in an inputš .
datalists show like this (with an inputš ):
datalists function like this (with an inputš ):
<input type="text" list="options">
<datalist id="options">
<option value="option">
<option value="list">
</datalist>
video
I think this one is self-explanatory.
Video tags show like this:
video tags function like this:
<video width="320" height="240" controls>
<source src="video name.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>