Creating Web Forms in HTML

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”