HTML5 Input Types

HTML Input Types

The <input /> element is a form element.

In this lesson we are not going to putt all of the different input types inside the <form> element because we will only use JavaScript (JS) to get their values.

However, In using a Hypertext Preprocessor (PHP) page handler/form-handler input elements should be inside the <form> elment and their name attributes are mandatory.

Unfortunately, we are not giong to learn PHP lesson is released.

The <input> element is an empty and inline element.

💡 With JS we can easily get the values of different <input /> types defined by the type attribute, to see how to do that simply click on each of the "try it yourself" button below.

Text

A single-line text filed where line-breaks are ignored.

<!DOCTYPE html>
<html>
    <head>
        <title> input text </title>
    </head>
    <body>
        <input type="text" id="demo" />
        <br />
        <button onclick="getValue();"> Get Value</button>

        <script type="text/javascript">
            function getValue(){
                alert(document.getElementById("demo").value);
            }
            </script>
    </body>
</html>

Checkbox

A check box that allows itself to be checked/unchecked. The value of a check box could either be true(if it is checked) or false (if it is unchecked) is JS they are called booleans.

<!DOCTYPE html>
<html>
    <head>
        <title> Input Checkbox </title>
    </head>
    <body>
        <input type="checkbox" id="demo" />
        <br />
        <button onclick="getValue()"> Get Value</button>

        <script type="text/javascript">
            function getValue(){
                alert(document.getElementById("demo").checked);
            }
            </script>
    </body>
</html>

Color

HTML5. A simple built-in color picker. It returns a Hex Color Code.

<!DOCTYPE html>
<html>
    <head>
        <title> Input Color </title>
    </head>
    <body>
        <input type="color" id="demo" />
        <br />
        <button onclick="getValue()"> Get Value</button>

        <script type="text/javascript">
            function getValue(){
                alert(document.getElementById("demo").value);
            }
            </script>
    </body>
</html>

Date

HTML5. A control for entering a date (year,month and day with no hours and minutes).

<!DOCTYPE html>
<html>
    <head>
        <title> Input Date </title>
    </head>
    <body>
        <input type="date" id="demo" />
        <br />
        <button onclick="getValue()"> Get Value</button>

        <script type="text/javascript">
            function getValue(){
                alert(document.getElementById("demo").value);
            }
            </script>
    </body>
</html>

Datetime Local

HTML5. A control for entering a date and time.

<!DOCTYPE html>
<html>
    <head>
        <title> Input Date Time </title>
    </head>
    <body>
        <input type="datetime-local" id="demo" />
        <br />
        <button onclick="getValue()"> Get Value</button>

        <script type="text/javascript">
            function getValue(){
                alert(document.getElementById("demo").value);
            }
            </script>
    </body>
</html>

Email

HTML5. A field for entering a valid e-mail address. If the form is submitted and the e-mail provided is not valid the user will be warned.

<!DOCTYPE html>
<html>
    <head>
        <title> Input E-mail </title>
    </head>
    <body>
        <p>Try entering an invalid e-mail address then click the "Submit" button.</p>
        <form action="sample-page-handler.html">
            <input type="email" id="demo" name="email" />
            <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>

💡You will learn about attributes that can be used with these input elements on our HTML5 Form Elements Attributes lesson.

😃Feedback ⚠Report