前端第十课–表单
**表单：**网页注册登录页面、信息调查问卷、搜索引擎的输出框
**form表单域:**浏览器在网页山专门用来划分出来一个用来划分出一个用来存储表单元素的区域
1.form是块元素
2.form标签的action属性内部是一个链接，只想的是提交表单时向哪个服务器地址发送表单数据。
3.form标签的method属性内部存储着该表单向目标服务器传输数据时采用的哪种法式,有get和post两种，post可以保密，get达不到信息会出现在地址栏；
**input元素：**在元素中使用，用来展示用户可以输入数据的元素。input标签最终的表现形式和传输至服务器的数据类型，取决于type属性。
1.input是行内元素；
2.input标签的type属性内部是存储着该input元素输入信息的类别（如文字，单选，邮箱，电话号码，多选框等）
3.form标签的name属性内部存储着该input元素的名称，此处的名称与class不同。
type的常见种类：
text（文本框）:出现一个横框，但只能显示一行；
password(密码框)；
text,password的附加属性：
1.maxlength:11;控件可输入数据的最大长度；
2.占位符：placeholder=“请输入密码”；作用是在用户端文输入信息时，在输入框中显示提示信息，该信息在用户点击输入任一信息后会自动消失；
3.设置value：自己设置的字符会出现在输入框中；
radio(单选按钮)：
1.另外得给每个radio加一个附加属性name：zs;(名字相同时实现单选)，后加一个checked可默认选中该元素；
2.value:是该选项所对应的数据以另一种字符形式传给后端；
checkbox(复选按钮)：
name值不一样，后端接受的是键值对：name===value，value的值是on；
type不常用种类：
**range(数字信息输入)：**此时input的展示形式为一个滑块，滑块中间有一个暗示按钮，该按钮可点击拖拽，以次改变用户输入的数字。
1.最大值max=“10000”；数字上限是10000，大于10000就改写成10000；
2.最小值min=“0”;数字的下限时0，小于0就改写成0；
3.步长:step=“10”;它的作用是当用户左右拖拽中间的指示按钮，数字每次加减的数字，比如step=“10”,n那么每次点击就是±10；
4.默认值：value=“0”;当用户没有输入数字时，指示按钮默认显示的数字；
number(数字信息输入)：
1.input展示的是一个可以上下调整的按钮，可以用来选择具体的数字
2.step=“10”;用户点击上下调整的按钮时，数字每次加减的数字，比如step=““10”,那么每次点击就是±10；
3.max:选择的最大值。 4.min:可选择的最小值。 5.value=“0”;当用户没有输入数字时，input框默认显示的数字
date(日期)：
此时input的展示形状为选项框，点击选项会弹出一个日期的选择页面，可选择具体的时间，也可以自行输入；
time(时间)：显示形状为选项框，可以调整时间，也可以自行输入；
month(月份)：会弹出一个日期的选择界面，可选择具体时间也可以自行输入，不精确到天。
week(周度)：
**dadetime-local:**可选择具体日期和时间，日期和时间都会保留。
**color:**展示形状为按钮状，点击按钮会弹出颜色值的选择页面，可选择颜色值，不同的操作系统提供的颜色值的选择界面不同；
**file：**展示形状是按钮状，按钮右侧有提示文字，点击按钮后会弹出操作系统的资源管理器，让用户选择目标文件的内容，选择之后，该文件的名字会替代提示文字；
多文件信息输入：type=“file” multuple 此时用户可选择多个文件，提示文件会提示用户选中选中多少个文件
**button(普通按钮)：**可点击得到按钮，无默认值，按钮中的文字有元素标签内部value属性中的文字决定。
**submit(提交按钮)????*value默认值是提交，提交之后可将信息传送给服务器。
**label标签：**扩大用户选择中的input元素的区域，
1.将两者关联的方式是：for属性的存储对应input元素的id名称；label关联的input元素可以改变样式。
2.扩大单选的选中范围：把与之关联的input元素后的内容写在label标签里面，可实现范围的扩大；
**button标签：**因为在不同的浏览器中可能提不同的按钮置，所以不常用button标签，使用html表单中创建按钮；
**select(下拉选项)：**创造一个下拉选项列表，selet中的name值表示这个下啦选项的名称；
**option元素：**创造一个下拉选项列表中的具体选项，option中的value值表示用户 选择这个选项后，表单向服务器发送的数据，。
**optgroup:**将option元素写在里面作为选项，但自身是不能被选中的；
**textarea（文本域）：**创造一个文本输入区域。
1.rows属性表示这个文本输入区域默认的高，cols属性表示这个文本输入区域默认的宽，这里的宽高值是字符；文本输入时会自动换行，
2.样式：宽高可以设置为像素；去掉文本域的手动扩大，样式中加入resize:none;
**fieldset:**标签可以将表单内的相关元素分组，会在相关表单元素周围绘制边框。
legend标签为fieldset元素定义标题
dset:**标签可以将表单内的相关元素分组，会在相关表单元素周围绘制边框。
legend标签为fieldset元素定义标题
[外链图片转存中…(img-nzwDjZyi-1582272291524)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e09QOFHZ-1582272291524)(C:\Users\李辉辉\AppData\Roaming\Typora\typora-user-images\image-20200221154002939.png)]