公司使命:打造嘉兴技术实力最强的网络公司
服务项目:嘉兴网站建设 嘉兴网站制作 嘉兴网站优化
新闻中心

手机网站的表单设计

发布时间:2014/10/9 16:16:31   文章来源:jiaxingweb   浏览:[  ]   评论:[  ]

     在设计表单控件时,注意显式地设置控件的宽度和高度,并且注意当焦点位于输入控件时,会调出软键盘,软键盘会占用一定的空间,因此在设计布局时要充分考虑到。(通俗的将就是设计表单的时候,要留下软键盘的位置)

 
 
    在HTML5中定义了很多新的输入框类型,这些输入框本来是用于数据验证功能的,但是Mobile Safari和Chrome Lite可以根据不同的输入框调用不同的软键盘,这是巨大的友好设计。
 
1.tel类型
    tel类型用于从语义上实现一个电话号码的输入。例如,下面的代码要求输入11位数字的移动电话号码。
 
    TEL:<input type="tel" name="user_mobile_phone" pattern="^\d{11}$">
 
    当要求输入电话号码时,Mobile Safari和Chrome Lite的软键盘上会切换成数字类型的输入键,并提供#和*键。
 
 
2.email类型
    email类型用于应该包含E-mail地址的输入文本框。例如:
 
    Email:<input type="email" name="user_email">
 
    在提交表单时,会自动验证输入框的值,根据浏览器实现的不同,或者会提示出错,或将焦点放置在这个控件上以警示。当要输入E-mail时,Mobile Safari的软键盘上会出现@字符键,Chrome Lite没有这个功能。
 
3.url类型
    url类型用于应该包含绝对URL地址的输入框。例如:下面的代码用于输入主页的网址。
 
    HomePage:<input type="url" name="homepage_url">
 
    在提交表单时,会自动验证输入的值,依据浏览器实现的不同,或者会提供出错,或者将焦点放置在这个控件上以警示。
 
4.number类型
    number类型用于应该包含数值的输入框,在提交表单时,会自动验证输入的值,还能够设定对所接受的数字的限定。例如,下面的代码限定年龄段在18~100岁之间。
 
    年龄:<input type="number" name="user_age" min="18" max="100">
 
    当要输入年龄时,Mobile Safari和Chrome Lite的软键盘上会切换成数字类型的输入键。
评论
发表评论
评论内容:
昵称:
邮箱:
嘉兴网络公司 嘉兴网站建设 嘉兴网站制作 嘉兴建网站 嘉兴做网站 嘉兴网页制作 PE给水管 HDPE中空壁缠绕管 ABS管生产厂家
服务热线: 0573-82102225 15858312461 QQ: 56373131 E-mail: sales@jiaxingweb.com 地址: 嘉兴市南湖区富润路101号320室 浙ICP备09050985号
嘉兴网站建设-嘉兴网站制作-嘉兴网站优化-龙媒网络@嘉兴网络公司 www.jiaxingweb.com