美文网首页
常见表单类型

常见表单类型

作者: 智多牛 | 来源:发表于2017-01-13 14:50 被阅读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">  

相关文章

  • 常见表单类型

  • Html5 + Css 3 新增属性

    这篇文章的主要知识点常见的语义标签常用的表单类型常用的表单属性H5的DOM扩展 常见的语义标签 起始语义化标签就是...

  • HTML表单介绍

    常见问题 form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于搜集不同类型的...

  • ionic2/3实战-复杂表单验证

    前言 之前在这里实现了常见表单字段类型风格的统一,其中表单验证使用了基于html5的表单验证 本节将介绍angul...

  • HTML表单中常见元素的使用

    HTML 表单用于搜集不同类型的用户输入。在HTML的表单中,常见的有以下控件: 文本框(text)、密码框(pa...

  • HTML表单: form

    1. form表单有什么作用? HTML表单用于搜集不同类型的用户输入。(主要负责采集浏览者的相关数据) 例如常见...

  • 进行网站设计时,怎么设计网站中的表单?

    表单是每个网站中最常见的设计,有的网站中甚至会有几种不同类型的表单。我们文汇建站之前也有写过表单相关的文章(一个可...

  • h5表单

    html5 表单 新增input类型 新增表单元素 html5表单验证 新增表单属性 新增的input类型 inp...

  • 这7个秘诀,能帮你做出体验极佳的网页表单

    表单是网页设计中最常见的元素,几乎每个网站都会包含一种甚至几种不同类型的表单。从简单的电子邮件搜集和订阅,到注册、...

  • HTML表单介绍

    HTML 表单用于搜集不同类型的用户输入, 元素定义 HTML 表单;HTML 表单包含不同类型的 input ...

网友评论

      本文标题:常见表单类型

      本文链接:https://www.haomeiwen.com/subject/ctdsbttx.html