1 / 24

Creating Web Forms in HTML

Creating Web Forms in HTML. Web forms collect information from customers Web forms include different control elements including: Input boxes Selection lists Drop-down lists boxes Option buttons or radio buttons Check boxes Group boxes Text areas Form buttons.

wardah
Download Presentation

Creating Web Forms in HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Creating Web Forms in HTML • Web forms collect information from customers • Web forms include different control elements including: • Input boxes • Selection lists • Drop-down lists boxes • Option buttons or radio buttons • Check boxes • Group boxes • Text areas • Form buttons

  2. Forms Interact with Server-Based Programs • While HTML supports the creation of forms, it does not include tools to process the information • The information can be processed through a program running on a Web server • The earliest and most commonly used are Common Gateway Interface (CGI) scripts that are written in perl • Other popular languages include: • Python - PHP • ASP - Java/ JSP • ColdFusion - the Unix shell • C/C++ - Visual Basic

  3. Creating the Form Element • Forms are created using the form element, created as follows: • <form name=“name” id=“id”> • inputelements • </form> • - elements are elements places within the form. • - name is the name of the form and id is the id of • the form. They should have the same value.

  4. Creating Input Elements Inside a Form • A list of input elements go inside the form tags. • The general syntax of input elements is as follows:<input type=“type” name=“name” id=“id”/> - type specifies the type of input field, - name and id are the field’s name and id.

  5. Input Types

  6. Creating a Text Input Field • To create a text input field: <input type=“text” name=“name” id=“id” value=“value” size=“value” maxlength=“value’ /> name and id identify the field, value assigns the field’s default value, size defines the width of the input box in characters, maxlength specifies the maximum number of characters that a user can enter into the field.

  7. Adding a Form Label • You can expressly link a label with an associated input element for scripting purposes. • The syntax for creating a form label is as follows: <label for=“id”>label text</label> id is the value of the id attribute for a field on the form label text is the text of the label

  8. Creating a Password Field • A password field is an input box where characters typed by the user are displayed as bullets or asterisks to protect private or sensitive information on a Web site • The syntax for creating a Password field is as follows: <input type=“password” />

  9. Creating Hidden Fields • Hidden fields are added to a form, but not displayed in the Web page. They are used to pass information to the server script that the user need not enter. The syntax is as follows: <input type=“hidden” name=“name” id=“id” value=“value” />

  10. Creating Option Buttons • Option buttons, or radio buttons allow users to make selections (only one button is selected at a time). • To create a radio button, use: <input type=“radio” name=“name” id=“id” value=“value” /> name and id attributes identify the field value is what’s sent to the server if the radio button is selected All option buttons belonging to the same field share a common name Labels are matched to the id values of the option buttons

  11. Creating Check Boxes • To create a check box, use: <input type=“checkbox” name=“name” id=“id” value=“value” /> name and id attributes identify the field value is what’s sent to the server if the check box is selected • To specify that a check box (or radio button) be selected by default, use the checked attribute as follows: <input type=“checkbox” checked=“checked” />

  12. Creating Form Buttons • File buttons are used to select files so that their contents can be submitted for processing to a program. <input type=“file” value=“text” /> • Submit buttons submit forms to the server for processing when clicked. Syntax is as follows: <input type=“submit” value=“text” /> • Reset buttons reset forms to their original (default) values. Syntax is as follows: <input type=“reset” value=“text” /> • Command buttons are useful for user-defined actions: <input type=“button” value=“text” /> • Image buttons let you use an image as a button: <input type=“image” src=“url” />

  13. How a File Button Behaves • File buttons are used to select files so that their contents can be submitted for processing to a program. • The Web page then only displays the file’s location, not the file’s contents.

  14. Designing Your Own Custom Buttons • Use the button tag for greater artistic control over the appearance of a button <button name=“name” id=“id” value=“value” type=“type”> content </button> content is the HTML that displays the button.

  15. Creating a Selection List • A selection list is a list box from which a user selects a particular value or set of values • Selection lists are useful when there are a fixed set of possible responses from the user • <select name=“list” id=“list”> <option>Choice1</option> </select> • Add the multiple attribute to the select element to create multiple selections. Add the selected attribute to the option element to create a default preselected item. <select … multiple=“multiple”> <option … selected=“selected”>

  16. Modifying the Appearance of a Selection List • You can change the number of options displayed in the selection list by modifying the size attribute. The syntax is as follows: <select … size= “value”>… </select>

  17. Creating Option Groups in Selection Lists • Use option groups to organize selection lists into distinct groups. <select attributes> <optgroup label=“label1”> <option>itema1</option> <option>itema2</option> … <optgroup label=“label1”> <option>itema1</option> <option>itema2</option> … </optgroup> … </select>

  18. Creating Text Area Boxes • Text areas are good for long, multi-line text input: <textarea name=“name” id=“id” rows=“value”cols=“value”> default text </textarea> rows and cols define the dimensions of the input box and the rows attribute indicates the number of lines

  19. Additional Data Types in HTML5 Example:

  20. Some New HTML5 Attributes • placeholder – hint for how the input should look. • autocomplete– currently only works in Firefox and Opera • required – syntax is required = “required” • pattern – used to require input in the format of a regular expression Example:

  21. Organizing Input Elements into a Field Set • HTML and XHML allow you to organize input elements into a group of fields called field setsMost browsers place a group box around a field set to indicate that the fields belong to a common group <fieldset id=“idname”> fields </fieldset> fields are the individual fields within a set. • To add a caption to a field set, add the following tag after the opening <fieldset> tag: <legend>text</legend>

  22. Some Important Form Attributes • After adding the elements to your form, you’ll need to specify where to send the form data and how to send it. Use the following attributes: <form action=“url” method=“type” enctype=“type”>… </form> - action specifies the filename and location of the program that processes the form - method attribute specifies how your Web browser sends data to the server. • enctype attribute specifies the format of the data stored in the form’s field. The default enctype is the value application/x-www-form-urlencoded.

  23. The Action Attribute in a Form • The action attribute indicates what program to run when the form is submitted: <form action=“http://www.lh.org/cgi-bin/donate” method=“post” id=“donateform”> … </form> • The mailto action is a special action that accesses the user’s own e-mail program for mailing form information to a specified e-mail address: <form action=“mailto:adavis@langear.com” method=“post” id=“donateform”> … </form>

  24. The Method Attribute in a Form • The method attribute can have one of two values: - The get method is the default; get appends the form data to the end of the URL specified in the action attribute • The post method sends form data in a separate data stream, allowing the Web server to receive the data through “standard input”

More Related