常见表单类型

2017-01-13  本文已影响0人  智多牛
    <form name="inputTypeForm" id="typeForm" novalidate="true" enctype="text/plain">  
        <!--最常用的输入框的类型 + autofocus属性用于表单自动获得焦点 + pattern支持表单自定义正则表达式验证 + required必填项用required控制-->  
        <input type="text" name="name" autofocus="autofocus" pattern="[A-z]{3}" required="required">  
        <!--主要用于输入密码会隐藏显示的内容-->  
        <input type="password" name="pass">  
        <!--显示button按钮-->  
        <input type="button" name="确定">  
        <!--表单的提交按钮 + formnovalidate为true时是对该项免去浏览器默认的验证 + formaction存在值得时候是对当前的表单重新选择提交路径-->  
        <input type="submit" value="提交"  formnovalidate="true" formaction="demo_admin.asp" >  
        <!--重置表单的按钮-->  
        <input type="reset" value="重置">  
        <!--单选按钮让用户只选其一-->  
        <input type="radio" name="sex" value="man">  
        <input type="radio" name="sex" value="woman">  
        <!--表单的多选框-->  
        <input type="checkbox" name="white" value="white">  
        <input type="checkbox" name="blue" value="blue">  
        <!--用于定义隐藏字段-->  
        <input type="hidden" name="city" value="city">  
        <!--用于用户选择文件上传 + multiple 支持多选、默认情况下是单选-->  
        <input type="file" multiple="multiple">  
        <!--不提倡使用type=image作为表单的提交按钮要结合alt src使用。提交时会将按钮的x/y坐标提交上去 + width、height是css3新加的属性 -->  
        <input type="image" src="http://demo.jb51.net/js/2015/jquery_lunbo/images/4.jpg" alt="submit" width="99" height="99">   


        <!--新增控件类型 下面是html5新加的表单类型,使得html更加的强大 可以设置最小值、最大值和每次点击跳的步数-->  
        <input type="number" min="0" max="10" step="3">  
        <!--自带的邮箱输入框已经做好了验证-->  
        <input type="email" placeholder="请输入邮箱">  
        <!--如果想要输入一个连接通过url来控制-->  
        <input type="url" placeholder="请输入链接">  
        <!--可以选择颜色-->  
        <input type="color" placeholder="请选择颜色">  
        <!--可以选择范围-->  
        <input type="range" placeholder="请选择范围">  


        <!--日期的选择当然时间这块的类型有点多  date/month/week/time/datetime-->  
        <input type="date" placeholder="请选择时间">  


        <!--html5新加的列表标签、更形象化 相当于自己封装了一个select-->  
        <datalist id="url_list">  
            <option label="W3Schools" value="http://www.w3school.com.cn" />  
            <option label="Google" value="http://www.google.com" />  
            <option label="Microsoft" value="http://www.microsoft.com" />  
        </datalist>  
    </form>  
    <!--在form表单之外但是一样是属于id为typeForm的表单 + 但所属为多个form的时候各个id用空格分割开-->  
    <input type="text" name="nickname" form="typeForm">  
上一篇 下一篇

猜你喜欢

热点阅读