Scribd Logo
Upload

Welcome to Scribd!

  • HTML5 Form Controls Continued

    Uploaded by

    suzana younas
    28 views24 pages
    The <figure> element groups related content like images and captions. The <figcaption> element provides a caption for the <figure> element. The <main> element specifies the main content of a document and must not contain repeated content like navigation. HTML5 introduced new form elements like <datalist> and new input types like date, color, range, email which provide customized input controls depending on browser support.

    Original Description:

    web development, HTML 5

    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 <figure> element groups related content like images and captions. The <figcaption> element provides a caption for the <figure> element. The <main> element specifies the main content of a document and must not contain repeated content like navigation. HTML5 introduced new form elements like <datalist> and new input types like date, color, range, email which provide customized input controls depending on browser support.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    28 views24 pages

    HTML5 Form Controls Continued

    Uploaded by

    suzana younas
    The <figure> element groups related content like images and captions. The <figcaption> element provides a caption for the <figure> element. The <main> element specifies the main content of a document and must not contain repeated content like navigation. HTML5 introduced new form elements like <datalist> and new input types like date, color, range, email which provide customized input controls depending on browser support.

    Copyright:

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

    HTML5 <figure> &

    <figcaption>
    • The purpose of a <figcaption> is to add a visual explanation to an image.
    • With HTML5, images and captions can be grouped together in <figure>
    elements.

    <figure>
    <img src="html5.png" alt="HTML5" width="200" height="350" />
    <figcaption>HTML5 - The Latest Version of HTML</figcaption>
    </figure>
    HTML5 <main>
    Element
    • The <main> tag specifies the main content of a document.
    • The content inside the <main> element should be unique to the
    document. It should not contain any content that is repeated across
    documents such as sidebars, navigation links, copyright information, site
    logos, and search forms.
    • There must not be more than one <main> element in a document.
    • The <main> element must NOT be a descendant of an <article>,
    <aside>,
    <footer>, <header>, or <nav> element.
    HTML5 <main>
    Element
    <body>
    <header>
    <h1>Website Heading</h1>
    </header>

    <main>
    ...
    </main>

    <footer>
    <p>&copy; HTML5 Developers.</p>
    </footer>
    </body>
    HTML5 <mark>
    Element
    • The <mark> tag defines marked text.
    • Use the <mark> tag if you want to highlight parts of your text.

    <article>
    <h1>HTML5</h1>
    <p>HTML5 is used for <mark>structuring</mark> and presenting
    content for the World Wide Web</p>
    </article>
    HTML5 FORM CONTROLS
    HTML5 Form
    Elements
    • HTML5 added the following form elements:

    – <datalist>
    – (Already Covered in Previous Lecture)
    HTML5 <datalist>
    Element
    • The <datalist> element specifies a list of pre‐defined options for an <input>.
    • Users will see a drop‐down list of pre‐defined options as they input data.
    • The list attribute of the <input> element, must refer to the id attribute of the
    <datalist> element.

    <form action="">
    <input type="text" list="browsers" />
    <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Safari">
    </datalist>
    </form>

    See Example: HTML5 datalist


    HTML5 Input
    Types
    • HTML5 added several new input types.
    <input type="text" name="something" />
    • NOTE: Input types, not supported by old web browsers, will behave as input type
    text.

    • date • color
    • month • number
    • week • range
    • time • email
    • datetime‐local • search
    • tel
    • url
    Input 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.
    <form action="">
    Quantity (between 1 and 5):

    <input type="number" name="quantity" min="1" max="5" /><br /> Weight (10,20,30...100):


    <input type="number" name="weight" min="10" max="100" step="10" value="40" /><br />

    <input type="submit" />


    </form>

    See Example: Iinput Type: number


    Input 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.

    <form action=""> Enter a date:


    <input type="date" name="bday1" /><br />

    Enter a date between 2010-01-01 & 2015-12-31:


    <input type="date" name="bday4" min="2010-01-01" max="2015-12- 31" /><br />
    </form>

    See Example: Input Type: date


    Input 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.

    <form action="">
    Select your favorite color:
    <input type="color" name="favcolor" value="#ff0000" />
    <input type="submit" />
    </form>

    See Example: Input Type: color


    Input 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.

    <form action=""> Points:


    <input type="range" name="points" min="0"
    max="10" />
    <input type="submit" />
    </form>

    See Example: Input Type: range


    Input 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.

    <form action=""> E-mail:


    <input type="email" name="email" />
    <input type="submit" />
    </form>

    See Example: Input Type: email


    HTML5
    Attributes
    • HTML5 added the following attributes for <input>:

    • autocomplete • list
    • autofocus • min and max
    • form • multiple
    • formaction • pattern (regexp)
    • formenctype • placeholder
    • formmethod • required
    • formnovalidate • step
    • formtarget
    • height and width

    See Example: http://www.w3schools.com/html/html_form_attributes.asp


    The pattern
    Attribute
    • The pattern attribute specifies a regular expression that the <input>
    element's value is checked against.
    • The pattern attribute works with the following input types: text, search,
    url, tel, email, and password.

    <form action=""> Country code:


    <input type="text" name="country_code" pattern="[A-Za-z]{3}"
    title="Three letter country code" />
    <input type="submit" />
    </form>

    See Example: The pattern Attribute


    The placeholder
    Attribute
    • The placeholder attribute specifies a hint that describes the expected value of
    an input field (a sample value or a short description of the format).
    • The hint is displayed in the input field before the user enters a value.
    • The placeholder attribute works with the following input types: text, search,
    url, tel, email, and password.

    <form action="">
    <input type="text" name="fn" placeholder="First name" /><br />
    <input type="text" name="ln" placeholder="Last name" /><br />
    <input type="submit" value="Submit" />
    </form>

    See Example: The placeholder Attribute


    The required
    Attribute
    • The required attribute is a boolean attribute.
    • When present, it specifies that an input field must be filled out before
    submitting the form.
    • The required attribute works with the following input types: text, search, url,
    tel, email, password, date pickers, number, checkbox, radio, and file.

    <form action="">
    Username: <input type="text" name="usrname" required />
    <input type="submit" />
    </form>

    See Example: The required Attribute


    HTML5 MULTIMEDIA ELEMENTS
    HTML5
    Video
    • Before HTML5, there was no standard for showing videos on a web page.

    • Before HTML5, videos could only be played with a plug‐in (like flash).

    • The HTML5 <video> element specifies a standard way to embed a video in


    a web page.
    HTML5
    Video
    • HTML5 <video> element supports 3 video formats: MP4, WebM, and Ogg:

    Browser MP4 WebM Ogg

    Internet Explorer YES NO NO

    Chrome YES YES YES

    Firefox YES YES YES

    Safari YES NO NO

    Opera YES (from Opera 25) YES YES


    HTML5
    Video
    • The controls attribute adds video controls, like play, pause, and volume.
    • Text between the <video> and </video> tags will only display in browsers that do not
    support the <video> element. To start a video automatically use the autoplay attribute
    • Multiple <source> elements can link to different video files. The browser will use the
    first recognized format.

    <video width="320" height="240" controls autoplay>


    <source src="movie.mp4" type="video/mp4" />

    <source src="movie.ogg" type="video/ogg" /> Your browser does not


    support the video tag.
    </video>

    See Example: HTML5 Native Video


    HTML5 Audio
    • Before HTML5, there was no standard for playing audio files on a web
    page.

    • Before HTML5, audio files could only be played with a plug‐in (like
    flash).

    • The HTML5 <audio> element specifies a standard way to embed audio in a


    web page.
    HTML5 Audio
    • HTML5 <audio> element supports 3 audio formats: MP3, Wav, and Ogg:

    Browser MP3 Wav Ogg

    Internet Explorer YES NO NO

    Chrome YES YES YES

    Firefox YES YES YES

    Safari YES YES NO

    Opera YES YES YES


    HTML5 Audio
    • The controls attribute adds audio controls, like play, pause, and volume.
    • Text between the <audio> and </audio> tags will display in browsers that do not
    support the <audio> element. To start a audio automatically use the autoplay attribute
    • Multiple <source> elements can link to different audio files. The browser will use the
    first recognized format.

    <audio controls autoplay>


    <source src="sound.ogg" type="audio/ogg" />

    <source src="sound.mp3" type="audio/mpeg" /> Your browser does not support the audio
    element.
    </audio>

    See Example: HTML5 Native Audio

    You might also like