The SELECT element This type of element merely offers another way of capturing the kinds of user-selection that we have already seen how to capture with.

Slides:

Advertisements

Similar presentations

Lecture 14 HTML Forms CPE 401 / 601 Computer Network Systems slides are modified from Dave Hollinger.

Advertisements

Video, audio, embed, iframe, HTML Form

Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.

Forms cs105. More Interactive web-pages So far what we have seen was to present the information. (Ex: tables. Lists,….). But it is not enough. We want.

Capturing user input: Using HTML FORMs User input Up till now, our HTML documents have all been directed at outputting information to the user However,

Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.

Capturing user input: Using HTML FORMs CS4320 got here on 27/11/2003.

The conditional statement General form: if ( ) { consequent-action-list } Actual Example: if (document.getElemendById(‘name’).value= ='') { alert(‘Name.

Other types of input element There are some types of input element that we have not considered: –type='image’ –type='hidden’ We will delay dealing with.

Using Entities & Creating Forms Jill R. Sommer Institute for Applied Linguistics Kent State University.

XHTML Forms for Data Collection and Submission Chapter 5.

User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1.

Forms, Validation Week 7 INFM 603. Announcements Try placing today’s example in htdocs (XAMPP). This will allow you to execute examples that rely on PHP.

Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.

CO1552 Web Application Development HTML Forms. Websites can be made more interactive by providing facilities for users to provide data To get user entered.

CSE 382/ETE 334 Internet and Web Technology Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU.

Forms Sangeetha Parthasarathy 02/05/2001. Introduction to Forms A form makes it possible to transform your web pages from text to graphics to interactive.

Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.

CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 7: Web Forms.

Activity 2 Building a survey form using Dreamweaver Procedure

LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.

Dreamweaver MX. 2 Overview of Templates n Forms enable you to collect data from ______. n A form contains ________ such as text fields, radio buttons,

ITCS373: Internet Technology Lecture 5: More HTML.

Button and Textbox. Input  Input objects are used to obtain input from the user viewing the webpage. They allow the user to interact with the Web. 

Site Development Foundations © 2004 ProsoftTraining All rights reserved.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.

FORMS. Forms are used to receive information from the web surfer, such as: their name, address, credit card, etc. Form fields are objects that allow.

1 Review of Form Elements. 2 The tag Used in between tags.  Form elements(text control, buttons, etc.. ) goes here. OR  Form elements(text control,

Session 8: Working with Form iNET Academy Open Source Web Development.

Web Forms. Survey or poll Contact us Sign up for an newsletter Register for an event Submit comments or feedback about our site Log in to a members-only.

TJ 3043 – Web Application Development HTML Form. 2.0 Forms - A form is the usual way information is gotten from a browser to a server - HTML has tags.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.

+ FORMS HTML forms are used to pass data to a server. begins and ends a form Forms are made up of input elements Every input element has a name and value.

Netprog CGI and Forms1 CGI and Forms A detailed look at HTML forms.

1 HTML Forms. Objectives You will be able to: Compose HTML forms, to accept input from the user. Identify the different kinds of input tags that can appear.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 6: Creating XHTML Forms Kelly.

1 HTML forms (cont.)

1 Web Engineering Forms Lecture 05. FORMS Its how HTML does interactivity. There are quite new feature in HTML5. But the fundamental idea does not change.

Web Forms. Web Forms: A form allows our web visitors to submit information to us. Some examples uses for forms are to let the web user contact us, fill.

HTML FORM. Form HTML Forms are used to select different kinds of user input. HTML forms are used to pass data to a server. A form can contain input elements.

Lesson 5 Introduction to HTML Forms. Lesson 5 Forms A form is an area that can contain form elements. Form elements are elements that allow the user to.

HTML Structure II (Form) WEEK 2.2. Contents Table Form.

Creating and Processing Web Forms

Client-Side Internet and Web Programming

Checkboxes, Select boxes, Radio buttons,

How to Write Web Forms By Mimi Opkins.

Objectives Design a form Create a form Create text fields

Forms Web Design Ms. Olifer.

HTML Forms CSC 102 Lecture.

النماذج عند الانتهاء من هذا الدرس ستكون قادرا على:

Introducing Forms.

HTML Forms and User Input

Web Systems Development (CSC-215)

Creating Form Elements

Web Development & Design Foundations with H T M L 5

FORM OBJECT When creating an interactive web site for the Internet it is necessary to capture user input and process this input. Based on the result of.

Slide Elements (copy & paste these elements into your presentation)

© Hugh McCabe 2000 Web Authoring Lecture 8

Introduction to HTML: Forms

Slide Elements (copy & paste these elements into your presentation)

Lesson 6: Web Forms.

Unit 5 Create Forms.

Presentation transcript:

The SELECT element This type of element merely offers another way of capturing the kinds of user-selection that we have already seen how to capture with the INPUT elements of TYPE=checkbox and of TYPE=radio Consider the web page on the following slide

By clicking on the down-arrow, the user sees a range of options

This is implemented as follows : T-shirt Order Form Order What is your name? Sorry! Each order is limited to one T-shirt. Select the one you want: Batman's cloak Superman's cloak Dr. Who's coat Form Submission Submit order

SELECT element vs. INPUT element of TYPE=radio The following SELECT element Batman's cloak Superman's cloak Dr. Who's coat is equivalent to the following group of INPUT elements: Batman's cloak Superman's cloak Dr. Who's coat They both allow ONLY ONE selection

Allowing multiple selections If we use the word MULTIPLE in the SELECT tag, multiple selections are allowed: Batman's cloak Superman's cloak Dr. Who's coat See the next slide

Preselection

This is done as follows: Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat

Preselection when only one selection is allowed Consider the following: Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat Notice, on the next slide, that the Superman shirt is shown as a default, even though the Batman shirt is first in the list above

What happens when the user moves to the T-shirt selection part of the form:

Sizing the selection box So far, the size of the selection box on the form has been determined by default by the browser However, we can specify a size explicitly if we wish: Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat See what results on the next slide

The TEXTAREA element With this element, we can allow the user to give us free-form feedback Consider the following web page and what happens when the user fills it in as shown on the following slides

How it was done: Feedback What do you think of our products? Type your answer here … A TEXTAREA is delimited by two tags: TEXTAREA and /TEXTAREA The TEXTAREA tag has NAME attribute and may have attributes which specify the size of the text-entry box -- but the user’s text can be much larger than this The text between the two tags is the initial text that appears in the text-entry box.