Scribd Logo
Upload

Welcome to Scribd!

  • 9 views

    Lab 5

    Uploaded by

    Lijalem Abate
    This document discusses HTML forms and the various elements used to create forms to collect user input on web pages. Forms allow entering text via elements like text boxes, textareas, and passwords. They also support selection elements like radio buttons, checkboxes, dropdown menus, and file uploads. Other elements include submit buttons to send the form data, reset buttons to clear the form, and labels to associate text with form controls. Fieldsets group related form fields, and the form data submission method and target URL are set using attributes on the opening form tag.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Lab 5

    Uploaded by

    Lijalem Abate
    9 views6 pages
    This document discusses HTML forms and the various elements used to create forms to collect user input on web pages. Forms allow entering text via elements like text boxes, textareas, and passwords. They also support selection elements like radio buttons, checkboxes, dropdown menus, and file uploads. Other elements include submit buttons to send the form data, reset buttons to clear the form, and labels to associate text with form controls. Fieldsets group related form fields, and the form data submission method and target URL are set using attributes on the opening form tag.

    Original Title

    Lab_5

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses HTML forms and the various elements used to create forms to collect user input on web pages. Forms allow entering text via elements like text boxes, textareas, and passwords. They also support selection elements like radio buttons, checkboxes, dropdown menus, and file uploads. Other elements include submit buttons to send the form data, reset buttons to clear the form, and labels to associate text with form controls. Fieldsets group related form fields, and the form data submission method and target URL are set using attributes on the opening form tag.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    9 views6 pages

    Lab 5

    Uploaded by

    Lijalem Abate
    This document discusses HTML forms and the various elements used to create forms to collect user input on web pages. Forms allow entering text via elements like text boxes, textareas, and passwords. They also support selection elements like radio buttons, checkboxes, dropdown menus, and file uploads. Other elements include submit buttons to send the form data, reset buttons to clear the form, and labels to associate text with form controls. Fieldsets group related form fields, and the form data submission method and target URL are set using attributes on the opening form tag.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 6

    Fundamentals of Web System & Technologies - Lab Exercise 5

    HTML Forms
    Entering User Data from a Web Page

     Forms are the primary method for gathering data from site visitors

     Create a form block with

    <form></form>

     The “method" attribute tells how the form data should be sent – via GET or POST
    request

     The "action" attribute tells where the form data should be sent

    <form name="myForm" method="post"

    action="path/to/some-script.php">

    ...

    </form>

     Single-line text input fields:


    <input type="text" name="FirstName" value="This is a text field" />

     Multi-line textarea fields:

    <textarea name="Comments">This is a multi-line text field</textarea>

     Hidden fields contain data not shown to the user:

    <input type="hidden" name="Account" value="This is a hidden text field" />

     Often used by JavaScript code

     Fieldsets are used to enclose a group of related form fields:

    <form method="post" action="form.aspx">

    <fieldset>

    <legend>Client Details</legend>

    <input type="text" id="Name" />

    <input type="text" id="Phone" />

    </fieldset>

    <fieldset>

    <legend>Order Details</legend>

    <input type="text" id="Quantity" />

    <textarea cols="40" rows="10"


    id="Remarks"></textarea>

    </fieldset>

    </form>

     The <legend> is the fieldset's title.

     Checkboxes:

    <input type="checkbox" name="fruit" value="apple" />

     Radio buttons:

    <input type="radio" name="title" value="Mr." />

     Radio buttons can be grouped, allowing only one to be selected from a group:
    <input type="radio" name="city" value="Lom" />

    <input type="radio" name="city" value="Ruse" />

     Dropdown menus:

    <select name="gender">

    <option value="Value 1"

    <selected="selected">Male</option>

    <option value="Value 2">Female</option>

    <option value="Value 3">Other</option>

    </select>

     Submit button:

    <input type="submit" name="submitBtn" value="Apply Now" />

     Reset button – brings the form to its initial state

    <input type="reset" name="resetBtn" value="Reset the form" />

     Image button – acts like submit but image is displayed and click coordinates are sent

    <input type="image" src="submit.gif" name="submitBtn" alt="Submit" />

     Ordinary button – used for Javascript, no default action

    <input type="button" value="click me" />

     Password input – a text field which masks the entered text with * signs

    <input type="password" name="pass" />

     Multiple select field – displays the list of items in multiple lines, instead of one

    <select name="products" multiple="multiple">

    <option value="Value 1"

    <selected="selected">keyboard</option>

    <option value="Value 2">mouse</option>

    <option value="Value 3">speakers</option>

    </select>
     File input – a field used for uploading files

    <input type="file" name="photo" />

     When used, it requires the form element to have a specific attribute:

    <form enctype="multipart/form-data">

    ...

    <input type="file" name="photo" />

    ...

    </form>

     Form labels are used to associate an explanatory text to a form field using the field's ID.

    <label for="fn">First Name</label>

    <input type="text" id="fn" />

     Clicking on a label focuses its associated field (checkboxes are toggled, radio buttons are
    checked)

     Labels are both a usability and accessibility feature and are required in order to pass
    accessibility validation.

    <form method="post" action="apply-now.php">

    <input name="subject" type="hidden" value="Class" />

    <fieldset><legend>Academic information</legend>

    <label for="degree">Degree</label>

    <select name="degree" id="degree">

    <option value="BA">Bachelor of Art</option>

    <option value="BS">Bachelor of Science</option>

    <option value="MBA" selected="selected">Master of

    Business Administration</option>

    </select>

    <br />
    <label for="studentid">Student ID</label>

    <input type="password" name="studentid" />

    </fieldset>

    <fieldset><legend>Personal Details</legend>

    <label for="fname">First Name</label>

    <input type="text" name="fname" id="fname" />

    <br />

    <label for="lname">Last Name</label>

    <input type="text" name="lname" id="lname" />

    <br />

    Gender:

    <input name="gender" type="radio" id="gm" value="m" />

    <label for="gm">Male</label>

    <input name="gender" type="radio" id="gf" value="f" />

    <label for="gf">Female</label>

    <br />

    <label for="email">Email</label>

    <input type="text" name="email" id="email" />

    </fieldset>

    <p>

    <textarea name="terms" cols="30" rows="4"

    readonly="readonly">TERMS AND CONDITIONS...</textarea>

    </p>

    <p>

    <input type="submit" name="submit" value="Send Form" />

    <input type="reset" value="Clear Form" />


    </p>

    </form>

    You might also like