Scribd Logo
Upload

Welcome to Scribd!

  • HTML5 Web Forms Inputs

    Uploaded by

    durai murugan
    26 views20 pages
    The document discusses HTML5 web forms. It describes the <input> element and its attributes for different data types. New HTML5 input types were introduced like datetime, datetime-local, date, month, week, time and email. Examples are given to show how each input type works and the format of data it accepts. The key new features of HTML5 forms allow capturing different data types like dates, times in standardized formats.

    Original Description:

    Original Title

    HTML5 − Web Forms 2

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses HTML5 web forms. It describes the <input> element and its attributes for different data types. New HTML5 input types were introduced like datetime, datetime-local, date, month, week, time and email. Examples are given to show how each input type works and the format of data it accepts. The key new features of HTML5 forms allow capturing different data types like dates, times in standardized formats.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    26 views20 pages

    HTML5 Web Forms Inputs

    Uploaded by

    durai murugan
    The document discusses HTML5 web forms. It describes the <input> element and its attributes for different data types. New HTML5 input types were introduced like datetime, datetime-local, date, month, week, time and email. Examples are given to show how each input type works and the format of data it accepts. The key new features of HTML5 forms allow capturing different data types like dates, times in standardized formats.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 20

    HTML5 − Web Forms 2.

    By
    A.DURAIMURUGAN AP/CSE

    Web Forms - A.DURAIMURUGAN AP/CSE


    THE <INPUT> ELEMENT IN HTML4
    • HTML4 input elements use the type attribute to specify the data type.HTML4
    provides following types

    Type Description
    Text A free-form text field, nominally free of line breaks.

    Password free-form text field for sensitive information, nominally free of line
    breaks
    Checkbox A set of zero or more values from a predefined list.

    Radio An enumerated value.

    Submit A free form of button initiates form submission.

    File An arbitrary file with a MIME type and optionally a file name.

    Image A coordinate, relative to a particular image's size, with the extra semantic
    that it must be the last value selected and initiates form submission.

    Web Forms - A.DURAIMURUGAN AP/CSE


    THE <FO RM> ELEMEN T

    • The HTML <form> element is used to create an HTML form for user


    input:

    • <form>
    .
    form elements
    .
    </form>

    Web Forms - A.DURAIMURUGAN AP/CSE


    THE <INPUT> ELEMENT

    • The <input> Element


    • The <input> element is the most important form element.
    • An <input> element can be displayed in many ways, depending on
    the type attribute.
    • Here are some examples:

    Type Description
    <input type="text"> Displays a single-line text input field

    <input type="radio"> Displays a radio button (for selecting one of many choices)

    <input type="submit"> Displays a submit button (for submitting the form)

    Web Forms - A.DURAIMURUGAN AP/CSE


    TEXT FIELDS

    •<input type="text">  - Defines a single-line input field for text input.

    Example :-

    •A form with two text input fields:

    <form>

      <label for="fname">First name:</label><br>

      <input type="text" id="fname" name="fname"><br>

      <label for="lname">Last name:</label><br>

      <input type="text" id="lname" name="lname">

    </form>

    Web Forms - A.DURAIMURUGAN AP/CSE


    • Following is the simple example of using labels, radio buttons, and
    submit buttons.
    Example :-
    • <form action="http://example.com/cgiscript.pl" method="post">
    • <p>
    • <label for="firstname">first name: </label>
    • <input type="text" id="firstname"><br />
    • <label for="lastname">last name: </label>
    • <input type="text" id="lastname"><br />
    • <label for="email">email: </label>
    • <input type="text" id="email"><br>
    • <input type="radio" name="sex" value="male"> Male<br>
    • <input type="radio" name="sex" value="female"> Female<br>
    • <input type="submit" value="send"> <input type="reset">
    • </p>
    • </form>

    Web Forms - A.DURAIMURUGAN AP/CSE


    THE <INPUT> ELEMENT IN HTML5
    • Apart from the above-mentioned attributes, HTML5 input elements
    introduced several new values for the type attribute. These are listed below.

    Type Description

    Datetime A date and time (year, month, day, hour, minute, second, fractions of a
    second) encoded according to ISO 8601 with the time zone set to UTC.

    Datetimelocal A date and time (year, month, day, hour, minute, second, fractions of
    asecond) encoded according to ISO 8601, with no time zone information.

    Date A date (year, month, day) encoded according to ISO 8601.

    Month A date consisting of a year and a month encoded according to ISO 8601.

    Week A date consisting of a year and a week number encoded according to ISO
    8601.

    Time A time (hour, minute, seconds, fractional seconds) encoded according to


    ISO 8601.

    Email It accepts only email value. This type is used for input fields that should
    contain an e-mail address. If you try to submit a simple text, it forces to
    enter only email address in email@example.com format.

    Web Forms - A.DURAIMURUGAN AP/CSE


    HTML5 - DATETIME
    • A date and time (year, month, day, hour, minute, second, fractions of a
    second) encoded according to ISO 8601 with the time zone set to UTC.

    Example :-

    • <!DOCTYPE HTML>
    • <html>
    • <body>
    • <form action = "/cgi-bin/html5.cgi" method = "get">
    • Date and Time : <input type = "datetime" name = "newinput" />
    • <input type = "submit" value = "submit" />
    • </form>
    • </body>
    • </html>

    Web Forms - A.DURAIMURUGAN AP/CSE


    Output

    Web Forms - A.DURAIMURUGAN AP/CSE


    HTML5 - DATETIME LOCAL

    • A date and time (year, month, day, hour, minute, second, fractions of a second)
    encoded according to ISO 8601, with no time zone information.
    Example
    • <!DOCTYPE HTML>
    • <html>
    • <body>
    • <form action = "/cgi-bin/html5.cgi" method = "get">
    • Local Date and Time : <input type = "datetime-local" name = "newinput" />
    • <input type = "submit" value = "submit" />
    • </form>
    • </body>
    • </html>

    Web Forms - A.DURAIMURUGAN AP/CSE


    Output

    Web Forms - A.DURAIMURUGAN AP/CSE


    HTML5 – DATE

    • A date (year, month, day) encoded according to ISO 8601.


    Example
    • <!DOCTYPE HTML>
    • <html>
    • <body>
    • <form action = "/cgi-bin/html5.cgi" method = "get">
    • Date : <input type = "date" name = "newinput" />
    • <input type = "submit" value = "submit" />
    • </form>
    • </body>
    • </html>

    Web Forms - A.DURAIMURUGAN AP/CSE


    Output

    Web Forms - A.DURAIMURUGAN AP/CSE


    HTML5 – MONTH
    • A date consisting of a year and a month encoded according to ISO 8601.

    Example :-

    • <!DOCTYPE HTML>
    • <html>
    • <body>
    • <form action = "/cgi-bin/html5.cgi" method = "get">
    • Month : <input type = "month" name = "newinput" />
    • <input type = "submit" value = "submit" />
    • </form>
    • </body>
    • </html>

    Web Forms - A.DURAIMURUGAN AP/CSE


    Output

    Web Forms - A.DURAIMURUGAN AP/CSE


    HTML5 - WEEK

    • A date consisting of a year and a week number encoded according to ISO


    8601.
    Example :-

    • <!DOCTYPE HTML>
    • <html>
    • <body>
    • <form action = "/cgi-bin/html5.cgi" method = "get">
    • Week : <input type = "week" name = "newinput" />
    • <input type = "submit" value = "submit" />
    • </form>
    • </body>
    • </html>

    Web Forms - A.DURAIMURUGAN AP/CSE


    Output

    Web Forms - A.DURAIMURUGAN AP/CSE


    HTML5 – TIME
    • A time (hour, minute, seconds, fractional seconds) encoded according to
    ISO 8601.

    Example :-

    • <!DOCTYPE HTML>
    • <html>
    • <body>
    • <form action = "/cgi-bin/html5.cgi" method = "get">
    • Time : <input type = "time" name = "newinput" />
    • <input type = "submit" value = "submit" />
    • </form>
    • </body>
    • </html>

    Web Forms - A.DURAIMURUGAN AP/CSE


    Output

    Web Forms - A.DURAIMURUGAN AP/CSE


    Thank you students for the
    Cooperation

    Web Forms - A.DURAIMURUGAN AP/CSE

    You might also like