html5智能表单,HTML5智能表单.pptx

HTML5智能表单

智能表单设计

内容

新输入类型

新元素

客户端校验

表单类型历史

1995年HTML2开始提出

交互性的基础

3

新的输入类型

为了配合用户输入,date,color,range

4

各种新类型

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

5

Input Type - email

自动校验输入的是否是email

Microsoft Confidential

6

E-mail:

Input Type - url

自动将提交数据变为Url

7

Homepage:

Input Type - number

输入数字

8

属性

类型

描述

max

number

最大值

min

number

最小值

step

number

步进修改值

value

number

初始值

Points:

Input Type - range

选择一个范围内的数字

9

属性

类型

描述

max

number

最大值

min

number

最小值

step

number

步进修改值

value

number

初始值

Input Type - Date Pickers

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 (UTC time)

datetime-local - Selects time, date, month and year (local time)

10

Input Type - search

搜索内容

Input Type - color

选择一种颜色，以RGB方式记录显示

Color:

Forms的新属性

Autofocus

Placeholder

Required

新属性

属性

值

描述

autocomplete

on/off

是否自动补完这一文本框

autofocus

autofocus

是否自动设置焦点，如果类型是hidden则不可

form

formname

说明一个文本框属于某一个form

formaction

URL

本文本框将要被提交到何处去

formenctype

application/x-www-form-urlencoded

multipart/form-data

text/plain

指定发送的时候的编码方式

formmethod

Post/get

指定提交方式

formtarget

_blank/_self/_parent/_top/framename

提交结果显示位置

新属性

属性

值

描述

height

Pixels/%

Defines the height of an input (for type="image")

list

datalist-id

输入选择项

multiple

multiple

允许多项

pattern

正则表达式

pattern=“[0-9]” ，用正则格式化输入

width

Pixels/%

定义图片的宽度

meter

为了显示进度

属性

值

Form

number

High

number

Low

number

Max

number

Min

number

Optimum

number

value

number

2 out of 1060%

progress

显示进度条