Presentation is loading. Please wait.

Presentation is loading. Please wait.

1.5 FORMS.

Published byIrene Manning Modified over 5 years ago

Similar presentations

Presentation on theme: "1.5 FORMS."— Presentation transcript:

1 1.5 FORMS

2 SIGN UP FORM FOR GMAIL SIGN UP FORM FOR FACEBOOK

3 REGISTRATION FORM FOR A PARTICULAR APPLICATION
FORM FOR PIZZA ORDERING SYSTEM

4 FORMS A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms are enclosed in the HTML <form> tag. Forms are made up of standard graphical user interface(GUI) elements called HTML controls. The data entered into the form should be submitted to the server using two methods: (i) GET (ii) POST.

5 The basic purpose of an HTML form is to allow the user to enter data on one end and then send the data on the other end through the web server. It helps the user purchase goods on the Internet and signup for newsletters and mail accounts. The HTML controls are the basic parts of an HTML form. The HTML<form> element defines a form that is used to collect user input.

6 The important attributes of <form> tag are:
Attribute Name Possible values Description Action Name method Get, post The default value for method is “get”.

7 ************************************************* DIFFERENCE BETWEEN GET AND POST METHOD *************************************************

8 A text box is created by using a tag <input>.
It is a rectangular box which accepts one-line text as input from the user. A text box is created by using a tag <input>. The important attribute of <input> tag is: Attribute Name Possible values Description type Text, Password, Hidden, File, Image, Checkbox, Radio, Button, Submit Reset……etc The default value of type attribute is “text”.

9 Example 1: <input type=“text”> (or) <input> Meaning: Output:

10 Example 1: <input type=“password”> Meaning: Output:

11 Example 1: <input type=“hidden”> Meaning: Output:

12 Example 1: <input type=“file”> Meaning: Output:

13 Example 1: <input type=“image”> Meaning: Output:

14 (ii) Checkbox: A checkbox is a small box with a check mark in it and a user can either select or clear it by a click. ** Checkboxes allows the user to select ZERO or MORE options of a limited number of choices.

15 Example 1: <form> In which game are you interested?<br>
<input type="checkbox">Football<br> <input type="checkbox">Volley ball<br> <input type="checkbox">Cricket<br> <input type="checkbox">Tennis<br> </form>

16 Example 2: <form> In which game are you interested?<br>
<input type="checkbox” checked>Football<br> <input type="checkbox” checked>Volley ball<br> <input type="checkbox” checked>Cricket<br> <input type="checkbox” checked>Tennis<br> </form>

17 Example: <html> <form>
<input type=“checkbox” disabled>I accept terms and conditions </form> </html>

18 (iii) Radio Button: A radio button is a circle which displays a dot in the middle of circle when selected. A radio button allows the user to select only one option from limited no. of choices.

19 Example 1: <form> Gender: <input type=“radio” >Male
<input type=“radio” >Female<br> </form>

20 Example 2: <form> Gender: <input type=“radio” >Male
name=“g” <input type=“radio” >Female<br> name=“g” </form>

21 **** The difference between checkbox and radio buttons are: (i) Radio buttons work in mutually exclusive groups.(only one option can be selected at a time.)

22 (iv) TextArea: A textarea is a multi-line text input control and displays text entered in it. A user can write unlimited number of characters in the textarea. Example: <form> Address:<textarea rows=10 cols=10> </form>

23 (v) Selection or Drop-down List Or Pop-Down List:
The <select> tag defines a drop-down list. The <option> tag is used to define an option in the list.

24 Example 1: <html> <form> Select country <select>
<option> Afghanistan </option> <option> China </option> <option> Denmark </option> <option> India </option> <option> Iceland </option> <option> Ireland </option> <option> Japan </option> <option> Russia </option> <option> USA </option> </select> </form> </html>

25 Example 2: <html> <form> Select country <select>
<option> Afghanistan </option> <option> China </option> <option> Denmark </option> <option> India </option> <option> Iceland </option> <option> Ireland </option> <option> Japan </option> <option> Russia </option> <option selected> USA </option> </select> </form> </html>

26 Example 3:

27 DATE OF BIRTH:<select>
<option>DATE<option>1<option>2<option>3<option>4<option>5<option>6 <option>7<option>8<option>9<option>10<option>11<option>12<option>13 <option>14<option>15<option>16<option>17<option>18<option>19<option>20 <option>21<option>22<option>23<option>24<option>25<option>26<option>27 <option>28<option>29<option>30<option>31 </select><select> <option>MONTH <option>January<option>February<option>March<option>April<option>May <option>June<option>July<option>August<option>September<option>October <option>November <option>December </select> <select> <option>YEAR <option>1980<option>1981<option>1982<option>1983<option>1984<option>1985 <option>1986<option>1987<option>1988<option>1989<option>1990<option>1991 <option>1992<option>1993<option>1994<option>1995<option>1996<option>1997 <option>1998<option>1999<option>2000<option>2001<option>2002<option>2003 <option>2004<option>2005<option>2006<option>2007<option>2008<option>2009 <option>2010<option>2011<option>2012<option>2013<option>2014<option>2015 <option>2016<option>2017<option>2018<option>2019<option>2020

28 (vi) Button or Simple Button or Clickable Button:
It is a simple button which activates a specific code when clicked.

29 Example 1: <form> <center>
Value1: <input type=“text”><br> Value2: <input type=“text”><br> Sum is: <input type=“text”><br> <input type=“button” value=“add” onClick=“add( )”> </center> </form>

30 (vii) Submit Button: It defines a button for submitting the form data to a form-handler. (e.g server page)

31 Example 1: <form action=“login.jsp”> <center>
User Name: <input type=“text”><br> Password: <input type=“password”><br> <input type=“submit” value=“Login” > </center> </form>

32 (viii) Reset Button: A reset button resets the form data to its initial values. When the user clicks the reset button, all the values in the form fields are cleared and controls in the form are returned to their original state.

33 Example 1: <form> <center>
<input type=“text” value=“number1”><br> <input type=“text” value=“number2”><br> <input type=“reset” value=“clear” > </center> </form>

34 Example 2: <form> <center>
Value 1: <input type=“text”><br> Value2: <input type=“text”><br> <input type=“reset” value=“clear” > </center> </form>

Download ppt "1.5 FORMS."

Similar presentations

24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.

24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.
1 Introduction to HTML II อุทัย เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา.

1 Introduction to HTML II อุทัย เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา.
>> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}

>> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}
PHP Workshop ‹#› Forms (Getting data from users).

PHP Workshop ‹#› Forms (Getting data from users).
Video, audio, embed, iframe, HTML Form

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.

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.

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.
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.

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 Forms Section A - Working with Forms in JavaScript.

Tutorial 6 Forms Section A - Working with Forms in JavaScript.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.

Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

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.

1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.

XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.

CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
INTRODUCTORY Tutorial 8 Creating Forms. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create an HTML form Create fields for text Create.

INTRODUCTORY Tutorial 8 Creating Forms. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create an HTML form Create fields for text Create.
BBK P1 Module2010/11 : [‹#›] Forms (Getting data from users)

BBK P1 Module2010/11 : [‹#›] Forms (Getting data from users)
HTML Forms.

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

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.

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.
Creating Web Page Forms. Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input.

Creating Web Page Forms. Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input.

Similar presentations

Ads by Google