Scribd Logo
Загрузить

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

  • Level 2: Forms in HTML: Objective

    Загружено:

    Aarushi Jain
    21 просмотров3 страницы
    jhvhjv.khvbj/lnl:m;'

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

    Forms in HTML

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

    © © All Rights Reserved

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

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

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

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

    Пожаловаться на этот документ
    jhvhjv.khvbj/lnl:m;'

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

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    21 просмотров3 страницы

    Level 2: Forms in HTML: Objective

    Загружено:

    Aarushi Jain
    jhvhjv.khvbj/lnl:m;'

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

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 3

    Level 2 : Forms in HTML

    OBJECTIVE:
    To learn and practice designing forms and listing in HTML.

    DESCRIPTION

    FORMS IN HTML

    These are some basic form fields that you will most likely create in a web form. They are created in HTML with the
    help of <form> and <input> tags in HTML.

    A single line text box

    A radio button

    A checkbox

    A drop-down list

    A text area box

    A Button

    Example HTML code for creating textbox


    <html>
    <body>
    <form name=”f1”>
    First name:<br>
    <input type="text" name="t1" ><br>
    Last name:<br>
    <input type="text" name="t2" ><br><br>
    <input type="button" value="Submit">
    </form>
    </body>
    </html>

    Example HTML code for creating radiobox


    <form>
    <input type="radio" name="gender" value="male" > Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    </form>

    The first step when creating a web form is to identify the form method and the location of the script or utility that makes it
    work. Although books written on HTML design may include a form method of "GET" as well as "POST," we use the POST
    method.
    To identify the form method and script location, type:

    <FORM METHOD="post" ACTION="URL">

    where URL is the absolute address of the script or form utility.

    <FORM METHOD="post" ACTION="http://www.iupui.edu/~networkid/transform.cgi">


    <INPUT TYPE="text" NAME="name" SIZE="size">
    <INPUT TYPE="radio" NAME="name" VALUE="first value" CHECKED>
    < INPUT TYPE="radio" NAME="name" VALUE="second value">

    <SELECT NAME="name">
    < OPTION SELECTED >option one
    < OPTION>option two
    < /SELECT>

    <INPUT TYPE="checkbox" NAME="field name one" VALUE="value one">


    < INPUT TYPE="checkbox" NAME="field name two" VALUE="value two">

    <TEXTAREA NAME="name" ROWS="number_of_rows" COLS="number_of_columns"></TEXTAREA>

    <INPUT TYPE="submit" VALUE="text_for_submit">


    < INPUT TYPE="reset" VALUE="text_for_clear">

    ACTIVITY

    1. Create a small online survey with four questions of your own. Your survey should first collect the participants
    details (name, address, gender, D.O.B., a password etc), followed by four questions to answer.
    Ensure that your survey includes:
    1. Simple text inputs
    2. A password input.
    3. Select drop-down boxes (for State, or within your questions).
    4. Radio buttons and checkboxes (as part of your form design).
    5. A large text area for comments at the end.
    6. A submit button with your own text (such as "Send Survey")
    7. A reset button.

    JAVASCRIPT

    <!DOCTYPE html>
    <html>

    <head>
    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
    </script>
    </head>

    <body>
    <h1>A Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>

    </body>
    </html>

    JavaScript can "display" data in different ways:

     Writing into an HTML element, using innerHTML.


     Writing into the HTML output using document.write().
     Writing into an alert box, using window.alert().
     Writing into the browser console, using console.log().

    <!DOCTYPE html>
    <html>
    <body>

    <h2>What Can JavaScript Do?</h2>

    <p>JavaScript can change HTML attribute values.</p>

    <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

    <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

    <img id="myImage" src="pic_bulboff.gif" style="width:100px">

    <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

    </body>
    </html>

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