HTML5智能表单.pptx

智能表单设计 内容 新输入类型 新元素 客户端校验 表单类型历史 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=email name=user_email / Input Type - url 自动将提交数据变为Url 7 Homepage: input type=url name=user_url / Input Type - number 输入数字 8 属性 类型 描述 max number 最大值 min number 最小值 step number 步进修改值 value number 初始值 Points: input type=number name=points min=1 max=10 / Input Type - range 选择一个范围内的数字 9 属性 类型 描述 max number 最大值 min number 最小值 step number 步进修改值 value number 初始值 input type=range name=points min=1 max=10 / 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: input type=color name=user_color / Forms的新属性 Autofocus Placeholder Required input type=search name=query autofocus input type=email name=email id=email placeholder=user@ 新属性 属性 值 描述 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 meter value=2 min=0 max=102 out of 10/meterbr /meter value=0.660%/meter progress 显示进度条 progress value=22 max=100/progress datalist 自动实现下来选择输入 input list=cars /datalist id=cars  optio