表单中面试及扩展知识点

还是老规矩，为大家补上前面的表单的相关视频：表单相关视频：提取码myir
今天呢主要为大家补充一下表单中学习的时候被大家遗漏的相关知识点

一、fieldset和legend

看下面的图：该图中的主要内容被一个蓝色的小框框选起来，框选起来的边框上面还有几个提示文本：这种样式该如何实现呢？

代码如下：

<form>
  <fieldset>
    <legend>健康信息</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

在这里fieldset标签就是实现外边框的效果，legend标签就是用来实现提示文本的相关标签；切记记住这里标签都是双标签，如果你把legend写成了单标签，那样的话就会出现如下图的效果：

所有的内容都会展示在提示信息的位置所以在这里提醒大家一定要注意单双标签的使用；

二、表单中的明密文提交

在学习表单的时候我们已经掌握了表单的提交方式，但是提交过程中的数据提交过程没有为大家真正的做案例展示，接下来就是为大家演示method提交方式：
前一篇文章中提到表单的提交方式是分为明文提交和密文提交
代码如下：

<form action="/example/html/form_action.asp" method="get" target="_blank">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" />
</form>

以上代码的提交方式method取值为：get；input输入框中有name属性；name属性在这里起到了接收输入框输入的值；当我在第一个输入框输入：liyong,第二个输入框中输入：123的时候；会跳转到一个新的页面；并且把对应的参数传递过去
效果展示如下：
然而当我们method取值为post的时候，我们再次运行，结果如下
地址栏中不会出现你输入的用户名和密码；这里起到了post的密文提交方式；能够保护信息

三、单复选框的功能功能优化

<form action="/example/html/form_action.asp" method="get" target="_blank">
  <fieldset>
  	<legend>性别选择</legend>
    <input type="radio" name="sex">男	
    <input type="radio" name="sex">女
  </fieldset>
</form>

上一篇文章中我们已经了解到了上面一组单选按钮我们通过，input的name属性解决了单选框的共选问题，也就是两个中只能选择一个的问题；实际案例中大部的网站当我们点击后面的"男女"文本的时候呢也能选中前面的复选框：这样的效果我们如何来实现呢？
通过下面的代码来实现：

<form action="/example/html/form_action.asp" method="get" target="_blank">
  <fieldset>
  	<legend>性别选择</legend>
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>	
    <input type="radio" name="sex" id="nv"><label for="nv">女</label>
  </fieldset>
</form>

我们通过label标签将后面的文本括起来，通过for属性与前面的input标签进行呼应，但是如何将两个标签关联呢？就需要input标签添加一个id属性，id属性和for属性的取值必须一致才能实现对应的效果；
那么今天补充的内容就到这里了；

下面是经常使用到的案例，可以让大家进行配合使用；有问题及时留言沟通；
案例一：
案例二：

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
既然咱们学习完了网页中的常用标签了，那么接下来我们准备开始学习标签对标签的一系列的修饰；