CSS表单教程
CSS网页制作第9讲:表单的使用与操作演示
项目导入:以注册表单为项目内容,引入表单的概念、表单HTML标记以及表单相关的CSS属性等分任务,多角度剖析表单制作流程
任务一、认识表单
任务二、表单相关HTML标记
任务三、表单设计CSS常用属性
项目一:快递运单注册表单制作
项目二:注册表单的制作
任务一:什么是表单以及表单的作用
表单(Form)作为网页与用户接触最直接、最频繁的页面元素,其在网站用户体验中占有最重要的位置。而表单也常常用于用户注册、登录、投票等功能,用于吸引新用户,留住新用户的重要工具。如果表单设计用户体验不高,无疑将会对网站用户粘性大大降低。
简单一点讲:表单就是向服务器提交数据,完成数据收集。所有表单控件,只有放在<form>标签里,才能将数据提交到服务器。
典型表单案例:注册表单、登陆验证表单、问卷调查表单。
任务二:表单相关HTML标记
(1)学习HTML表单(Form)最关键要掌握的有三个要点:(仅仅是了解)
- 表单控件(Form Controls)
- Action
- Method
最基本的表单结构:
<form method="post" action="">
[表单内容]
</form>
Action属性:用户填入表单的信息总是需要程序来进行处理,表单里的action就指明了处理表单信息的文件,比如上面例句里的http://www.zzarea.com
Method属性:表示了发送表单信息的方式。method有两个值:get和post。get的方式是将表单控件的name/value信息经过编码之后,通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送,你在地址栏看不到表单的提交信息。那什么时候用get,什么时候用post呢?一般是这样来判断的,如果只是为取得和显示数据,用get;一旦涉及数据的保存和更新,那么建议用post。
(2)具体细分表单FORM相关HTML标记
表单控件(Form Contros) | 说明 |
input type="text" | 单行文本输入框 |
input type="submit" | 将表单(Form)里的信息提交给表单里action所指向的文件 |
input type="checkbox" | 复选框 |
input type="radio" | 单选框 |
select | 下拉框 |
textArea | 多行文本输入框 |
input type="password" | 密码输入框(输入的文字用*表示) |
任务三、表单设计CSS常用属性
简单实例制作一个简单的提交表单:输入简单的html代码部分,
效果如下:
接下来站长地带来完成CSS属性部分内容:
效果如下:
这样一个简洁的提交表单就完成啦!
本文《css表单的使用与操作教程(视频教程)》相关素材课件教程+视频教程,请到网络创业论坛
声明
源码下载不顺利,比如源码在百度网盘的有时会被无故取消等,请联系QQ:46667551
本站大部分下载资源收集于网络,但除特别说明之外,基本全部亲自测试可用!
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。
原文链接:https://www.love0312.com/977.html,转载请注明出处
上一篇:一列上中下固定宽度且居中布局