H5基础【1】—form表单新旧属性

最近抽了点时间，整理一下一些前端基础知识，写的不好的地方请大家踊跃留言，我会继续优化这一系列文章：

一、html中的form老属性

text password radio checkbox submit reset button file hidden

<form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
     <!-- 文本框 -->
    <input type="text" value="小明">
     <!-- 密码框 -->
    <input type="password" value="123">

    <input type="radio" name="sex">男
    <input type="radio" name="sex">女

    <input type="checkbox" name="like">男
    <input type="checkbox" name="like">女
    <input type="checkbox" name="like">不明


    <input type="submit">
    <input type="reset">
    <input type="button">

    <input type="file">

    <input type="hidden" value="我是隐藏域 但是我不会在页面中显示，只会偷偷的提交给服务端">

    <textarea>
        文本域
    </textarea>

    <select name="name" id="">
        <option value="卤蛋">卤蛋</option>
        <option value="凯爹">凯爹</option>
        <option value="露娜">露娜</option>
        <option value="悟空">悟空</option>
    </select>
 </form>

详见HTML基础-表单篇

二、h5中的form新属性

email number tel url search range

1.邮箱email

<form action="http://www.baidu.com">
    <!--邮箱格式的校验，规则： 必须要有@   并且  @前后都有内容才能通过-->
    <input type="email">
    <input type="submit">
</form>

2.数字number

<form action="http://www.baidu.com">
    <!--纯数字：不可以有有文本，或特殊字符    主要用于移动端：弹出想对应的软键盘数字的
      可以输入不在范围内的值但是，点击提交的时候回校验 必选要在范围内：最大值  最小值  步长的倍数
      步长的基点数是从最小值基础上变化
      若没有最小值则是0（默认）
    -->
    <input type="number" min="2.5" max="100" step="5">
    <input type="submit">
</form>

3.手机号tel

<form action="http://www.baidu.com">
    <!--tel 手机端： 弹出一个软键盘 数值的 在pc端做text效果 -->
    <input type="tel" >
    <input type="submit">
</form>

4.服务器网址url

<form action="http://www.baidu.com">
    <!--url：必须要给个协议-->
    <input type="url" >
    <input type="submit">
</form>

5.搜索search

<form action="http://www.baidu.com">
    <!--search：手机端：弹出以软件盘 软件盘 右下角有个“搜索”/search-->
    <input type="search" >
    <input type="submit">
</form>

6.调节按钮(进度)range

<form action="http://www.baidu.com">
    <!--range
    默认：0 ~100
    初始显示的是 value = 50
    min 最小值
    max 最大值
    value 默认值
    同样是通过js调节
    -->
    <input type="range" max="1000" value="50">
    <input type="submit">
</form>