十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
form表单提交数据的几个注意事项:
创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的永福网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
1.所有获取用户输入的标签都必须在form表单里面
2.action控制着往哪儿提交
3.input\select\textarea 都需要有name属性
4.提交按钮input type="submit"
input 系列的type属性
text 文本框
password 密码框
radio 单选框
checkbox 复选框
date 日期
file 文件(可以上传图片)
button 普通按钮,多用JS给它绑定事件
reset 重置按钮
submit 提交按钮
textarea 大段文本
按钮的样式是可以自己写的,可以把按钮的默认样式隐藏掉, border-style:none;然后自己随便定义啊,宽度 width 高度height 背景图片或颜色 background 边框 border 鼠标形态 cursor等等
可以自定义啊,你是要自定义样式吧?表单按钮你可以把他看做一个行内元素,css对应的margin padding background color border border-radius这些属性都是支持的,可以对他的样式随便进行修改。
解决方法:用普通标签模拟,背景图设置在普通标签里面,表单功能还是用input来实现,交互功能得用JavaScript来实现。换句话说,CSS控制普通标签的样式来美化表单,JavaScript实现表单交互功能。
案例分析:
移动端兼容 - 调用相册的按钮样式处理
具体情形:input type="file" accept="image/*;capture=camera"或者input type="file" capture="photo"设背景图无效。在我们的移动端网页当中,会有上传照片的操作需求。此时会使用到文件类型的input文本框,但是不同的系统不同的浏览器在样式上均不相同,而且,设置背景图也没有效果。
解决方法:通过设置opacity为0来进行模拟,背景图设置在其他标签里面。换句话说样式用普通标签模拟,功能用input来实现。
测试效果图:
《CSS美化表单大集锦》