Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 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

2

3 ... action – cgi script to be executed on the server side method – POST or GET specifies how the input values are delivered to the cgi script

4 Input controls - text, radio buttons, checkboxes, files, hidden, passwords - buttons - multiline text - drop down list

5 attributes:  name – control name  value – intial value  size – initial display width (in characters)  maxlength – maximum number of characters a user may enter

6 User Id:

7 attributes:  same as for “text” characters typed are rendered as *s secure only in the user agent  actual value sent in the clear over HTTP

8 Password:

9 like text except the field isn't rendered in the browser and the user can't interact with it attributes:  name – control name  value – initial (and only value)

10 <input type="hidden" name="secret" value="ssshhh!">

11 creates a multi-line input text area attributes:  rows – the number of lines of input text  cols – the width of the text area (in average character widths)  name – the name of the control

12 Mail message: This is the default value.

13 creates a radio button a mutually exclusive group is created by creating several elements with the same name attribute attributes:  name – control name  value – value associated with selected radio button  checked – initial state of the button

14 Eye color: <input type="radio" name="eye_c" value="brown"> Brown <input type="radio" name="eye_c" value="blue" checked="checked"> Blue <input type="radio" name="eye_c" value="green"> Green

15 creates a checkbox a non-exclusive group is created by creating several elements with the same name attribute attributes:  name – control name  value – value associated with selected checkbox  checked – initial state of the checkbox

16 Favourite Foods: <input type="checkbox" name="ffood" value="tofu"> Tofu <input type="checkbox" name="ffood" value="lentils"> Lentils <input type="checkbox" name="ffood" value="steak"> Steak

17 Lists element contianing one or more elements attributes  name – control name  size – number of list items visible  multiple – indicates multiple items can be selected from the list

18 element defines one option in a list attributes:  selected – indicates that the option is pre-selected  value – initial value of the control (otherwise defaults to the content of the element)  label – alternate string to display rather than the content of the element

19 Menu items: foo bar foobax blim

20 allows an entire file to be submitted with a form attributes  name – control name  value – intial file to use

21 Image file: <input type="file" name="img_file" value="C:\boot.ini" size="10">

22 Buttons submit – causes the form to be submitted to the web server reset – causes all input controls within the to be restored to their initial buttons other – behaviour defined by page author through client side scripting

23 style buttons attributes:  name: control name  type: submit, reset, image, button image creates a graphical submit button button creates a generic button  value: text to display on button control

24 <input type="image" name="info" src="info.gif">

25 HTML5 features placeholder attribute date, time, email, url, color, etc. input types


Download ppt "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."

Similar presentations


Ads by Google