HTML
<h1>Different input controls</h1>
<ul><li><h1>type="number"</h1>
<p>the following:
<pre><input type="number"></pre>
is infact:
<pre><tinput type="number" step="1" min="2"></pre>
<ol>
<li>
using scroll bars or typing in the textbox.increasing or decreasing <code>number</code> input is as much as step attr value is set.
</li>
<li>first click on scroll bars will increase as much as min attr value the second is as much as min attr + step attr value.third click is as much as step attr + resulted value of step attr + min attr.</li>
<li>steping with typing-in is the same as scrolling.typing deliver some ease.steping by 8 takes 4 clicks if step="2" min="1" for example.typing only 8 is faster.</li>
<li>i can always expect will the result be valid or not when typing in the textbox.count how much min attr + step attr then start adding using scrolls or typing-in</li>
</ol>
</li>
<li>
<lable for="steper">min="2" step="3" :</lable>
<input type="number" id="steper" name="log" min="0.1" max="10" step="1"></li>
<li>
<h1>type="range"</h1>
<p><code>range</code> input is much more like a <code>number</code> input with different representation and semantic meaning.</p>
<p>it looks as follows:</p>
<label for="speed">speed:</label>
<input type="range" name="speed" id ="speed" value="2" min="0.1" max="3" step="1" list="mo">
<datalist id="mo">
<option value="0.1" label="0"></option>
<option value="1" label="100"></option>
<option value="0.9" label="0.9"></option>
</datalist>
</li>
<section>
<h2>step,min and max for <code>range</code> & <code>number</code></h2>
<p>
step mission is to determine the stepping value.if it is integer or a decimal point number.hence, will decied if the user can provide decimal point numbers or not.
min mission is to decide the minimum value.stepping will start from that value.it could be integer or a decimal point number.hence,whatever is min value.step will start increasing or conceding from that value max mission is to decied the maximum value.
</p>
</section>
<li>
<h1>type="hidden"</h1>
<p>this widget is hidden.think of it as input box that users will never see and use.what is the point then?.hidden input element <code>value</code> attr is used to hold a value that will be used later.all this work is outside of the user experince or scope of service.below this line there is input element of type hidden:
<input type="hidden" name="hide" value="12352">
</p>
<p>obvious that as a user i can not visualize any element above this line.however,using web dev tools i can toogle it.usual use case is to hold a address of data location in a database and refer back to it again when submiting again (good reason to be hidden as users do not need to know that).</p>
</li>
<li><h1>type="file"</h1>
<p>the user may want or asked to provide any type of file.<code>file</code> widget let him upload like so:
</p>
<lable for="photo">upload your account logo(less than 1MB):</lable>
<input type="file" name="logo">
<p><code>multiple</code> attr is used to allow multiple files upload.</p>
<lable for="mltphotos">upload your album(less than 10MB):</lable>
<input type="file" name="album" multiple>
<p><code>accept</code> attr is used to determine the type of file sent to the server.the value could be a comma seperated list of file types.</p>
</li>
<li><h1>type="color"</h1>
<p>browsers and platforms that support color wheels to pick colors are infact internaly converting the selected color into it's <var>hexadecimal</var> notation.therefore html color input only accept color inputs from users in the form of hexadecimal notaion.in case of unrecognized input format such as using <strong>css</strong> color functions or any value other than hexadecimal notation of colors.browsers will default to "#000000" color wich is black.</p>
<label for="color">pick your fav color :</label>
<input type="color" name="color" id="color">
</li>
<li><h1>type="checkbox"</h1>
<p><code>checkbox</code> might look as follows:</p>
<pre><type="checkbox" name="sex" value="male" id="sex" required,disabled,autofoucs..></pre>
<input type="checkbox" name="fanof" value="real madrid" id="team" required>
<label for="team">real madrid</label>
<p>
the checkbox has no value taken from the user.therefore there is no validation taking place.<code>value</code> attr is set and will be sent on submission along with <code>name</code> attr.user only decieds if it is checked to be sent or not.it is boolean.
<p><code>checked</code> attr is used to have on of the multiple checkboxes to be selected by default.</p>
<input type="checkbox" name="team" id="real madrid" checked>
<lable for="real madrid">real madrid</lable>
<input type="checkbox" name="team" id="athletico madrid">
<lable for="athletico madrid">real madrid</lable>
</p>
</li>
<li><h1>input="radio"</h1>
<p>radio technicaly is similar to <code>checkbox</code> with big semantic difference that <code>radio</code> input is used when we have multiple options and user can select only one.</p>
</li>
<li><h1>Dates and time</h1>
<p>
</p>
<ul>
<li><h1>type="date"</h1>
<p>it looks as follows:</p>
<label for="bd">Date of birth:</label>
<input type="date" name="bd" id="bd" min="1910-01-01" max="2017-01-01" >
<p>attributes <code>min,max and value</code> are filled in with the form of yyyy-mm-dd.however date is displayed differently depending on the used browser or operating system-could.it could be displayed as yyyy-dd-mm or mm-dd-yyyy and so on.<code>step </code> attribute is used to navigate through dates.user might want to navigate dates throughout sundays only.therefore i need to set <code>step </code> to "7".</p>
<p><h3>browser support:</h3>
is a bit a problem since some are not supporting <code>date</code>.however <code>select</code> form element is used to get <i>date</i> user inputs like so:</p>
<label for="month"><b>Month</b></label>
<select name="month" id="month">
<option>January</option>
<option>Febreuary</option>
<option>March</option>
</select>
<p>another soution form browsers that are not supporting <code><em>date</em></code> input and are fallicg back to <code><em>text</em></code> input is the use of <code>pattern</code> attr.validation is performed to make sure user input is in a form of yyyy-mm-dd.however users still can exchange mm with dd-in the end they are only numbers.infact date is a number input type with speacial treatments and this is noticed with the use of <code>min,max and step </code> attr</p>
</li>
<li><p><h1>type="datetime-locale"</h1>
if the browser has support for <code>datetime-locale </code> it will look as follows:
</p>
<p><h4> <label for="datetimeloc">choose your forum prefered time:</label></h4></p>
<input type="datetime-locale" name="datetimeloc" id="datetimeloc" min="" max="" step=""> <span style="color:red;">not supported on chrome</span>
</li>
<p>a date and time picker will be used if the browser supports <code>datetime</code> input.not supporting will cause the browser to degrade to <code>text</code> input as a fallback.hence <code>pattern</code> attr is used as a validation.but as said earlier users still able to submit invalid data as dd could be submited as mm.as a typical solution <code>select</code> from element is used for each date,time and timezone input data.</p>
<li><h1><code>month week time</code></h1><p>input types <code>month, week, time</code></p> are not supported well hwoever.this issue is solved the same way <code>date,datetime-locale</code> is solved using <code>select</code> form element.infact as a rule-a general one.all date and time related input types(<code>date, time,datetime-locale,month and week</code>) share the same solution in non-supporting browsers.also they share the same validation rules using <code>min,max and step</code> of course if they are used in a supporting browser.</li>
</ul>
</li>
<li>
<h1>Buttons</h1>
<ul>
<li><h3>type="button"</h3>
<p>
simple button that does something when user clicks on it.<code>button</code> from element is prefered on this sort of button since <code>type="button"</code> element has no ending tag(closing).hence no html is included inside.
</p>
<p>it might look as follows:</p>
<input type="button" value="send file" name="button" id="doc">
<pre>
input type="button" value="send file" name="button" id="doc"
</pre>
</li>
<li><h3>input="submit"</h3>
<p>submit button when clicked sendes form's data to the <code>action</code> specified <code>url</code> destination for processing at the server.</p>
<p>it looks as follow:</p>
<input type="submit" value="save">
<pre><input type="submit" value="save"></pre>
</li>
<li><h3>input="image"</h3>
<p>
is a submit button that looks exactly as <code>img</code> element with data submission ability.
</p>
<p>it looks as follow:</p>
<pre>
<input type="image" src="" width="" height="">
</pre>
</li>
<li><h3>type="reset"</h3>
<p>is a reset button that resets from elements values to their default values.</p>
<p>it looks as a simple reset button:</p>
<input type="reset" value="reset to default">
</li>
</ul>
</li>
<section>
<h1 style="margin-left:-15px;">Text-related input controls</h1>
<h1>Text input types attributes:</h1>
<p>text attributes including <code>text,search,email,tel url and password</code> have text-only common attributes.i can think of every single line text input type is of type="text" with special treatment.the attributes are:<ul class="attr">
<li>pattern</li>
<li>minlength,maxlength,size</li>
<li>placeholder</li>
<li>spellcheck</li>
<li>autocaptalize <span style="color:blue;">-ios safari</span></li>
</ul>
</section>
<li><h1>type="email"</h1>
<p>input of type email might look as follow:</p>
<pre><input type="email" name="account" value="" autofoucse size="15" minlength="20" maxlength="40" placeholder="your@email.com" multiple></pre>
<lable for="email">email account:</lable>
<input type="email" name="account" value="" autofoucse size="15" minlength="20" maxlength="40" placeholder="your@email.com" multiple>
<p><code>pattern</code> attr can be used for browser validation.</p>
</li>
<li><h1>type="password"</h1>
<p>
input of type password might look as follow:
<pre> <input type="password" name="password" id="passowrd" size="8" minlength="8" maxlength="8" autocomplete="off" placeholder="***" required></pre>
<lable for="password">passowrd:</lable>
<input type="password" name="password" id="passowrd" size="8" minlength="8" maxlength="8" autocomplete="off" placeholder="***" required>
<code>pattern</code> attr can be used for browser validation.
</li>
<li>
<h1>type="search"</h1>
<p>input of type search might look as follows:</p>
<pre><type="search" name="search" value="" maxlength="200" size="100" list="locations" pattern></pre>
<lable for="search">look for your prefered location:</lable>
<input type="search" id="search" name="search" size="100" maxlength="200">
</li>
<liL> <h1>type="tel"</h1>
<p>input of type tel might look as follows:</p>
<pre><type="tel" name="phone" value="0790-" maxlength="11" minlength="11" size="12" pattern=""></pre>
<lable for="tel">phone number:</lable>
<input type="tel" id="tel" name="phone" size="11" maxlength="11" minlength="11" required placeholder="12-345-6789"></liL>
<li><h1>type="text"</h1>
<p>input of type text is the father of all single line text input types.it might look as follows:</p>
<pre><input type="text" name,value,pattern,size,minlength,maxlength,placeholder...></pre>
<lable for="text"> tell us who you are:
<input type="text" id="text" name="text" placeholder="type your text" size="20" minlength="25" maxlength="100" pattern="">
</lable>
<p><strong>Note:</strong>
input of type text is the fallback if one of the <code>type</code> attr is not supported in older browsers.</p>
</li>
<li><h1>type="url"</h1>
<p>input of type URL might look exactly as any single line text input.</p>
<lable for="browser">surf:</lable>
<input type="url" name="browser" id="browser">
<p><code>pattern</code> attr can be used for browser validation</p>
</li>
</ul>
