Scribd Logo
Upload

Welcome to Scribd!

  • Learn Advanced and Basic HTML - Lesson 4 (Ii)

    Uploaded by

    Training Development
    10 views22 pages
    With HTML you can create your own Website. This tutorial teaches you everything about HTML. For full HTML course visit our website www.training-n-development.com

    Original Title

    Learn Advanced and Basic HTML - Lesson 4 (ii)

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    With HTML you can create your own Website. This tutorial teaches you everything about HTML. For full HTML course visit our website www.training-n-development.com

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views22 pages

    Learn Advanced and Basic HTML - Lesson 4 (Ii)

    Uploaded by

    Training Development
    With HTML you can create your own Website. This tutorial teaches you everything about HTML. For full HTML course visit our website www.training-n-development.com

    Copyright:

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

    Learn HTML Basics

    Lesson No : 04 (Second Part)

    Publisher : Attitude Academ


    The <input> Attribute
    The<input>element is the most importantform element.
    The <input> element has many variations, depending on
    thetypeattribute.
    Here are the types used in this chapter:

    <input type=The all Value of type attribute />


    text Email Password Radio Checkbox

    Color Number Date Datetime month


    range date-time-local time File reset
    Search Button submit
    Type=text
    <input type="text">defines a one-line input field fortext input:

    Example
    <!DOCTYPEhtml>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    <form>
    First name:<br>
    <input type="text"
    name="firstname"><br>
    Last name:<br>
    <input type="text"
    name="lastname">
    </form>
    </body>
    </html>
    Type=email

    The<input type="email">is used for input fields that should contain


    an e-mail address. Depending on browser support, the e-mail address can
    be automatically validated when submitted. Some smart phones
    recognize the email type, and adds ".com" to the keyboard to match
    email input.
    <p><b>Note:</b>type="email" is not supported in IE9 and
    earlier.</p>

    EXAMPLE

    <body>
    <form action="action_page.php">
    E-mail:
    <input type="email" name="email">
    <input type="submit">
    </form>
    </body>
    Type=password
    <input type="password">defines apassword field:

    <body>
    <form action="">
    User name:<br>
    <input type="text" name="userid">
    <br>
    User password:<br>
    <input type="password" name="psw">
    </form>
    <p>The characters in a password field
    are
    masked (shown as asterisks or
    circles).</p>
    </body>
    Type=Radio
    <input type="radio">defines aradio button.
    Radio buttons let a user select ONE of a limited number of choices:

    Example:
    <!DOCTYPEhtml>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    <form>
    <input type="radio" name="gender" value="male" checked>
    Male<br>
    <input type="radio" name="gender" value="female">
    Female<br>
    <input type="radio" name="gender" value="other"> Other
    </form>
    </body>
    </html>
    Type=checkbox
    <input type="checkbox">defines acheckbox.
    Checkboxes let a user select ZERO or MORE options of a limited
    number of choices.

    <body>
    <form action="action_page.php">
    <input type="checkbox" name="vehicle1"
    value="Bike">I have a bike
    <br>
    <input type="checkbox" name="vehicle2" value="Car">I
    have a car
    <br>
    <input type="submit">
    </form>
    </body>
    Type=color
    The<input type="color">is used for input fields that should
    contain a color.
    Depending on browser support, a color picker can show up in the
    input field.
    <p><b>Note:</b> type="color" is not supported in Internet
    Explorer / Edge.</p>

    EXAMPLE

    <body>
    <form action="action_page.php">
    Select your favorite color:
    <input type="color" name="favcolor" value="#ff0000">
    <input type="submit">
    </form>
    </body>
    Type=number
    The<input type="number">is used for input fields that should
    contain a numeric value. You can set restrictions on the numbers.
    Depending on browser support, the restrictions can apply to the input
    field.
    <p><b>Note:</b> type="number" is not supported in IE9 and
    earlier.</p>

    EXAMPLE

    <body>
    <form action="action_page.php">
    Quantity (between 1 and 5):
    <input type="number" name="quantity" min="1" max="5">
    <input type="submit">
    </form>
    </body>
    Type=date
    The<input type="date">is used for input fields that should contain a
    date.
    Depending on browser support, a date picker can show up in the input field.
    <p><strong>Note:</strong> type="date" is not supported in
    Internet Explorer 10 and earlier versions.</p>

    EXAMPLE
    <body>
    <form action="action_page.php">
    Birthday:
    <input type="date" name="bday">
    <input type="submit">
    </form>
    </body>
    Type=datetime

    The<input type="datetime">allows the user to select a date and


    time (with time zone).
    (Note: type="datetime" is not supported in Chrome, Firefox,
    or IE)

    EXAMPLE
    <body>
    <form action="action_page.php">
    Birthday (date and time):
    <input type="datetime" name="bdaytime">
    <input type="submit">
    </form>
    </body>
    Type=month
    The<input type="month">allows the user to select a month and
    year.Depending on browser support, a date picker can show up in the
    input field.
    <body>
    <form action="action_page.php">
    Birthday (month and year):
    <input type="month" name="bdaymonth">
    <input type="submit">
    </form>
    <p><strong>Note:</strong> type="month" is not
    supported in Internet Explorer 10 and earlier
    versions.</p>
    </body>
    Type=range
    The<input type="range">is used for input fields that should
    contain a value within a range. Depending on browser support, the
    input field can be displayed as a slider control.
    (Note : type="range" is not supported in Internet Explorer 9
    and earlier versions. )

    EXAMPLE
    <body>
    <form action="action_page.php" method="get">
    Points:
    <input type="range" name="points" min="0"
    max="10">
    <input type="submit">
    </form>
    </body>
    Type=datetime-local

    The<input type="datetime-local">allows the user to select a


    date and time (no time zone).Depending on browser support, a date
    picker can show up in the input field.
    ( Note: type="time" is not supported in Firefox, or Internet
    Explorer 10 and earlier versions.)

    EXAMPLE
    <body>
    <form action="action_page.php">
    Birthday (date and time):
    <input type="datetime-local" name="bdaytime">
    <input type="submit" value="Send">
    </form>
    </body>
    Type=time
    The<input type="time">allows the user to select a time (no time
    zone).
    Depending on browser support, a time picker can show up in the input
    <body>
    field.
    <form action="action_page.php">
    Select a time:
    <input type="time" name="usr_time">
    <input type="submit">
    </form>
    <p><strong>Note:</strong> type="time" is not supported
    in Firefox, or Internet Explorer 10 and earlier versions.</p>
    </body>
    Type=file
    <input type="reset">defines areset buttonthat will reset all
    form values to their default values
    If you change the input values and then click the "Reset" button, the
    form-data will be reset to the default values.
    <body>

    <form action="action_page.php">
    Choose file like (PDF etc)
    <input type="file" >

    </form>
    </body>
    Type=reset
    <input type="reset">defines areset buttonthat will reset all
    form values to their default values
    If you change the input values and then click the "Reset" button, the
    form-data will be reset to the default values.

    <body>
    <formaction="action_page.php">
    First name:<br>
    <inputtype="text"name="firstna
    me"value="Mickey"><br>
    Last name:<br>
    <inputtype="text"name="lastna
    me"value="Mouse"><br><br>
    <inputtype="submit"value="Sub
    mit">
    <inputtype="reset">
    </form>
    </body>
    Type=search
    The<input type="search">is used for search fields (a search field
    behaves like a regular text field).

    EXAMPLE

    <body>
    <form action="action_page.php">
    Search Google:
    <input type="search" name="googlesearch">
    <input type="submit">
    </form>
    </body>
    Type=Button
    <input type="submit">defines a button forsubmittinga form to
    aform-handler.
    The form-handler is typically a server page with a script for processing
    input data. The form-handler is specified in the form'sactionattribute:

    <body>
    <form action="action_page.php">
    First name:<br>
    <input type="text"
    name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text"
    name="lastname" value="Mouse">
    <br><br>
    <input type="button"
    value="Submit">
    </form>
    </body>
    Type=Submit
    <input type="submit">defines a button forsubmittinga form to
    aform-handler.
    The form-handler is typically a server page with a script for processing
    input data. The form-handler is specified in the form'sactionattribute:
    <body>
    <form action="action_page.php">
    First name:<br>
    <input type="text"
    name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text"
    name="lastname" value="Mouse">
    <br><br>
    <input type="submit"
    value="Submit">
    </form>
    </body>
    PRACTICAL
    IMPLEMENTATION
    Visit Us : Attitude Academy

    You might also like