HTML Forms - Web Programming - Lecture Slides, Slides of Computer Programming

Download HTML Forms - Web Programming - Lecture Slides and more Slides Computer Programming in PDF only on Docsity!

HTML Forms

The Purpose of Forms

 Forms are used to create boxes and other controls that allow users to enter data  The data is typically submitted to the server for processing  We will get to server-side processing in a week or two  JavaScript can be used to access form elements on the client

History of Forms

 They have been the same “forever”  XFforms tried and failed

 Big changes in HTML 5  But they don‟t break existing code  Not all browsers support all features

Important Elements (tags)

 The **** element marks a region used to get user input  It is the form that is posted to the server  The **** element groups visible elements in the form  The **** element draws a prompt around the **** box

The Element

 The action attribute contains the URL where the data will be posted to the server  This makes little sense now but will when we talk about server-side processing  The method attribute defines how the form is posted  get – data is posted the „query string‟  put – data is posted in the form header  Note that name attributes deprecated (use id)

The Element

(Example)

 A first form with two text boxes:

** First name:
Last name:

**

The Element (2)

 The **** element contains text that appears in the border  It must appear as an immediate child of

---

 It‟s required with XHTML strict

The element

 It‟s a visible label that the user sees  Use it to create prompts  Set the for attribute to the id property of the related control

text Elements

 text elements allow the users to enter text into a text box  password elements hides the characters entered  The value attribute stores the entered value  Example  ****

checkbox

Elements

 It‟s a box that can be checked or unchecked (a two-state control)

Elements

 Use to select items from a drop-down list  The child **

HTML5 Form Improvements

 HTML5 introduces some new controls and extends existing ones  ****  There are several extensions (w3schools)  The placeholder attribute displays default text  If the required attribute is set, the form cannot be submitted until the user provides input

HTML5 Form Improvements

 ****  There are several extensions (w3schools)  The placeholder attribute displays default text  If the required attribute is set, the form cannot be submitted until the user provides input  The required and optional attributes are used with CSS styles attribute is set