File
A control for selecting a file.
We can define the accept attribute to only allow specific file types eg. <input type="file" accept=".pdf" />.
<!DOCTYPE html><html><head><title> Input File </title></head><body><input type="file" id="demo" onchange="readFile();" /><!-- you should pick all image file for this demo to work --><img src="" alt="The image file will be shown here." id="result" /><script type="text/javascript">function readFile(){var reader = new FileReader();var file = document.getElementById('demo').files[0];reader.onload = function(e) {document.getElementById('result').src = e.target.result;}reader.readAsDataURL(file);}</script></body></html>
Hidden
A text field that is not shown in the browser.
<!DOCTYPE html><html><head><title> Input Hidden </title></head><body><input type="hidden" value="Lorem Ipsum!" id="demo" /><br /><button onclick ="getValue()"> Get Value </button><script type="text/javascript">function getValue(){alert(document.getElementById('demo').value)}</script></body></html>
Month
HTML5. A control for entering a month and year.
<!DOCTYPE html><html><head><title> Input Month </title></head><body><input type="month" id="demo" /><br /><button onclick="getValue()"> Get Value </button><script type="text/javascript">function getValue(){alert(document.getElementById('demo').value)}</script></body></html>
Number
HTML5. A text field for entering a number and some characters. If the form is submitted and the number provided is not valid the user will be warned.
<!DOCTYPE html><html><head><title> Input Number </title></head><body><form action="sample-page-handler.html"><input type="number" id="demo" /><input type="submit" /></form><br /><button onclick="getValue()"> Get Value </button><script type="text/javascript">function getValue(){alert(document.getElementById('demo').value)}</script></body></html>
Password
A single-line text field whose value is obscured.
<!DOCTYPE html><html><head><title> Input Password </title></head><body><input type="password" id="demo" /><br /><button onclick="getValue()"> Get Value </button><script type="text/javascript">function getValue(){alert(document.getElementById('demo').value)}</script></body></html>
Radio
A radio button, allowing a single value to be selected out of multiple choices.
<!DOCTYPE html><html><head><title> Input Password </title></head><body><input type="radio" name="gender" value="Male" id="male" /><label for="male"> Male </label><br /><input type="radio" name="gender" value="Female" id="female" /><label for="female"> Female </label><br /><button onclick="getValue()"> Get Value </button><script type="text/javascript">function getValue(){var radios = document.getElementsByName('gender');var number_of_radios = radios.length;for(var i=0; i < number_of_radios; i++) {if(radios[i].checked) {alert(radios[i].value);}}}</script></body></html>
Post a Comment