HTML Forms and Input Elements, Slides of Web Programming and Technologies

Download HTML Forms and Input Elements and more Slides Web Programming and Technologies in PDF only on Docsity!

Web Technologies

(HTML)

Lecture # 9

Contents

■ HTML Forms

■ Input Elements

Text, Password, Submit, Reset, Radio,

CheckBox, Button, Select, TextArea,

Keygen,

HTML5 Elements

Attributes

Attribut

e

Value Description

action URL Specifies where to send the form-

data when a form is submitted

autocompl

ete

on

off

Specifies whether a form should

have autocomplete on or off

enctype multipart/form-

data

text/plain

Specifies how the form-data should

be encoded when submitting it to

the server (only for

method="post")

method get

post

Specifies the HTTP method to use

when sending form-data

name text Specifies the name of a form

target _blank

_self

_parent

_top

Specifies where to display the

response that is received after

submitting the form.

Blank :new window; self:same

frame; parent:parent frame;

Element

An HTML form contains form elements.

■ Form elements are different types of input

elements, like text fields, checkboxes,

radio buttons, submit buttons, and more.

The element is used to define an

input element.

Input Type Password

■ defines

a password field.

User name:

User password:

Input Type Submit

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

■ The form-handler is specified in the

form's action attribute.

Enter Id:

Enter Password:

Input Type Radio

defines a radio

button.

Radio buttons let a user select ONLY ONE of

a limited number of choices.

Select Gender:

Male

Female

Input Type Checkbox

■ defines a checkbox.

■ Checkboxes let a user select ZERO or MORE

options of a limited number of choices.

Select your skills:

Analyst

Developer

Requirement Engnieer

New HTML5 Input Types

■ HTML5 added

several new input

types.

■ New input types

that are not

supported by older

web browsers, will

behave as .\

color

date

datetime-local

• email
  • month
    • number
    • range

search

tel

time

url

week

Input Type Color

■ The is used for input

fields that should contain a color.

■ Depending on browser support, a color

picker can show up in the input field.

Select color:

Input Type Datetime-

local

■ The **** specifies a date and time input

field, with no time zone.

Select date and time:

Input Type Email

The is used for

input fields that should contain an e-mail

address.

E-mail:

Input Type Number

■ The defines a

numeric input field.

Enter quantity:

Input Type Range

■ The defines a control for

entering a number whose exact value is not

important (like a slider control).

■ Default range is 0 to 100. However, you can set

restrictions on what numbers are accepted with

the min, max, and step attributes.

Points: