html表单

表单

1.表单的作用
采集和提交用户输入的信息（数据）
2.创建表单
2.1 定义表单，让浏览器知道这是一个表单结构

   <form action="提交的地址"   method="get\post">
   </form>
   提交方式method：
       get：数据显示在url的上面，所以数据不安全
            有大小限制，一般不超过2kb
       post：数据放在网页的头部，通过network查看，相对安全性高
             没有大小限制
       建议：处于安全考虑，提交重要数据时，最好使用post
       enctype：编码类型

2.2 表单元素

<input />   type：值不同
  文本框：<input type="text"/>
                    value：值
                    size：设置大小
                    maxlength：最大长度
                    minlength：最小长度
  密码框：<input type="password"/>
  单选框：<input type="radio"/>
                    注意：同一组单选框，名字相同
                               选中单选框：checked=”checked“
                              value属性用户看不到，还要专门文字
                              value提交表单时，提交到对应地址
  复选框：<input type="checkbox"/>
                       注意：同一组单选框，名字相同
                               选中：checked=”checked“
                              value属性用户看不到，还要专门文字
                              value提交表单时，提交到对应地址
  隐藏域（针对用户隐藏）：<input type="hidden"  name="名称"/>
  文件域：<input type="file"  name="名称"/>
              注意：表单中有文件域，必须使用post提交
                         表单的编码，必须设置成 enctype=”multipart/formdata“，
                         默认编码：enctype=”application/x-www-form-urlencoded"

  h5中在type中新加了：number，date，color，datetime，email等

列表框
      <select name="">
               <option value="值">用户看到的</option>
       </select>
       注意：选中属性：selected=”selected“
                 显示多行：multiple=”multiple“
                 显示个数：size=”数量“

多行文本域
      <textarea name=""  cols="列表"  row="行数" ></textarea>

按钮
    重置按钮  <input type="reset"  value=""/>  作用：将表单元素还原成初始状态
    普通按钮  <input type="button"  value=""/>   只有按钮的样式，没有任何功能作用
    提交按钮  <input type="submit"  value=""/>
    图片按钮  <input type="image"  src="图片路径"/> 图片按钮具有提交功能

2.3 div 与 span
两个标签没有任何的含义
div：容器
span：范围，跨度（文字的范围）
2.4 元素的分类
块级元素：不管内容多少，都独占一行
行内（内联）元素：内容有多少就显示多少，只有一行不够显示了，才换行显示
2.5 表单的高级应用

 (1)表单的属性
         只读属性：readonly=“readonly”，一般与问板框结合使用
         禁用属性：disabled=“disabled”，一般与按钮结合使用，也可以和文本框一起使用
 (2)域标签 ：<fieldset></fieldset>
    域标题：<legend></legend>
 (3)文本标签：<label></label>
    功能：文本标记 <label for="标注的标签ID"></label>

2.6 属性的分类
（1）共有属性（一般属性）
name，id，class，style等，所有标签都具有的属性
（2）特殊属性：只有对应的标签才有的特殊属性
如：href是a标签对应的属性
（3）自定义属性：用户可以根据自己的情况，自己定义属性
注意：自定义属性一般以“data-”开头

补充知识：
2.7 音频，视频标签

  h5：音频<audio></audio>
          视频<video></video>
          属性：src：路径
                     autoplay：自动播放 autoplay = “autoplay”
                     controls： 控制条 controls = "controls"
                     muted: 静音 muted = "muted"
  h4：音频：
           <object type="application/ogg" data="xxx.mp3">
                 <param name="src" value="xxx.mp3">
           </object>
           视频：
           <object type="application/ogg" data="xxx.mp4">
                 <param name="src" value="xxx.mp4">
           </object>

  h5：<embed src="xxx.wav">  embed—多媒体元素

2.8 iframe：内联框架，在一个页面，内嵌一个页面

 <iframe src=""></iframe>
   src：打开页面时，默认加载的页面
   height：高度
   width：宽度
   scrolling：滚动条
   注意：可以给iframe一个名称，a标签通过target设置成iframe名称，链接的页面将显示在框架中。