form表单大全h5新标签

form表单

form标签，表单，可以用来提交数据

form 是一个块标签

    action 属性，数据要提交到的服务器地址，一般是接口地址
    method 属性，数据的提交方式
         他的值有
           get  post  put  delete 等
    get: get请求可以把数据拼接到 接口地址上的 url上，缺点是 不安全，提交的数据较少
    post: post请求，在post提交的数据信息中，不会看到提交的数据结构，相比较get是安全的并且提交的数据较大
    lable 标签，行标签，经常和input搭配使用，表示input的标题
    input 标签，行标签，输入框，常用表单输入
    type属性，用来设置输入框类型
        属性值有
              text 文本输入框
              password 密码输入框
              button 普通按钮
              submit 提交按钮
              reset  重置按钮
              radio  单选框
              checkbox 多选框
              hadden 隐藏框
              file 提交文件
              number 输入数字
        value属性，设置input的值
        name属性，对于界面显示没有任何影响，主要用于数据交互，实质上name的值即是后台数据的字段名
        placeholder 属性，输入框的提示信息
        maxlength 属性，输入字符的最大长度
        minlength 最少字符数
        required 设置为必填项
        select 下拉框，行标签
        他的子集必须是 option 标签，每一个 option 标签表示一个选项
        option标签具有 value属性
    
        fieldset 创建一个组
        legend 组的标题

    textarea 多行文本输入框
        属性
          rows 设置具有多少行
          cols 设置具有多少列

 <label for="">性别</label>
 <label><input checked type="radio" name="sex" value="男">男</label> 
<label><input type="radio" name="sex" value="女">女</label>
<select name="" id="">
           <option value="1">郑州</option>
           <option value="2">哈尔滨</option>
           <option value="3">南宁</option>
           <option value="4">乌鲁木齐</option>
           <option value="5">武汉</option>
           <option value="6">西安</option>
       </select><br>
       <fieldset>
           <legend>学生信息</legend>
           <label for="">姓名</label>
           <input type="text" value="" class="txt"><br>
           <label for="">年龄</label>
           <input type="text" value=""><br>
       </fieldset>
       <label for="">输入简介</label>
       <textarea class="area" name="" id="" cols="30" rows="10"></textarea>

 /* 设置 textarea
        通过 css的resize 属性，设置 拖拽的方向
        horizontal 横向拖拽
        vertical 纵向拖拽
        both 双向拖拽
        none 不拖拽
    */
    .area{
        resize:none;
    }

单选框 同一类型选项 他们的name值必须相同

label 的for属性，用来绑定对应的 id 的input，例如
<label for="abc"></label> 只要对该label操作，则会在当前页面找到 id="abc"的input
并且选中input
单选框和多选框的默认选中，只需要在input上设置 checked 属性即可
禁用一个input 标签，只需要给input 添加 disabled 属性即可 (点不动)

给某一个输入框添加 只读 属性 readonly ,确保该输入框内容可以通过程序修改,
并且能提交到后台

 disabled 和 readonly 的异同：他们都不能手动修改
 不同的是diaabled 它里面的值不能提交和使用，readonly的值可以提交到后台

多选框

    <label>中午吃啥</label>
    <label><input type="checkbox" value="重庆小面">重庆小面</label>
    <label><input type="checkbox" value="拉面">拉面</label>
    <label><input type="checkbox" value="套餐">套餐</label>
    <label><input disabled type="checkbox" value="掉渣饼">掉渣饼</label>
    <label><input checked type="checkbox" value="老母鸡汤">老母鸡汤</label> 

其他

      <!-- 日期 -->
     <label for="">出生日期</label>
    <input type="text" readonly value="2000-04-01"/><br>
    <!-- 隐藏输入框 -->
    <input type="hidden" value="珍爱网"/>

    <label>输入昵称</label>
    <input type="text" value="" placeholder="给自己取一个昵称"><br>

    <input type="reset" value="重置复位">
    <input type="button" disabled value="普通按钮"><!--不会提交 就是一个按钮-->

H5 新标签

    h5新特性都有哪些
    1.新增了很多语义化标签
    2.废弃了一些 css修饰和 html标签
    3.支持本地持久化
    4.增加了音视频标签的 api
    5.提供了canvas 画布及其 api
   H5各种功能比较新，低于IE9的浏览器支持的功能不够全面，建议使用 IE9 及其以上的浏览器

用法

  <!-- mark 标记标签 -->
 <p>两个<mark>黄鹂</mark>鸣翠柳</p>
 <!-- mater用电量标签
    常用于能量的使用或者内容的使用量等
    属性
       value 当前电量的值
       max 最大值
       min 最小值
       low 用电量最低报警值
       high 用电量最高报警值
       当前标签的文字只有在不支持浏览器的时候会被渲染出来
-->
 <meter value="68" max="100" low="20" high="90" min="0"></meter>
 
 <!-- 进度条标签,只有最大值max 属性，没有min 属性，value 属性是当前值 -->
 <progress max="100" value="50"></progress><br><br><br>

• ruby 标签 常用来做拼音，注音，注释等
  rt 表示注释的内容
  rp 如果浏览器不支持，显示的内容

  赵
  zhao
  你的浏览器太low了
  

 <ruby>赵
        <rt>zhao</rt>
        <rp>你的浏览器太low了</rp>
    </ruby>

• datalist 数据列表标签
  通过 input 的list属性 和 datalist的id属性进行绑定
  datalist 中的选项使用 option 标签
  通过datalist 可以制作关联查询效果

 <input type="text" value="" list="show"/>
    <datalist id="show">
        <option value="一枝红杏出墙"></option>
        <option value="一枝红杏出"></option>
        <option value="一枝红杏"></option>
        <option value="一枝红"></option>
        <option value="一枝"></option>
        <option value="一枝否定红"></option>
    </datalist><br><br><br>

<!-- 
    sup 上角标,  sub 下角标
    常用于注释
-->
<p>3<sup>2</sup>+ 4 <sup>2</sup> = 5 <sup>2</sup></p>
<p>3<sub>2</sub>+ 4 <sub>2</sub> = 5 <sub>2</sub></p>