Web Forms.

Slides:



Advertisements
Similar presentations
1 Introduction to HTML II อุทัย เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา.
Advertisements

Chapter 6 Basic forms 1. Forms and query string 2 form : a group of user input (UI) controls that accepts information from the user and sends the information.
Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.
Creating Web Page Forms. Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a.
Tutorial 6 Working with Web Forms
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.
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.
Using Entities & Creating Forms Jill R. Sommer Institute for Applied Linguistics Kent State University.
ECA 228 Internet/Intranet Design I Forms. ECA 228 Internet/Intranet Design I Forms forms are a way for a user to communicate with you – text fields –
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
Tutorial #9 – Creating Forms. Tutorial #8 Review – Tables Borders (table, gridlines), Border-collapse: collapse; empty-cells: show; and rowspan, colspan.
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.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
Forms and Form Controls Chapter What is a Form?
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
HTML Forms.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
Week 9 - Form Basics Key Concepts 1. 1.Describe common uses of forms on web pages 2.Create forms on web pages using the form, input, textarea, and select.
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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
HTML Form Widgets. Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back.
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.
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.
SYST Web Technologies SYST Web Technologies XHTML Forms.
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.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Creating Forms on a Web Page. 2 Introduction  Forms allow Web developers to collect visitor feedback  Forms create an environment that invites people.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 6: Creating XHTML Forms Kelly.
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 Structure II (Form) WEEK 2.2. Contents Table Form.
Tutorial 6 Working with Web Forms
Creating and Processing Web Forms
Web Development Part 2.
CHAPTER 2 MARKUP LANGUAGE
Making your HTML Page Interactive
Web Forms.
How to Write Web Forms By Mimi Opkins.
Objectives Design a form Create a form Create text fields
HTML Forms Pat Morin COMP 2405.
Introduction to Web programming
(and available form fields)
FORMS Explained By: Sarbjit Kaur.
WHY FORMS? Explain: Mostly, when you need to collect data from a user you need a form Click: Google search form Click: Facebook login form Click:
ITE 115 Creating Web Page Forms
Validation and Building Small Apps
Designing Forms Lesson 10.
Introducing Forms.
HTML Forms and User Input
Introduction to Web programming
Web Development & Design Foundations with H T M L 5
Forms, cont’d.
CNIT 131 HTML5 - Forms.
Principles of Web Design 5th Edition
Creating Forms on a Web Page
Intro to Forms HTML forms are used to gather information from end-users. A form can contain elements like radio-buttons, text fields, checkboxes, submit.
Intro to Forms HTML forms are used to gather information from end-users. A form can contain elements like radio-buttons, text fields, checkboxes, submit.
© Hugh McCabe 2000 Web Authoring Lecture 8
Lesson 6: Web Forms.
Web Forms.
Making your HTML Page Interactive
Unit 5 Create Forms.
Presentation transcript:

Web Forms

Web Forms All our web pages thus far have had a one-way flow of information, from us to our web visitors. Now we'll see how our visitors can send information back to us via a web form. There are a number of reasons we might want our audience to fill out a form on our site: Survey or poll Contact us Sign up for an email newsletter Register for an event Submit comments or feedback about our site Log in to a members-only section of the site Once the information in a web form is submitted, a web server is required to process the information. That is an advanced topic, so we'll just focus on the designing of the web form, not the processing.

The <form> Element To create a web form on a page, we use the opening and closing <form> and </form> tags: <form method="post" action="process.php"> <!-- All form content goes here --> </form> The method attribute determined in which format the submitted data will be sent. The two possible values are "post" and "get". The action attribute declares which file will receive and process the data once submitted. This will be a file written in a scripting language, such as PHP or ASP. All elements of the form must reside within the form element. As we have not added any elements to this example form yet, nothing would display on the page.

Text Box Let's begin adding some form elements. The most versatile component of a form is the <input> element. Here we are adding two text fields: <form method="post" action="process.php"> First Name: <input type="text" size="20" name="firstname" /><br /> Last Name: <input type="text" size="30" name="lastname" /><br /> </form> The type attribute determines which kind of input the field will be. A value of "text" creates a single-line text box with the size attribute determining the width in characters. We must define the name attribute and supply a unique value for each element of a web form that collects data from the user. This will be used later by the web server.

Radio Buttons By changing the type attribute to "radio", we can create a set of options, of which the user can choose only one: <form method="post" action="process.php"> Eye Color:<br /> <input type="radio" name="eye" value="brown" />Brown<br /> <input type="radio" name="eye" value="blue" />Blue<br /> <input type="radio" name="eye" value="green" />Green<br /> <input type="radio" name="eye" value="other" />Other<br /> </form> Notice that each radio option has its own input element, with the identical name attribute. Only the value attribute differs. These are known as radio buttons because older cars used to have a set of buttons to press in for different radio stations. When a new button was pressed in, the old button would pop out.

Checkboxes Another possible type attribute is "checkbox", which differs from radio buttons in that none, some, or all of the options can be selected: <form method="post" action="process.php"> My Pets:<br /> <input type="checkbox" name="pets" value="dog" />Dog<br /> <input type="checkbox" name="pets" value=cat" />Cat<br /> <input type="checkbox" name="pets" value="hamster" />Hamster<br /> <input type="checkbox" name="pets" value="fish" />Fish<br /> </form> Again, each checkbox option has its own separate input element. The matching name attribute is how we indicate that the options are part of the same list. If we had another set of checkboxes on the form, they would have a different name attribute value.

Drop-down List We can use the select and option elements together to create a drop-down list of options on our form: <form method="post" action="process.php"> Foreign Languages Spoken:<br /> <select name="language"> <option value="spanish">Spanish</option> <option value="french">French</option> <option value="japanese">Japanese</option> <option value="arabic">Arabic</option> </select> </form> The name attribute is applied to the select element, not the individual option elements. Drop-down lists are useful, as they can save us a lot of real estate on the screen, especially when there are a lot of options from which to choose.

Large Text Box If a single-line text box isn't big enough, we can use the textarea element to present a larger, expandable box that can hold a lot of text: <form method="post" action="process.php"> Tell us some more about yourself:<br /> <textarea name="more" rows="8" cols="30"> Type here. </textarea> </form> The width and height of the box that displays on the web page is controlled by the rows and cols attributes, respectively. Whatever text is placed between the opening and closing <textarea> tags will display in the box itself when the page first loads. This could serve, for example, to provide the user with more instructions.

Preselecting Options Sometimes, we want to prefill or preselect form data for our visitors. We can do so by using these special attributes: First Name: <input type="text" size="20" name="firstname" value="John" /> ... <input type="radio" name="eye" value="brown" checked="checked" />Brown <input type="checkbox" name="pets" value="dog" checked="checked" />Dog <input type="checkbox" name="pets" value=cat" checked="checked" />Cat <option value="french" selected="selected">French</option>

Submit Button Once we've built all the fields for our web visitor to fill out, we need to provide them a way to submit their answers to us. We do this by including a button for them to click: ... </textarea><br /> <input type="submit" value="All Done!" /> </form> Whatever text we place in the value attribute will display on the button itself. Once the submit button is clicked, the page will gather all the data from the form and send it to the file indicated in the opening <form> tag for processing.

Fieldset and Legend We can group form fields together and caption them using the <fieldset> and <legend> elements: <form method="post" action="process.php"> <fieldset> <legend>Introduce Yourself</legend> ... </fieldset> </form> The fieldset will draw a line surrounding the form elements within it. We can caption the group of form fields with whatever text we place within the opening and closing <legend> tags. Multiple fieldset and legend pairs can be used within a single form element. For example, they could be used to set apart and title different sections of the form.

CSS Form Styling With a dash of CSS styling, we can make our form more presentable to our visitors: