Scribd Logo
Upload

Welcome to Scribd!

  • 25 views

    Client Side Programming

    Uploaded by

    sweeti sah
    The document describes a JavaScript program for form validation that creates a form with various input elements and then defines a validation function to check on form submit that required fields are filled out and data is valid, alerting the user to any errors and preventing submission if validation fails. Key steps are to create the form, add a submit button to trigger validation, and write validation logic to check for empty or invalid fields.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Client Side Programming

    Uploaded by

    sweeti sah
    25 views9 pages
    The document describes a JavaScript program for form validation that creates a form with various input elements and then defines a validation function to check on form submit that required fields are filled out and data is valid, alerting the user to any errors and preventing submission if validation fails. Key steps are to create the form, add a submit button to trigger validation, and write validation logic to check for empty or invalid fields.

    Original Description:

    Original Title

    client side programming

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes a JavaScript program for form validation that creates a form with various input elements and then defines a validation function to check on form submit that required fields are filled out and data is valid, alerting the user to any errors and preventing submission if validation fails. Key steps are to create the form, add a submit button to trigger validation, and write validation logic to check for empty or invalid fields.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    25 views9 pages

    Client Side Programming

    Uploaded by

    sweeti sah
    The document describes a JavaScript program for form validation that creates a form with various input elements and then defines a validation function to check on form submit that required fields are filled out and data is valid, alerting the user to any errors and preventing submission if validation fails. Key steps are to create the form, add a submit button to trigger validation, and write validation logic to check for empty or invalid fields.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 9

    1.

    APPLYING STYLE TO AN HTML PAGE USING CSS


    To create an html page, and to apply style formatting using external Cascading
    Style Sheet.

    Algorithm:
    Step 1: Start the program.
    Step 2: Create an html page.
    Step 3: Create an external CSS (Cascading Style Sheet).
    Step 4: Link the external style sheet page with the main html page.
    Step 5: Load the main page.
    Step 6: The style formatting will be applied to the main html page.
    Step 7: Stop the program.
    PROGRAM:
    Style.html
    <html>
    <head>
    <style type="text/css">
    .class1 A:link {text-decoration: none}
    .class1 A:visited {text-decoration: none}
    .class1 A:active {text-decoration: none}
    .class1 A:hover {text-decoration: underline; color: red;}
    .class2 A:link {text-decoration: underline overline}
    .class2 A:visited {text-decoration: underline overline}
    .class2 A:active {text-decoration: underline overline}
    .class2 A:hover {text-decoration: underline; color: green;}
    </style>
    <title>My first styled page</title>
    <link rel="stylesheet"href="mystyle.css">
    <style type="text/css">
    <!--
    .style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
    -->
    </style>
    </head>
    <body>
    <!--site navigation menu-->
    <span class="class2">
    <ul class="navbar">
    <li><a href="home.html">HOME</a>
    <li><a href="home.html">Department</a>
    <li><a href="home.html">Contact us</a>
    </ul>
    </span>
    <!--Main content-->
    <h1>My first Internal styled page</h1>
    <p> Thiruvalluvar College of Engineering and Technology resolves to mould a
    human task force useful to the society through transparent methods
    that lead to continuous improvement of the resources and state-of-the-art
    methodologies conforming to recognized standards.
    <!--sign and date the page-->
    <p><address class="style2" >M.E(CSE) <br>
    31-06-2011</address></p>
    </body>
    </html>
    Mystyle.html:
    <html>
    <head>
    <title>My first styled page</title>
    <link rel="stylesheet"href="mystyle.css">
    </head>
    <body>
    <!--site navigation menu-->
    <ul class="navbar">
    <li><a href="About.html">About us</a>
    <li><a href="home.html">Department</a>
    <li><a href="home.html">Contact us</a>
    </ul>
    <!--Main content-->
    <h1>My first External styled page</h1>
    <p> THIRUVALLUVAR COLLEGE OF ENGINEERING AND
    TECHNOLOGY <BR>
    ARUNACHAL CITY<br>
    VANDAVASI<br>
    <p>
    An ISO 9001:2008 institution<br>
    NBA Accredited<br>
    <!--sign and date the page-->
    <p><address>December 28th <br>
    Dept. of I.T.</address>
    </body>
    </html>
    /* CSS Document */
    BODY
    {
    PADDING-LEFT: 11em;
    COLOR: purple;
    FONT-FAMILY: Georgia, "Times New Roman",
    Times, serif;
    BACKGROUND-COLOR: #d8da3d
    }
    UL.navbar
    {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    LEFT: 1em;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    WIDTH: 9em;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none;
    POSITION: absolute;
    TOP: 2em
    }
    H1
    {
    FONT-FAMILY: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
    }
    UL.navbar LI
    {
    BORDER-RIGHT: 1em solid;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    BACKGROUND: white;
    PADDING-BOTTOM: 0.3em;
    MARGIN: 0.5em 0px;
    PADDING-TOP: 0.3em
    }
    OUTPUT:
    RESULT:

    Thus an html page is created and style formatting is applied using external
    Cascading Style Sheet.
    2. Client Side Programming
    Form Validation

    AIM: To write a Java script program for Form Validation including text field,
    radio buttons, check boxes, list box and other controls.

    ALGORITHM:
    Client Side Programming - Form validation

    1. Create a form by including all the elements of java script.


    Ex: <input type=”button” value=”OK”>
    <input type=”checkbox” name=”c”>
    <input type=”text”> etc.

    2. Create a button in such a way that when the button is clicked the form has to
    be validated (i.e. it has to check whether all fields in the form are filled and the
    data entered are valid).
    PROGRAM:
    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <b><font face="Verdana"><font size=+1>Form Validation Example: Feedback
    Form</font></font></b>
    <br><script LANGUAGE="JavaScript">
    <!--
    function ValidateForm(form){
    ErrorText= "";
    if (form.username.value == "") {ErrorText= "\nPlease enter your name"}
    if ((form.email.value == "" || form.email.value.indexOf('@', 0) == -1) ||
    form.email.value.indexOf('.') == -1){
    ErrorText+= "\nPlease enter a proper value for your email"}
    if (form.feedback.value == "") {ErrorText+= "\nPlease enter your feedback"}
    if (ErrorText!= "") {
    alert("Error :" + ErrorText);
    return false;
    }
    if (ErrorText= "") { form.submit() }
    ErrorText= "";
    if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false )
    ) { alert ( "Please choose your Gender: Male or Female" ); return false; }
    if (ErrorText= "") { form.submit() }
    ErrorText= "";
    if ( form.age.selectedIndex == 0 ) { alert ( "Please select your Age." ); return
    false; }
    if (ErrorText= "") { form.submit() }
    alert ( "Thank u" )
    }
    -->
    </script>
    <br><form name="feedback" action="mailto:webgimmicks@email.com"
    method=post>
    <dl>
    <dt>
    <font face="Verdana">
    <pre>
    Please enter the following(To test form validation, skip entering one of the
    fields and click 'Submit' button):
    </pre>
    </font>
    <font face="Verdana">Name: &nbsp;</font><input type="text" value=""
    name="username" size=30></dt><br>
    <br><dt> <font face="Verdana">E-mail: &nbsp;</font><input type="text"
    value="" name="email" size=30></dt><br>
    <br><dt><font face="Verdana">Your Gender:</font>
    <input type="radio" name="gender" value="Male">
    Male
    <input type="radio" name="gender" value="Female">
    Female </dt><dt> </dt> <br>
    <font face="Verdana, Arial, Helvetica, sans-serif">Your Age</font>: <select
    name="age"> <option value="">Please Select an Option:</option> <option
    value="0-18 years">0-18 years</option> <option value="18-30 years">18-30
    years</option> <option value="30-45 years">30-45 years</option> <option
    value="45-60 years">45-60 years</option> <option value="60+ years">60+
    years</option> </select>
    <br>
    <br><font face="Verdana">Feedback:</font>
    <dt><textarea rows=7 cols=60 name="feedback"></textarea></dt>
    </dl>
    <input type="button" name="SubmitButton" value="Submit"
    onClick="ValidateForm(this.form)">
    <input type="reset" value="Reset">
    </form>
    <pre><font face="Verdana"><font size=+0>&nbsp; &nbsp;</font></font>
    </pre>
    </form>
    </body>
    </html>

    Output:

    You might also like