HTML
<section class="input-attr">
<h1>Html form input control attributes</h1>
<ul>
<li><h3>input type="file":</h3>
<p>file input form has the following:
<pre>
<code>
//define file input
<input type="file">
//accept multiple files to be uploaded by user
<input type="file" multiple>
//type of file to be accepted
<input type="file" accept="/*video">
<input type="file" accept="/*audio">
<input type="file" accept="/*image">
<input type="file" accept=".file-extension">
//taking audio file from user's device microphon
<input type="file" accept="/*audio" capture>
//taking video file from user's device front camera
<input type="file" accept="/*video" capture="user">
//taking image from user's device camera facing enviroment
<input type="file" accept="/*image" capture="enviroment">
</code>
</pre>
</p>
</li>
<li><h3>input="range",type="number" and date related:</h3>
<p>
they share theses attributes: min,max and step.
</p></li>
<li><h3>input="text" and it's related text form input controls:</h3>
<p>they share: pattern,minlength,maxlength ,spellcheck and size.</p></li>
<li><h3>buttons:</h3>
<ul>
<li><h4>input type="submit" and type="image"</h4>
<p>data submission buttons are identical and share these attributes:
</p>
</li>
</ul>
<li>
</ul>
</section>
<section class="form-elements-attr">
<h1>Html form elements attributes</h1>
<ul>
<li><h4>textarea</h4>
<p>any html between it's two tags is converted into text.takes some special attr: rows,cols and wrap.
<p style="color:red; font-size:18px;"><code style="color:black;">text</code> attributes are used.</p></p>
</li>
<li><h4>datalist</h4>
<p><i>global attributes</i> only.namely <i>id</i> is the most used.</p></li>
<li><h4>select</h4>
<p>
uses attribute <code>multiple</code> to let users select more than one option.uses applicable commonly shared attributes listed at the end of ths page.
</p></li>
<h4>option</h4>
<p>when used on <code>datalist</code> it is nothing other than option element that uses applicable commonly shared element.with <code>select</code> however,attribut <code>selected</code> is used to set one of several options available by default.<code>value</code> attribute is subnited with form and if not specified.content bettwen closing tags is considered to be value.keep <code>value</code> attribute's content and in bettween tags content similar.however the submited content is <code>value</code> attribute value.</p>
<li><h4>meter</h4>
<p>
attributes <code>value,min,max,low,high and optimal</code>
</p></li>
<li>
<h4>progress</h4>
<p>attributes <code>value and max.</code></p>
</li>
</ul>
</section>
<section class="common-attr"><p>
<h1>Common attributes:</h1>
some attributes are used across all form elements:
<ol>
<li>required</li>
<li>tabindex</li>
<li>name</li>
<li>value</li>
<li>list</li>
<li>autocomplete</li>
<li>placeholder</li>
<li>readonly</li>
<li>disabled</li>
<li>autofoucs</li>
<li>form</li>
<li>autocapitalize</li><span> (used with form and form elements)</span>
<li>autocomplete</li> <span> (used with form and form elements)</span>
</ol>
</p></section>
