前端初学者----网页中得表单(form)

在分析新的知识之前呢还是要为大家提供一下表格中得相关视频讲解，视频都是平时上课讲解时候录制得，有可能环境不如专业人士，但是激情永不输：
表格中得知识点和案例分享视频：am6x；永久有效哦

分享完视频后接下来就要进入正题了，今天主要带着大家分析得主要内容时表单；到底什么时表单呢？咱们接下来慢慢解释；
表单与表格类似，但是也有不同，表格上篇文章咱们已经介绍了用来展示数据；表单呢，则主要时用来收集数据信息，向服务器进行提交数据进行数据验证得；
常见得表单案例：

QQ得登陆页面：你输入信息得得时候就使用了表单信息验证页面：输入提示功能

以上图片中得内容都用到了表单中得相关控件；

有的同学该问了：
1.表单如何与服务器进行交互
2.什么是控件
根据这个图片来回答你们得交互疑问：

控件得疑问：控件就类似于生活中得开关，在表单中一切能输入得数据内容和点击得内容都可以称之为控件
接下来详解介绍表单中得相关控件
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆

1、表单

作用：用于网页中收集信息，提供与服务器进行收集交互信息的可视化交互的控件标签

2、表单的标签

<form></form>

一切交互使用的可视化控件均需要放在form标签中

3、表单的相关属性

<form name="bd" action="#" method="get" ></form>

含义：一切交互使用的可视化控件均需要放在form标签中，使用form标签进行收集信息，然后进行提交
属性1：表单的名字属性 name=“biaodan”;
属性2：表单的提交地址属性 action="#";与哪一个文件进行提交的一个路径或者文件
属性3：表单的提交方法属性 method=“get”;
       取值1：get；默认提交方式，属于明文提交方式，不安全，提交数据较小
       取值2：post；属于明文提交方式，相对安全，提交数据较大

4、表单的可视化控件分类

4-1、input类可视化控件==type属性

4-1-1.单行文本输入框

案例：<input type="text">
效果：
输入文字提示性属性：
       1、给输入框一个值。value=“文字值的文字提示性属性”====占位，用户体验不好，需要删除输入框中值
       2、占位符属性：placeholder=“请输入用户名”===========不占位，用户体验更加好，不用删除提示信息

4-1-2.密码框

含义：用户得密码具有保护信息作用，不同浏览器显示不一致，有时候为···；有时候显示为：******
案例：<input type="password">
效果：
输入文字提示性属性：
      1、给输入框一个值。value=“文字值的文字提示性属性”====占位，用户体验不好，需要删除输入框中值
      2、占位符属性：placeholder=“请输入用户名”===========不占位，用户体验更加好，不用删除提示信息

4-1-3.单选框

含义：平时系统中出现得单选按钮
案例：<input type="radio">男<input type="radio">女
但是上面得案例中，能够实现样式，但是有一个小得bug，就是男女共选

如何解决共选问题，给上面得代码添加一个共有得属性name，而且属性值必须一致；name属性在这里起到了分组，解决共选问题，
代码：

<form action="/demo/demo_form.asp">
<input type="radio" name="sex" >男
<input type="radio" name="sex" >女
</form> 

效果：

问题来了：那么如果一个页面中有多个单选题得单选按钮如何进行分类呢？就目前得知识来看那就需要多个不同得name进行不同得分组；
单选框的相关属性：
      1、单选框只能选择一个的问题，name=“sex”，起到了分组的作用
      2、单选框中的默认选择属性：checked="checked"或者checked="true"或者checked

4-1-4.复选框

案例：<input type="checkbox">篮球<input type="checkbox">足球<input type="checkbox">乒乓球
效果：
复选框的相关属性：
      1、分组属性，name=“hobby”
      2、复选框中的默认选择属性：checked="checked"或者checked="true"或者checked

4-1-5.上传文件

案例：<input type="file">
效果：
含义：提交文件，上传文件，上传的文件在此处没有限制，不同浏览器中得样式显示效果不一致；

4-1-6.隐藏域

案例：<input type="hidden">
含义：部分数据进行隐藏，用户看不到

4-1-7.提交按钮

案例：<input type="submit" value="提交">
含义：将收集后的数据进行提交到服务器；相关属性，能够进行修改按钮中的文字
value属性；value=“点我啊”

4-1-8.重置按钮

案例：<input type="reset" value="重置按钮">
含义：将收集后的数据进行清空
value属性；value=“别点我啊”

4-1-9.普通按钮1

案例：<input type="button">
含义：将收集后的数据进行清空
value属性；value=“别点我啊”

4-1-10.普通按钮2===双标签使用

案例：<button>普通按钮</button>

4-1-11.搜索框

案例：<input type="search">
效果：

含义：能将搜索的数据直接清空

4-1-12.滑块

案例：<input type="range">
效果：

4-1-13.颜色拾取

案例：<input type="color">
效果：

4-1-14.日期

案例：<input type="date">
含义：显示日期
效果：

4-1-15.月份

案例：<input type="month">
含义：显示日期
效果：

4-1-16.周期

案例：<input type="week">
含义：显示日期
效果：

4-1-17.时间

案例：<input type="time">
含义：显示日期
效果：

4-1-18.数值

案例：<input type="number">
含义：显示数字
属性1、max="数值"最大值属性
属性2、min="数值"最小值属性
属性3、step="数值"步长值属性
真实案例：<input type="number" max="60" min="0" step="5">
效果：

4-2、下拉菜单==select

4-2-1：下拉菜单的标签==select标签

案例：<select></select>
相关属性
      属性1、控制下拉菜单显示多个内容，size=“2”
      属性2、控制下拉菜单能够多选的属性，multiple

4-2-2：下拉菜单选项的标签==option标签

案例：<option>北京</option>
相关属性
      属性1、下拉菜单选项的值属性，value=“值属性”
      属性2、下拉菜单默认选中状态，selected

三级目录4-2-3：完成案例

<select> 
 <option>北京</option>
 <option>天津</option> 
 <option>山海</option>
</select>

4-3、文本域类型==textarea

案例：
属性1、控制文本域显示的宽度，也就是文本框输入的列数
属性2、控制文本域显示的高度，也就是文本框输入的行数

4-4、其他类型

4-4-1：label标签

案例：**

4-4-2：引入浮动框架标签，引入公共的页面

案例：

4-4-3：当浏览器不支持引入浮动框架的时候使用noframe标签来解决问题

4-4-4：表单中的分组标签

<fieldset id="">
<legend>性别选择：</legend>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</fieldset>

---

以上内容均是表单得中得知识点，下次内容中还是需要赘述表单中得相关内容；并且表单中得视频也会在下次文章中进行上传；欢迎大家及时查

---

练习题：如下三个
练习一：纯表格表单得练习

练习二：表格配合表单得使用

练习三：表格表单得配合使用，使用百分比

如有问题及时留言哦。希望大家多多帮帮点赞支持，并且提供对应得意见；