Scribd
Upload
7 views23 pages

M2 Part5

Uploaded by

Aman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views23 pages

M2 Part5

Uploaded by

Aman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

HTML5

Forms
2

HTML5 Forms

HTML5 forms has


many types of inputs
3

Form Elements and its Types


Text
<input type="text" name="fn" maxlength="10" title="enter your first
name" placeholder="enter your first name" required/>

Number
<input type="number"/>
<input type="number" name="points" min="1" max="10" />
4

Input Types
The range type is displayed as a slider bar.

Range
<input type="range" name="points" min="1" max="10" />
5

Common Types
Textarea
<textarea rows="8" cols="20"></textarea>

Radio Button or Option


male<input type="radio" name="g" value="m"/>
female<input type="radio" name="g" value="f"/>

Check Box
<input type="checkbox" name="x[]" value="h"/>
6

Input Types
Password
<input type="password"/>

Email
<input type="email"/>
7

Date
Date
<input type="date"/>
date - Selects date, month and year
> month - Selects month and year
> week - Selects week and year
> time - Selects time (hour and minute)
> datetime - Selects time, date, month and year
> datetime-local - Selects time, date, month and
year (local time)
8

Date time
<form action="/action_page.php">
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
9

Select list
Option
<select name="country">
<option value="" selected="selected"
disabled="disabled">Select your
country</option>
<option value="1">India</option>
<option value="2">Pakistan</option> </select>
10

Group Box
 Group box labels an entire collection of radio buttons.
 A group box - a set of fields indicate a common group.
Syntax:
<fieldset>
<legend align=“top”>legend text</legend>
collection of fields
</fieldset>
11

Example – Group Box


start of group group box
box legend

resulting radio buttons and group box


12

List in different sizes


13

Dealing with hidden fields


 A hidden field - not present in the Web page.

 Can be placed anywhere between the pairs of <form> tag.

 Syntax
<input type=“hidden” name=“name”
value=“value>

 Include a comment describing the purpose of the field.


14

Color Picker
 Input fields that should contain a color.

Syntax:
Color: <input type="color" name="user_color" />
15

Example
<form>
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>
16

tel
<form>
Telephone: <input type="tel" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
<input type="submit">
<span>Format: 123-45-678</span>
</form>
17

Data list Attribute


 The datalist - specifies a list of options for an input field.
 It is created with option elements inside the datalist - Same as
select

Eg: <datalist id="browsers">


<option value="Internet Explorer">
<option value="Firefox">
</datalist>
18

Keygen - Security
keygen element is used to provide a secure way to authenticate
users.

(keytype:rsa,dsa,ec)

Eg: <keygen name="security" keytype="rsa">


19

Output Attribute
The output element is used for different types of output, like
calculations or script output:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
20

File, Submit & Reset


File
<input type="file"/>

Submit
<input type="submit" value="Save My Data"/>

Reset
<input type="reset" value="Reset Data"/>

Example Program To Check: Ex5_FormElementsanditsInput types.html


21

Example - Forms
22

Real Time Website Application


23

THANK YOU

You might also like