Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Ch.6a HTML - Form

    Загружено:

    wfscmgbh
    25 просмотров8 страниц
    The document provides an overview of HTML forms and form elements. It explains that forms are used to collect user input and that this data can be processed on both the client-side and server-side. Basic form syntax and common input elements like text, textarea, radio buttons, checkboxes and select menus are described. It also discusses how forms submit data via GET or POST methods and provides examples of how forms can be used to collect order information and other data from users.

    Исходное описание:

    Оригинальное название

    ch.6a html_form

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    The document provides an overview of HTML forms and form elements. It explains that forms are used to collect user input and that this data can be processed on both the client-side and server-side. Basic form syntax and common input elements like text, textarea, radio buttons, checkboxes and select menus are described. It also discusses how forms submit data via GET or POST methods and provides examples of how forms can be used to collect order information and other data from users.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    25 просмотров8 страниц

    Ch.6a HTML - Form

    Загружено:

    wfscmgbh
    The document provides an overview of HTML forms and form elements. It explains that forms are used to collect user input and that this data can be processed on both the client-side and server-side. Basic form syntax and common input elements like text, textarea, radio buttons, checkboxes and select menus are described. It also discusses how forms submit data via GET or POST methods and provides examples of how forms can be used to collect order information and other data from users.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 8

    HTML – Form

    F
    22/02/2010

    Byy Tonyy Chun-Kuen WONG

    FORM

     Form is used to collect information from users.


     Information collected can be used in both client-side and server-
    side scripts.
     B i FORM ttag
    Basic
    <form action = “URL address” method=“transmission method”>
    // the content of the form
    </form>

     action : specify the server script for processing the form data
     “action”
    action can also be mailto:email_address
    mailto:email address
    <form action =mailto: tckwong@hkbu.edu.hk> ….. </form>
    A Simple Example (orderform.html)
    http://isem03 hkbu edu hk/~isemuser20/form/orderform html
    http://isem03.hkbu.edu.hk/~isemuser20/form/orderform.html
    <html><head>
    <title>Bob's Auto Parts</title>
    </head><body>
    <h1>Bob's Auto Parts</h1>
    <h2>Order Form</h2>
    <form action="processorder.php" method=post>

    // Detail deleted, the following


    g is the last item

    <tr>
    <td>Spark Plugs</td>
    <td align=center><input type="text" name="sparkqty" size=3
    maxlength=3></td>
    </tr>
    <tr>
    <td colspan=2 align=center><input type=submit value="Submit
    Order"></td>
    </tr>
    </table></form></body></html>

    Get and Post

     method: specify
    p y how the form data should be sent
     post
     get
     G (Program
    Get ( : orderformGET.html)
    f G )
     http://isem03.hkbu.edu.hk/~isemuser20/form/orderformGET.html
     The system will transmits the variables to the designated php
    file and separate by the ? and &
     It will transmits the data immediately (maximum 2K each
    ti )
    time)
     Appended to the end of the URL
     Post
     The system will encrypt the data and transmits the data to the
    designated php file
     It will wait for the server to read the data.
     Sent as a separate packet
    FORM Input Elements
    <input type = “option” name = “field_name”
    value = “default _value” size = “width of the input box” checked>

    option
    p is the type
    yp of input
    p field
    name is the name of the field and it will be treated as
    variable name in script
    p
    checked is used to select the default_value for
    checkbox or radio

    input type
    text, textarea, password, checkbox, radio,
    hidden reset,
    hidden, reset submit,
    submit image,
    image button,
    button file

    Text and Password Input

     Text input type is used to input small quantity of text


    <input type=“text” name=“filename” value = “Name here please”
    size=10 maxlength=15 />
     value:
    al e: the default
    defa lt text
    te t shown
    sho n on the screen
     size: the length of the text box shown on the screen

     maxlength:
    g the maximum number of characters that can be entered
     Password input type is the same as Text input box, but the
    input will be shown as “*”.
    <input type=“password” name =“…” size= … maxlength= “…”>
     Textarea input type allow user to enter larger quantity of
    text
    Text Area Input

     Textarea input type allow user to enter larger quantity of


    text
     <TEXTAREA ROWS=value COLS=value NAME=Text>Default
    text </TEXTAREA>
     <TEXTAREA ROWS=5 COLS=15 NAME= NAME=“testcomment”>Enter
    testcomment >Enter
    comment here</TEXTAREA>
     COLS and ROWS define the number of columns and rows of the
    text area.
     Default text can be empty, but you need to include the
    </TEXTAREA> anyway. y y

    Check Box

     Check Box create a control that can be toggled between


    checked and unchecked.
    <INPUT TYPE=“checkbox” NAME=“notification” />
     You can give a set of checkbox the same NAME. They
    will be treated as a group when submitted for procession.
    <INPUT TYPE="checkbox"
    TYPE " h kb " NAME="interest"
    NAME "i t t" />
    <INPUT TYPE="checkbox" NAME="interest" />
    <INPUT
    U TYPE="checkbox" NAME="interest" />
    Radio Button

     Radio Button is similar to check box with different display


    <INPUT TYPE=“radio” NAME=“notify” VALUE=“Yes” />
     VALUE is mandatory, the value is sent to the server if the
    radio button is selected.
     To form a mutually exclusive choices, use same NAME
    f a number
    for b off radio
    di buttons.
    b
    <INPUT TYPE="radio" NAME="gender" VALUE="Male" />
    <INPUT TYPE="radio"
    TYPE= radio NAME=
    NAME="gender"
    gender VALUE=
    VALUE="Female"
    Female />

    Menus

     SELECT and OPTION can be used to create a menu of


    choices
    <SELECT NAME="fruit" SIZE=2>
    <option
    i value="app">Apple</option>
    l l / i
    <option value="org">Orange</option>
    <option value
    value="ban">Bananna</option>
    ban >Bananna</option>
    </SELECT>
     SIZE attribute can be used to create a scrollable menu.
     The text of the VALUE attribute of OPTION will be sent
    to the server. Without the VALUE, the displayed text will
    be sent.
    Hidden Field and File Upload

     HIDDEN field can be use to include information you don’t


    want user to see.
     The value of the hidden field will be sent to the server
    when the form is submitted.
    <INPUT TYPE="hidden" NAME="testhidden" VALUE="1234" />

     FILE type can be used to upload file to the server


    <INPUT TYPE="file"
    TYPE= file NAME=
    NAME="fileup"
    fileup />

    Buttons

     SUBMIT input type creates a button used to submit the


    form to the server.
     The text of VALUE attribute will be shown on the button.
    <input type="submit" value="Send Out">
     RESET input type creates a button used to clear the form.
    <input type="reset" value="Clear the Form">
     BUTTON input type creates a push button that can be used
    to call a client-side
    client side script.
    script
    <INPUT TYPE="button" NAME="hello"
    VALUE="Press to say
    y hello" ONCLICK="helloworld()"
    () />
    Examples
    l

    Ex1 : A Simple Example again


    http://isem03.hkbu.edu.hk/~isemuser20/form/orderform.html
    p

    Processingg pprogram
    g : Processorder.php
    p p
    called by orderform.html

    Ex2 : Calling program : formdemo.html


    http://isem03.hkbu.edu.hk/ isemuser20/form/formdemo.html
    http://isem03.hkbu.edu.hk/~isemuser20/form/formdemo.html

    Processing program : formdemo.php


    formdemo php
    called by formdemo.html

    Questions ?

     How to collect and process the data from the form ?


     You need a server side scripting language.
     PHP can solve the problem.
    p

     How to store the data and retrieve data stored ?


     PHP PROGRAM with MySQL y Q support……..
    pp
    HTML and FORM tutorial from w3Schools

     HTML tutorial

     http://www.w3schools.com/html/default.asp

     Form tutorial
     http://www.w3schools.com/html/html_forms.asp

    Вам также может понравиться