Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Conquer Forms With HTML5 and CSS3

    Hochgeladen von

    vaishali khairnar
    137 Ansichten96 Seiten

    Originaltitel

    Conquer Forms with HTML5 and CSS3.ppt

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    © All Rights Reserved
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    137 Ansichten96 Seiten

    Conquer Forms With HTML5 and CSS3

    Hochgeladen von

    vaishali khairnar

    Copyright:

    © All Rights Reserved
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 96

     Explore FORM elements

     Learn how to create a FORM


     Understand the style of HTML5 FORM with
    CSS3
     <form> is just another kind of HTML tag
     Forms are used to create (rather primitive) GUIs on Web
    pages
     Usually the purpose is to ask the user for information
     The information is then sent back to the server
     A form is an area that can contain form elements
     The syntax is: <form parameters> ...form elements... </form>
     Form elements include: buttons, checkboxes, text fields, radio
    buttons, drop-down menus, etc
     Other kinds of tags can be mixed in with the form elements
     A form usually contains a Submit button to send the information
    in he form elements to the server
     The form’s parameters tell JavaScript how to send the
    information to the server (there are two different ways it could
    be sent)
     Forms can be used for other things, such as a GUI for simple
    programs
     The JavaScript language can be used to make pages
    that “do something”
     You can use JavaScript to write complete programs, but...
     Usually you just use snippets of JavaScript here and there
    throughout your Web page
     JavaScript code snippets can be attached to various form
    elements
     For example, you might want to check that a zipcode field contains
    a 5-digit integer before you send that information to the server
     Forms can be used without JavaScript, and JavaScript
    can be used without forms, but they work well
    together
     On submit, send the form-data to a file
    named "/action_page.php" (to process the
    input):
     The action attribute specifies where to send
    the form-data when a form is submitted.
     <!DOCTYPE html>
     <html>
     <body>

     <form action="/action_page.php">
     First name: <input type="text" name="FirstName"
    value="Mickey"><br>
     Last name: <input type="text" name="LastName"
    value="Mouse"><br>
     <input type="submit" value="Submit">
     </form>

     <p>Click the "Submit" button and the form-data will be sent to a


    page on the server called "/action_page.php".</p>

     </body>
     </html>
    A form with autocomplete on:
     The autocomplete attribute specifies
    whether a form should have autocomplete on
    or off.
     When autocomplete is on, the browser
    automatically complete values based on
    values that the user has entered before.
     <!DOCTYPE html>
     <html>
     <body>

     <form action="/action_page.php" method="get" autocomplete="on">


     First name:<input type="text" name="fname"><br>
     E-mail: <input type="email" name="email"><br>
     <input type="submit">
     </form>

     <p>Fill in and submit the form, then reload the page, start to fill in the form again -
    and see how autocomplete works.</p>
     <p>Then, try to set autocomplete to "off".</p>

     <p><b>Note:</b> The autocomplete attribute of the form element is not supported


    in Opera 12 and earlier versions.</p>

     </body>
     </html>
    A form with an accept-charset attribute:
     The accept-charset attribute specifies the
    character encodings that are to be used for
    the form submission.
     The default value is the reserved string
    "UNKNOWN" (indicates that the encoding
    equals the encoding of the document
    containing the <form> element).
     The enctype attribute specifies how the
    form-data should be encoded when
    submitting it to the server.
     Note: The enctype attribute can be used
    only if method="post".
     The method attribute specifies how to send form-data (the form-data is
    sent to the page specified in the action attribute).
     The form-data can be sent as URL variables (with method="get") or as
    HTTP post transaction (with method="post").
     Notes on GET:
     Appends form-data into the URL in name/value pairs
     The length of a URL is limited (about 3000 characters)
     Never use GET to send sensitive data! (will be visible in the URL)
     Useful for form submissions where a user want to bookmark the result
     GET is better for non-secure data, like query strings in Google
     Notes on POST:
     Appends form-data inside the body of the HTTP request (data is not
    shown is in URL)
     Has no size limitations
     Form submissions with POST cannot be bookmarked

     The name attribute specifies the name of a
    form.
     The name attribute is used to reference
    elements in a JavaScript, or to reference
    form data after a form is submitted.
     The novalidate attribute is a boolean
    attribute.
     When present, it specifies that the form-data
    (input) should not be validated when
    submitted.
     The target attribute specifies a name or a
    keyword that indicates where to display the
    response that is received after submitting
    the form.
     The target attribute defines a name of, or
    keyword for, a browsing context (e.g. tab,
    window, or inline frame).
     <input type="text"> defines a one-line input
    field for text input:
     Example displays a numeric input field,
    where you can enter a value from 0 to 100,
    in steps of 10. The default value is 30
     The <input type="range"> defines a control
    for entering a number whose exact value is
    not important (like a slider control). Default
    range is 0 to 100. However, you can set
    restrictions on what numbers are accepted
    with the min, max, and step attributes:
     The <input type="search"> is used for search
    fields (a search field behaves like a regular
    text field).
     The <input type="tel"> is used for input
    fields that should contain a telephone
    number.
     The tel type is currently supported only in
    Safari 8.
     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 field.
     The <input type="url"> is used for input
    fields that should contain a URL address.
     Depending on browser support, the url field
    can be automatically validated when
    submitted.
     Some smartphones recognize the url type,
    and adds ".com" to the keyboard to match url
    input.
     The <input type="week"> allows the user to
    select a week and year.
     Depending on browser support, a date picker
    can show up in the input field.
     Definea file-select field and a "Browse..."
    button (for file uploads):
     Define a hidden field (not visible to a user).
     A hidden field often stores a default value,
    or can have its value changed by a JavaScript
     Define an image as a submit button
     The <button> tag defines a clickable button.
     Inside a <button> element you can put
    content, like text or images. This is the
    difference between this element and buttons
    created with the <input> element.
    A button located outside a form (but still a
    part of the form)
    A form with two submit buttons. The first
    submit button submits the form data to
    "action_page.php", and the second submits
    to "action_page2.php"
     Create a drop-down list with four options
     The <option> tag defines an option in a
    select list.
     <option> elements go inside
    a <select> or <datalist> element.
     The <optgroup> is used to group related
    options in a drop-down list.
     If you have a long list of options, groups of
    related options are easier to handle for a
    user.
     The <datalist> tag specifies a list of pre-
    defined options for an <input> element.
     The <datalist> tag is used to provide an
    "autocomplete" feature on <input> elements.
    Users will see a drop-down list of pre-defined
    options as they input data.
     Use the <input> element's list attribute to
    bind it together with a <datalist> element.
     The <textarea> tag defines a multi-line text
    input control.
     A text area can hold an unlimited number of
    characters, and the text renders in a fixed-
    width font (usually Courier).
     The size of a text area can be specified by
    the cols and rows attributes, or even better;
    through CSS' height and width properties.
     The <label> tag defines a label for an <input>
    element.
     The <label> element does not render as
    anything special for the user. However, it
    provides a usability improvement for mouse
    users, because if the user clicks on the text
    within the <label> element, it toggles the
    control.
     The for attribute of the <label> tag should be
    equal to the id attribute of the related
    element to bind them together.
     The <fieldset> tag is used to group related
    elements in a form.
     The <fieldset> tag draws a box around the
    related elements.
     The<legend> tag defines a caption for
    the <fieldset> element.
     HTML form can be made responsive using the
    new types of input elements and their
    attributes.
     Using HTML5 and CSS3

    Das könnte Ihnen auch gefallen