Scribd Logo
Upload

Welcome to Scribd!

  • Unit 2 - Chapter 04 - Working With Forms

    Uploaded by

    Snr Berel Shepherd
    26 views24 pages
    - Forms allow users to enter interactive input on a web page. The <FORM> tag defines a form and supports attributes like NAME, ACTION, METHOD, and ENCTYPE. - Common form fields include text boxes, radio buttons, checkboxes, buttons, select lists, and text areas, which are created using tags like <INPUT>, <SELECT>, and <TEXTAREA>. - The <INPUT> tag represents a field and has attributes like TYPE, VALUE, NAME, CHECKED, SIZE, and MAXLENGTH. The <SELECT> tag creates a drop-down list and has attributes like MULTIPLE and SIZE. The <OPTION> tag defines options within <SELECT>. - A

    Original Description:

    eXAM STUFF

    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
    - Forms allow users to enter interactive input on a web page. The <FORM> tag defines a form and supports attributes like NAME, ACTION, METHOD, and ENCTYPE. - Common form fields include text boxes, radio buttons, checkboxes, buttons, select lists, and text areas, which are created using tags like <INPUT>, <SELECT>, and <TEXTAREA>. - The <INPUT> tag represents a field and has attributes like TYPE, VALUE, NAME, CHECKED, SIZE, and MAXLENGTH. The <SELECT> tag creates a drop-down list and has attributes like MULTIPLE and SIZE. The <OPTION> tag defines options within <SELECT>. - A

    Copyright:

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

    Unit 2 - Chapter 04 - Working With Forms

    Uploaded by

    Snr Berel Shepherd
    - Forms allow users to enter interactive input on a web page. The <FORM> tag defines a form and supports attributes like NAME, ACTION, METHOD, and ENCTYPE. - Common form fields include text boxes, radio buttons, checkboxes, buttons, select lists, and text areas, which are created using tags like <INPUT>, <SELECT>, and <TEXTAREA>. - The <INPUT> tag represents a field and has attributes like TYPE, VALUE, NAME, CHECKED, SIZE, and MAXLENGTH. The <SELECT> tag creates a drop-down list and has attributes like MULTIPLE and SIZE. The <OPTION> tag defines options within <SELECT>. - A

    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

    WORKING WITH FORMS

    Objectives
    In this session, you will learn to:

    • Familiarize yourself with the form


    attributes and fields.
    • Create a form using HTML
    WORKING WITH FORMS

    • Forms can be interactive by obtaining user input.


    The <FORM> Tag
    • The <FORM> tag enables you to define a form; all the
    other controls of the form are enclosed within this tag.
    WORKING WITH FORMS

    • The <FORM> tag supports the following attributes:


    • NAME
    • ACTION
    • METHOD
    • ENCTYPE

    The syntax of the NAME attribute is:


     
    <FORM NAME= “User defined name”>
     
    WORKING WITH FORMS

    ACTION Attribute
    The ACTION attribute specifies the URL to which the form data is
    submitted to elicit a response.
     
    The syntax of the ACTION attribute is:
    <FORM ACTION= “filename”>
     
    METHOD Attribute

    The METHOD attribute is used to specify the format in which the data will
    be sent to the server. It can take either of the following values:
     
    WORKING WITH FORMS

    (i) GET: Using this method, the information is added to the URL. This method is not secure
    because the information is visible in the URL.
    (ii) POST: Using this method, the information is sent as a block of data through an HTTP post
    transaction.
    • The default value of the METHOD attribute is GET, the difference between the two values
    is the way in which the data in the form is processed.

    ENCTYPE Attribute
    This attribute specifies the content type when using the POST method to submit the form, the
    content type specifies the type of file to be executed and submitted. Its values are media
    types for example text/html.
     
    The syntax of the ENCTYPE attribute is:
     
    <FORM ENCTYPE= “content type”>
    Creating simple HTML forms
    <!DOCTYPE html>
    <html>
    user name:
    <head> <input type="text" name=“username”
    <title> Creating HTML Forms </title> />
    </head> password:
    <body> <input type="password“
    name=“password”/>
    <h3>creating html forms</h3> <br>
    <input type="submit" value=
    <p>please log in below!</p>
    "Login" /><br>
    </form>
    <form action="action_page.php”
    method=“post”> </body>
    WORKING WITH FORMS
    Types of Form Fields
    To create different fields in forms there are different certain tags
    that are used to define those fields. Below is a list of the fields
    and their respective tags.
    The various fields in a Web form are:
    • Text box
    • Radio buttons
    • Check box
    • Buttons
    • Select lists
    • Text area
    WORKING WITH FORMS
    https://www.w3schools.com/html/html_form_elements.asp

    The tags (form elements)used to create fields in a form are:


    INPUT Tag SELECT Tag TEXTAREA Tag
    <INPUT > Tag
    This tag represents a field that enables the user to edit
    content. The various attributes of the <INPUT> tag are: 

    NAME CHECKED
    SIZE MAXLENGTH
    ALIGN SRC
    TYPE VALUE
    <label for="fname">First name:</label>
    <input type="text"id="fname"name="fname">
    The <select> Element:
    <select id="cars" name="cars">
      <option value="volvo">Volvo</option>
    The <textarea> Element
    <textarea name="message" rows="10" cols="30"
    >
    The cat was playing in the garden.
    </textarea>
    <!DOCTYPE html> <option
    <html>
    <body>
    value="fiat">Fiat</option>
    <h2>The select Element</h2> <option
    <p>The select element defines a drop- value="audi">Audi</option>
    down list:</p>
    <form action="/action_page.php"> </select>
    <label for="cars">Choose a car:</label> <input type="submit">
    <select id="cars" name="cars"> </form>
    <option
    value="volvo">Volvo</option>
    <option </body>
    value="saab">Saab</option> </html>
    The <button> Element
    The <output> Element
    <!DOCTYPE html>
    <html> <body>
    <form action="/action_page.php"
    oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0
    <input type="range" id="a" name="a" value="50">
    100 +
    <input type="number" id="b" name="b" value="50">
    =
    <output name="x" for="a b"></output>
    <br><br>
    <input type="submit">
    </form> </body> </html>
    WORKING WITH FORMS
    https://www.w3schools.com/html/html_form_input_types.asp

    RESET
    Creates a button, which when selected resets all the values of all the fields in the
    form to their initial state.
    Syntax: <INPUT TYPE =RESET>

    HIDDEN
    Creates an invisible field of which the contents of the field are sent with the
    submitted form, it is mostly used to transmit static information about client/server
    interaction that the user needs to know.
    Syntax: <INPUT TYPE=HIDDEN>
    WORKING WITH FORMS
    ACTIVITY
    You are a Web developer at an IT company and you have been assigned a task to create a
    registration form. The form should contain the following fields:

    LOGIN DETAILS
    • Username
    • Password
    • Re-enter Password
    PERSONAL DETAILS
    • First Name
    • Last Name
    • Email Address
    • Gender
    • Phone Number
    QUALIFICATION
    • Qualification Held
    ADD THE SUBMIT AND RESET BUTTONS
    SUMMARY

     Forms are interactive Web Pages that take user input.


     The <FORM> tag defines a form.
     The <FORM> tag supports the following attributes:
    • NAME
    • ACTION
    • METHOD
    • ENCTYPE
     An HTML form has the following types of fields:
    • Text box
    • Radio buttons
    • Check box
    • Buttons
    • Select lists
    • Text area
    SUMMARY

     The <INPUT> tag represents a field in which the user can enter the content. It has the
    following attributes
    • TYPE
    • VALUE
    • NAME
    • CHECKED
    • SIZE
    • MAXLENGTH
    • ALIGN
    • SRC
     The <SELECT> tag is a container tag that creates a drop down list on the form. It has the
    following attributes
    SUMMARY

    • MULTIPLE
    • NAME
    • SIZE
     
     The <OPTION> tag cannot be used as a standalone tag, it should always defined in the
    <SELECT> tag.
     The <TEXTAREA> tag creates a field in which the user can enter a large amount of text.
    References

    https://www.w3schools.com/html/html_forms.asp

    You might also like