Week 10.  Form controls  Parent containing element for other form control elements  Requires method and action attributes to process the information.

Slides:



Advertisements
Similar presentations
HTML Forms. collect information for passing to server- side processes built up from standard widgets –text-input, radio buttons, check boxes, option lists,
Advertisements

Microsoft Expression Web-Illustrated Unit J: Creating Forms.
23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.
Tutorial 6 Creating a Web Form
1 Introduction to HTML II อุทัย เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา.
1 Chapter 5 – Handling HTML Controls in Web Pages spring into PHP 5 by Steven Holzner Slides were developed by Jack Davis College of Information Science.
SE-2840 Dr. Mark L. Hornick 1 HTML input elements and forms.
Chapter 31 Basic Form-Processing Techniques JavaServer Pages By Xue Bai.
Technologies for web publishing Ing. Václav Freylich Lecture 4.
HTML and XHTML Controlling the Display Of Web Content.
Tutorial 6 Working with Web Forms
Form Basics CS Web Data  Most interesting web pages revolve around data  examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes  can.
COS 125 DAY 26. Agenda Assignment #7 Graded  10 A’s, 4 B’s, and 1 non-submit Assignment # 8 Due April 27 Assignment #9 will be assigned in WebCT by Tuesday.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
Principles of Web Design 6 th Edition Chapter 11 – Web Forms.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
HTML Forms What is a form.
XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
CO1552 Web Application Development HTML Forms. Websites can be made more interactive by providing facilities for users to provide data To get user entered.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
Kevin Murphy Creating Forms Masters Project CS 490.
WEB FORM DESIGN. Creating forms for a web page For your web project you have to design a form for inclusion on your web site (the form information should.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Neal Stublen Improvements  New form elements  Assist with validation  Consistency across sites  Changes reduce the need for common.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
INTRODUCTORY Tutorial 8 Creating Forms. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create an HTML form Create fields for text Create.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
HTML FORMS GET/POST METHODS. HTML FORMS HTML Forms HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes,
PHP Form Introduction Getting User Information Text Input.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
HTML Forms A Preliminary Step into Dynamic Web Fred Durao
TJ 3043 – Web Application Development HTML Form. 2.0 Forms A form is the usual way to communicate information from a Web browser to a server HTML has.
HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.
HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing.
Forms Collecting Data CSS Class 5. Forms Create a form Add text box Add labels Add check boxes and radio buttons Build a drop-down list Group drop-down.
Web Technologies Lecture 3 Web forms. HTML5 forms A component of a webpage that has form controls – Text fields – Buttons – Checkboxes – Range controls.
+ 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.
WEB FORM DESIGN. Creating forms for a web page For your web project you have to design a form for inclusion on your web site (the form information should.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Creating Web Page Forms COE 201- Computer Proficiency.
HTML Forms.
Week 8.  Form controls  Accessibility with ARIA.
COS 125 DAY 17. Agenda  Assignment 7 not finished grading  Assignment 8 posted Due April 9  Capstone progress reports due  Quiz 2 Corrected 2 A’s,
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring Forms, HTML5 layout.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
USABLEANDACCESSIBLEFORMS. accessibility or Accessibility?
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
UI Tags of Struts2. May 12, 2011 Struts 2.x Tags in detail:- The Struts 2.x tags can be classified under the following categories. i) UI Tags ii) Control.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
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.
Unit 4 Working with data. Form Element HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons,
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Creating and Processing Web Forms
Chapter 5 Validating Form Data with JavaScript
Objectives Design a form Create a form Create text fields
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
Validation and Building Small Apps
Web Systems Development (CSC-215)
Forms, cont’d.
The Internet 10/27/11 XHTML Forms
Presentation transcript:

Week 10

 Form controls

 Parent containing element for other form control elements  Requires method and action attributes to process the information collected by the form  Actions are usually scripts processed by the web server; can also be used to create an electronic mail message

 Multiple ways to collect data element  type attribute for element determines both its behaviour and presentation

 type determines type of element  text  password  checkbox  radio  file  submit  reset  button

 Use when checkboxes and radio buttons become too inefficient  Choices defined by the element The label attribute can be used to present a shortened version of an option when appearing in an optgroup  Can be grouped using the element The label attribute can be used to identify the options of an option group  Multiple selections allowed by setting multiple attribute to value of “multiple”

 Function identical to the element but allows for multiple lines of text to be entered

 Data collected from form controls are associated to a value specified by the name attribute of the form control element that collected the information  The name value is like a variable that contains the form input value

 Used for marking up a form control’s descriptive text  Has no presentation value unless styled with CSS  Provides two features: Usability  Improvement for mouse users – clickable area Accessibility  Make a form control’s purpose clearer for users of assistive technologies

 The glue that binds the text inside the label element with the form control it is related (explicit association)  If you wrap a form control inside a you could skip the for attribute (implicit association)  Best practice: do both

 Web Servers Apache, Microsoft IIS  Web Server Technologies: PHP, MySQL, TLS/SSL  Survey of responsive image solutions  JavaScript frameworks  Web Applications CMS (Drupal, WordPress, etc) Creating/modifying themes