Scribd Logo
Upload

Welcome to Scribd!

  • Form

    Uploaded by

    Tech Code
    5 views14 pages
    The form uses input elements like text, radio buttons, checkboxes and textarea to collect user name, address, qualification, citizenship, and visit details. The qualification uses a radio button to select the highest qualification, while citizenship allows multiple selections with checkboxes. The visit details are entered in a textarea. Submit and reset buttons are included to submit or reset the form.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The form uses input elements like text, radio buttons, checkboxes and textarea to collect user name, address, qualification, citizenship, and visit details. The qualification uses a radio button to select the highest qualification, while citizenship allows multiple selections with checkboxes. The visit details are entered in a textarea. Submit and reset buttons are included to submit or reset the form.

    Copyright:

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

    Form

    Uploaded by

    Tech Code
    The form uses input elements like text, radio buttons, checkboxes and textarea to collect user name, address, qualification, citizenship, and visit details. The qualification uses a radio button to select the highest qualification, while citizenship allows multiple selections with checkboxes. The visit details are entered in a textarea. Submit and reset buttons are included to submit or reset the form.

    Copyright:

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

    Form Design in HTML

    HTML form is used to collect user input.


    − The user input is sent to a server for processing
    − HTML <form> element is used to create an HTML form for user input
    <form>
    .
    form elements
    .
    </form>

    <form> element is a container for different types of input


    elements
    − such as: text fields, checkboxes, radio buttons, submit buttons etc.
    The <input> Element
    Mostly used element
    − Can be used in variety of ways as per type attribute value
    − <input type="text"> Displays a single-line text input field
    − <input type="radio"> Displays a radio button
    − <input type="checkbox"> Displays a checkbox
    − <input type="submit"> Displays a submit button
    − <input type="button"> Displays a clickable button
    <label> element
    Defines labels for many elements
    To bind label with any element keep the for
    attribute value of label tag and id attribute
    value of input tag equal
    − <label for=”FName”> … </label>
    − <input id=”FName”>
    Sample Program for <input>
    element
    <html>
    <body>
    <form>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="Sandeep"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Kumar">
    </form>
    </body>
    </html>
    Radio button
    <input type="radio"> defines a radio button
    − Select one from the available choices
    <html>
    <body>
    <h2>Radio Buttons</h2>
    <form>
    <input type="radio" id="india" name="country" value="India">
    <label for="india">INDIA</label><br>
    <input type="radio" id="usa" name="country" value="USA">
    <label for="usa">USA</label><br>
    <input type="radio" id="germany" name="country" value="Germany">
    <label for="germany">Germany</label>
    </form>
    </body>
    </html>
    Checkbox: To select choices

    <html>

    <body>

    <h2>Checkboxes</h2>

    <form action="" method=””>

    <input type="checkbox" id="college1" name="college1" value="ITS">

    <label for="college1"> ITS College</label><br>

    <input type="checkbox" id="college2" name="college2" value="NIT">

    <label for="college2"> National Institute of Tech. </label><br>

    <input type="checkbox" id="college3" name="college3" value="IIT">

    <label for="college3"> Indiain Inst. Of Tech. </label><br><br>

    <input type="submit" value="Submit">

    </form>

    </body>

    </html>
    Submit button

    <html>

    <body>

    <h2>HTML Forms</h2>

    <form action="/serversidescript" method="get">

    <label for="fname">First name:</label><br>

    <input type="text" id="fname" name="fname" value="Sandeep"><br>

    <label for="lname">Last name:</label><br>

    <input type="text" id="lname" name="lname" value="Kumar"><br><br>

    <input type="submit" value="Submit">

    </form>

    <p>If you click the "Submit" button, the form-data will be sent to a page called "/serversidescript".</p>

    </body>

    </html>
    Attributes of form element
    action
    − Specifies the location of server side script where the form values will
    be sent
    Like servlet program which connects with database and store the reeceived
    values into the related tables for using lates

    Method
    − Get
    Passed values visible, limited amount of information can be passed
    − Post
    Not visible, large amount of information

    Target
    − Specify where to display the received response after submitting the
    form
    <select> element: Drop down
    list
    <html>

    <body>

    <h2>The select Element</h2>

    <form action="/serverProgram">

    <label for="qualification">Select Qualification</label>

    <select id="qualification" name="qualification">

    <option value="UG">Under Graduate</option>

    <option value="PG">Post Graduate</option>

    <option value="PhD">Doctorate</option>

    </select>

    <input type="submit" value="Submit">

    </form>

    </body>

    </html>
    <select > element attributes
    Size
    − To specify number of visible values

    Multiple
    − To allow selection of multiple values

    User selected attribute to chage default


    selection (first item)
    <textarea> element
    <html>
    <body>
    <h2>Textarea</h2>
    <form action="ServerScript">
    <textarea name="Hello World" rows="10" cols="30">Final year exams are scheduled
    on September 08</textarea>
    <br><br>
    <input type="submit" value="submit">
    </form>
    </body>
    </html>
    File Dialog box to select file
    <html>
    <body>
    <h3> Example of a File Select Box </h3>
    <form>
    <label for="filesel">Upload:</label>
    <input type="file" name="upload" id="filesel">
    </form>
    </body>
    </html>
    Password field
    <html>
    <body>
    <h3>Example of Password Field</h3>
    <form>
    <label for=“passwd">Password: </label> <br>
    <input type="password" name="userpwd"
    id=“passwd">
    </form>
    </body>
    </html>
    Design a HTML Form to get user
    inputs
    User Name
    Address
    Qualification (UG/PG/PhD)
    − Can select only one choice i.e. highest qualitifcation
    Citizenship (India/ USA/ UK): Can have citizenship of
    more than once counrty
    Visit Details
    − Writeup of about 100 word
    Reset and Submit buttons

    You might also like