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
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. - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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”>input elements
</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:
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 formlabel 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 fieldvalue 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
name and id attributes identify the fieldvalue is what’s sent to the server if thecheck 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.
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:
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 sets Most 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:
- 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 valueapplication/x-www-form-urlencoded.
23
The Action Attribute in a Form• The action attribute indicates what