10form表单，h5新标签

10form表单，h5新标签

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

    form 是一个块标签
    action 属性，数据要提交到服务器地址，一般是接口地址
    method 属性，数据的提交方式
        他的值有
            get,post,put,delete等

get：get请求可以把数据拼接到 接口地址的 url上，缺点是不安全，提交的数据较少

post：post请求，在post提交的数据信息中，不会看到提交的数据结构，相比较get是安全的，并且提交的数据较大

label 标签，行标签，经常和input搭配使用，表示input的标题

input 标签，行标签，输入框，常用于表单输入

type属性，用来设置输入框的类型

            属性值
                text 文本输入框
                password 密码输入框
                button 普通按钮
                submit 提交按钮
                reset 重置按钮
                radio 单选框
                checkbox 多选框
                hidden 隐藏框

value 属性，设置input的值

name 属性，对于界面显示没有任何影响，主要用于数据交互，实质上name的值既是后台数据的字段名

placeholder 属性，输入框的提示信息

maxlength 属性，输入字符的最大长度

单选框和复选框的默认选中，只需要在input 上设置 checked属性即可

禁用某一个input 标签，只需要给 input 添加 disabled 属性即可

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

disabled 和 readonly 的异同：

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

02例如

姓名
密码
性别 男 女
对象 吕布 周瑜
对象 吕布 周瑜

中午吃啥
重庆小面
套餐
拉面
掉渣饼
老母鸡汤

出生日期

输入昵称

点击按钮标签

<form action="http://www.baidu.com" method="get">
        <label>姓名</label>
        <input disabled type="text" value="" name="username" /> <br/>
        <label>密码</label>
        <input placeholder="请输入密码" type="password" value="" name="username" maxlength="8" /> <br/>
        <!-- 
            单选框 同一类型选项，他们的name值必须相同

            label 的for属性，用来绑定对应 id的input，例如
            <label for="abc"></label> 只要对该label操作，则会在当前页面找到 id="abc" 的input，并且选中该input
         -->
        <label>性别</label>
        <label><input checked type="radio" name="sex" value="男">男</label>
        <label><input type="radio" name="sex" value="女">女</label>
        <br/>

        <!-- 想点字选择就用label包裹 -->
        <label>对象</label>
        <input type="radio" name="love" value="吕布" id="lv"><label for="lv">吕布</label>
        <input type="radio" name="love" value="周瑜" id="yu"><label for="yu">周瑜</label>
        <br/>
        <label>对象</label>
        <label><input checked type="radio" name="love" value="吕布">吕布</label>
        <label><input type="radio" name="love" value="周瑜">周瑜</label>
        <br/>

        <label>中午吃啥</label>
        <label><input checked 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>
        <br/>

        <label>出生日期</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 disabled type="button" value="普通按钮"/>
        <input type="submit" value="提交"/>

     </form>

     <button disabled>点击按钮标签</button>

03

input 属性，input 虽然是行标签，但是可以设置宽高

        minlength 最少字符数
        required 设置为必填项

type 属性补充

            file 提交文件
            number 输入数字

select 下拉框，行标签

        他的子级必须是 option 标签，每一个 option 标签表示一个选项，option具有 value属性

fieldset 创建一个组

        legend 组的标题

textarea 多行文本输入框

        属性
            rows 设置具有多少行
            cols 设置具有多少列

用户名
密码

性别
女
男

兴趣爱好
排球
篮球
足球
乒乓球

上传头像

薪资

郑州 哈尔滨 南宁 乌鲁木齐 郑州 哈尔滨 南宁 乌鲁木齐 学生信息

输入简介

<form action="###" method="get">
        <label>用户名</label>
        <input type="text" value="" minlength="6" maxlength="8" required placeholder="请输入用户名"><br/>
        <label>密码</label>
        <input type="password" value="" placeholder="请输入密码"><br/>

        <label>性别</label>
        <input type="radio" value="女" name="sex">女
        <input type="radio" value="男" name="sex">男<br/>

        <label>兴趣爱好</label>
        <input type="checkbox" value="排球">排球
        <input type="checkbox" value="篮球">篮球
        <input type="checkbox" value="足球">足球
        <input checked type="checkbox" value="乒乓球">乒乓球
        <br/>

        <label>上传头像</label>
        <input type="file"><br>

        

        <label>薪资</label>
        <input type="number"><br>

        <select>
            <option value="郑州">郑州</option>
            <option value="2">哈尔滨</option>
            <option value="3">南宁</option>
            <option value="4">乌鲁木齐</option>
        </select>
        <select>
            <option value="郑州">郑州</option>
            <option value="2">哈尔滨</option>
            <option value="3">南宁</option>
            <option value="4">乌鲁木齐</option>
        </select>

        <fieldset>
            <legend>学生信息</legend>
            <label、>姓名</label>
            <input type="text" class="txt"><br>
            <label、>年龄</label>
            <input type="text"><br>

        </fieldset>

        <label>输入简介</label>
        <textarea class="area" rows="10" cols="50"></textarea>

        <br/>
        <br/><br/>
        <input type="submit" value="提交">

    </form>

04h5新标签

<!-- 
        h5新特性都有哪些
        1.新增了很多语义化标签
        2.废弃了一些css修饰和html标签
        3.支持本地持久化数据
        4.增加了音视频标签的api
        5.提供了canvas画布及其api

        H5各种功能比较新，低于IE9的浏览器支持的功能不够全面，建议使用 IE9及其以上浏览器
     -->
     <!-- mark 标记标签 -->
     <p>两个<mark>黄鹂</mark>鸣翠柳</p>

     <!-- meter 用电量标签
        常用于能量的使用或者内容的使用量等
        属性
            value 当前电量的值
            max 最大值
            min 最小值
            low 用电量最低报警值
            high 用电量最高报警值

        当前标签中的文字，只有在浏览器不支持的时候会被渲染出来
    -->
     <meter 
     value="34" 
     max="100" 
     low="20" 
     high="90" 
     min="0"
     >你的浏览器太low了</meter>
     <!-- 
        进度条标签
        只有最大max属性
        没有min属性
        value属性是当前值
      -->
      <progress
        max="100"
        value="50"
      ></progress>
      <!-- 
        ruby 标签，常用来做拼音，注音，注释等
        rt 表示注释的内容
        rp 表示浏览器不支持，显示的内容
       -->
      <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>
      </datalist>
      <!-- 
        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>