CGS 3066: Web Programming and Design Spring 2016

CGS 3066: Web Programming and Design Spring 2016

CGS 3066: Web Programming and Design Fall 2019 Forms , HTML5 layout Department of Computer Science, Florida State University 1 HTML Forms One of the main points of interaction between a user and a web site

Used to collect different kinds of user input/data and pass them to the server. Primarily contains input controls such as text fields, checkboxes, radiobuttons, submit buttons,drop-down lists etc. Also non-input elements(e.g. labels, fieldsets) for presentation HTML tag:

..

HTML Forms(contd) Forms are submitted for processing using the submit button input

Input controls should have their name attributes set form data submitted in (name, value) pair Form input controls The element is the most important form element. The element can be displayed in several ways, depending on the type attribute. Here are some examples: Type

Description Defines a one-line text input field Defines a radio button (for selecting one of many choices) Defines a submit button (for submitting

the form) Defines a checkbox defines a one-line text input field:

First name:

Last name:

defines a password field : The characters in a password field are masked (shown as asterisks or circles).

User name:

User password:

defines a button for submitting form data to a form-handler : The form-handler is typically a server page with a script for processing input data. We will learn this later when we talk about back-end code.

First name:

Last name:

defines a reset button that will reset all form values to their

default values:

First name:

Last name:

defines a radio button:

Radio buttons let a user select ONLY ONE of a limited number of choices.

Male
Female
Other

defines a checkbox: Checkboxes let a user select ZERO or MORE options of a limited number of choices.

I have a

bike
I have a car

The element defines a drop-down list The

The

The

The

You can also define the size of the text area by using CSS properties width and height

Attributes value The value attribute specifies the initial value for an input field

First name:

Last name:

Attributes readonly The readonly attribute specifies that the input field is read only (cannot be changed):

First name:

Last name:

Attributes disabled The disabled attribute specifies that the input field is disabled. A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form

First name:

Last name:

Attributes size The size attribute specifies the size (in characters) for the input field

First name:

Last name:

Attributes maxlength The maxlength attribute specifies the maximum allowed length for the input field: With a maxlength attribute, the input field will not accept more than the allowed number of characters. The maxlength attribute does not provide any feedback. If you want to alert the user, you must write JavaScript code.

First name:

Last name:

HTML5 input types

HTML5 introduces several new input types Browser support varies. Unsupported input types shown as textboxes Try http://robertnyman.com/html5/forms/input-types.html on different browsers o o o o o o o o o o o

o color date datetime-local email month number range search tel time url week

Source: http://robertnyman.com/ Other Form related tags