Home » , » Berikut Beberapa Input Type yang ada di HTML 5

Berikut Beberapa Input Type yang ada di HTML 5

Posted by RezkyCpp: Practice Does Not Make Perfect on Saturday, January 13, 2018

Berikut beberapa input type yang sering digunakan di HTML 5

Berikut syntaxnya, semoga bermanfaat dan lancar buat tugasnya
<!DOCTYPE html>
<!-- Fig. 3.1: newForminputtypes.html -->
<!-- Di ketik oleh rezkycpp -->
<html>

<head>
    <meta charset="UTF-8">
    <title>Latihan web desain</title>
</head>

<body>
    <h1> New HTML5 Input types Demo</h1>
    <p>This form demonstrates the new HTML5 input types and the placeholder, required and autofocus attributes
    </p>

    <form method="post" action="http://www.deitel.com">
        <p>
            <label>Color:
        <input type = "color" autofocus />
            (Hexadecimal code such as #ffffff)
        </label>
        </p>

        <p>
            <label>Date:
        <input type ="date" />
            (yyyy-mm-dd)
        </label>
        </p>

        <p>
            <label>Datetime-local:
        <input type = "datetime-local"/>
            (yyyy-mm-ddThh:mm+ff:gg, such as 2012-01-27T03:15)
        </label>
        </p>

        <p>
            <label>Email:
        <input type ="email" placeholder ="nama@domain.com" required />
        (nama@domain.com)
        </label>
        </p>

        <p>
            <label>Month:
        <input type ="month" /> (yyyy-mm)
        </label>
        </p>

        <p>
            <label>Number:
        <input type = "number"
               sin ="0"
               max ="7"
               step="1"
               value="4"/>
        </label> (enter a number between 0 and 7)
        </p>

        <p>
            <label>Range: 0
            <input type = "range"
                min = "0"
                max = "20"
                value = "10"/> 20
        </label>
        </p>

        <p>
            <label>Search:
        <input type = "search" placeholder = "search query"/>
        </label> (enter your search query here.
        </p>

        <p>
            <label>Tel:
        <input type = "tel" placeholder = "(###) ###-####" pattern = "\(\d{3}\)+\d{3}-\d{4}" required />
        (###) ###-####
        </label>
        </p>

        <p>
            <label>Time:
        <input type = "time" /> (hh:mm:ss.ff)
        </label>
        </p>

        <p>
            <label>URL:
        <input type = "url" placeholder = "http://www.domainname.com" />
            (http://www.domainname.com)
        </label>
        </p>

        <p>
            <label>Week:
        <input type = "week" />
        (yyyy-Wnn, such as 2012-W01)
        </label>
        </p>

        <p>
            <input type="submit" value="Submit" />
            <input type="reset" value="Clear" />
        </p>
    </form>
</body>

</html>

Thanks for reading & sharing RezkyCpp: Practice Does Not Make Perfect

Previous
« Prev Post

0 comments:

Post a Comment

Search