Web前端-html 5—form

                                                            form

 

color

获取当前的颜色  和  js 连用

<input type="color" name="mycolor">
    <button>点击改变颜色</button>

 

email

邮箱格式的校验，规则： 必须要有@   并且  @前后都有内容才能通过

<form action="http://www.baidu.com">
    <input type="email">
    <input type="submit">
</form>

number

  纯数字：不可以有有文本，或特殊字符    主要用于移动端：弹出想对应的软键盘数字的
  可以输入不在范围内的值但是，点击提交的时候回校验 必选要在范围内：最大值  最小值  步长的倍数
  步长的基点数是从最小值基础上变化
  若没有最小值则是0（默认）

<form action="http://www.baidu.com">
    <input type="number" min="2.5" max="100" step="5">
    <input type="submit">
</form>

tel

tel 手机端： 弹出一个软键盘 数值的 在pc端做text效果

<form action="http://www.baidu.com">
    <input type="tel" >
    <input type="submit">
</form>

url

url：必须要给个协议

<form action="http://www.baidu.com">
    <input type="url" >
    <input type="submit">
</form>

search

search：手机端：弹出以软件盘 软件盘 右下角有个“搜索”/search

<form action="http://www.baidu.com">
    <input type="search" >
    <input type="submit">
</form>

range

range
默认：0 ~100
初始显示的是 value = 50
min 最小值
max 最大值
value 默认值
同样是通过js调节

<form action="http://www.baidu.com">
    <input type="range" max="1000" value="50">
    <input type="submit">
</form>

input

<input type="date">
<input type="month">
<input type="time">
<input type="datetime-local">
<hr>
<!--<form action="http://www.baidu.com">-->
<form action="#" id="myform">
    <!--input的属性--> 
    <!--不占位 只有提示作用 不输入value 值则显示  输入value值不显示-->
    <!--<input type="text" placeholder="我是提示的作用" autofocus>-->
    
    <!--无法使用的-->
    <!--<input type="text" disabled  value="我是不可以用的disabled"  name="mydisabled">-->
    <!--无法使用-->
    <!--<input type="text" readonly value="我是不可以用的readonly" name="myreadonly">-->
    <!--
    disabled 的内容 不会被提交 即使有name 值也不会被提交给后台
    readonly 的内容 会被提交给后台

    -->
    <!--自动获取焦点  ，当多一个input都有该属性的时候 则谁先焦点在谁身上-->
    <!--<input type="text" placeholder="自动获取到焦点" autofocus>-->
    <!--不为空的校验，只要不嫌是placeholder的内容 则就表示该输入框部位空-->
    <!--<input type="text" required placeholder="不能为空的验证">-->
    <!--多个内容 多个内容 但是 每一个邮件地址用“，”作为间隔-->
    <!--<input type="email" multiple>-->
    <!--min  max  最大值最小值-->
    <!--<input type="range" min="0" max="1000" value="2000">-->
    <!--step  步长   默认是1   -->
    <!--<input type="number" step="10" name="show">-->
    <!--form ：让不在当前form 中的其他 内容  同时个该form 可以一起提交  但是要使用特殊当前form 添加id-->

    <!--此时的input 不在要type 属性而是使用的是 list属性  作为关联datalist中的值-->
    <input list="a" name="inputlist">
    <datalist id="a">
        <option value="a">aa</option>
        <option value="aa">bb</option>
        <option value="aab">cc</option>
        <option value="b">dd</option>
        <option value="bb">ee</option>
        <option value="bba">ff</option>
    </datalist>
    <input type="submit">
</form>
<!--<input type="text" name="username" value="善知一枝花" form="myform">-->