六讲智能表单的应用.pptVIP

创建易用的Web表单 主讲：丛浩 @LAMP兄弟连丛浩 conghao@ 便于排版的From表单 XHTML或者HTML4.01中from和其中的表单标签(input、textarea、select、button)必须嵌套使用 form action= method=post input type=text name=user / select name=year option value=1999/option /select textarea name=ext /textarea button type=submit提交/button /form HTML5中为了方便排版，可以使from中的表单标签脱离from的嵌套。方法:from指定ID，所有表单标签均添加from=id属性。 form action= method=post id=register /form input type=text name=user form=register / select name=year form=register option value=1999/option /select textarea name=ext form=register /textarea button type=submit form=register 提交/button 智能表单的使用和规范 Input表单的type新属性值 Type=email 限制用户输入必须为Email类型 Type=url 限制用户输入必须为URL类型 Type=date 限制用户输入必须为日期类型 Type=time 限制用户输入必须为时间类型O Type=month 限制用户输入必须为月类型O Type=week 限制用户输入必须为周类型O Type=number 限制用户输入必须为数字类型 Type=range 产生一个滑动条的表单 Type=search 产生一个搜索意义的表单 配合results=n属性 C Type=color 生成一个颜色选择表单 新增的表单属性 属性 值 说明 Required required 表单拥有该属性表示其内容不能为空，必填 placeholder 提示文本 表单的提示信息，存在默认值将不显示 Autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单 Pattern 正则表达式 输入的内容必须匹配到指定正则 Autocomplete列表 Datalist标签配合option标签实现的自动填充表单功能： input type=search name=move list=search datalist id=search option黑老师的由来/option option男人缘何肾虚/option option佳佳婕婕不得不说的故事/option /datalist 效果图 output的使用 form oninput=res.value=no1.value*no2.value“ input type=text name=no1 input type=text name=no2 output name=res/output /form