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表单的使用与操作教程（视频教程）》相关素材课件教程+视频教程，请到网络创业论坛
本文链接：https://www.dnwfb.com/977.html，转载请注明出处。
评论0