在表单中最为核心的就是<input>标签，使用<input>标签可以在表单中定义文本输入框、单选按钮、复选框、重置按钮等，其基本语法格式如下：

<input type="控件类型"/>

在该语法中，type属性为其最基本的属性，取值有很多种，用来指定不同的控件类型，除type属性外，还可以定义其它的属性，常用的属性如name，value，size等。

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>常用表单控件</title>

 </head>

 <body>

     <form action="#" method="post" >

         用户名：<input type="text" value="张三" maxlength="6"><br/><br/>

         密码：<input type="password" size="40"><br/><br/>

         性别：<input type="radio" name="sex" checked="checked">男

         <input type="radio" name="sex" >女<br/><br/>

         年龄：<input type="number" name="age" min="18" max="100"><br/><br/>

         兴趣：<input type="checkbox" />唱歌

                 <input type="checkbox" />跳舞

                 <input type="checkbox" />游泳<br/><br/>

             喜欢的颜色:<input type="color" name="color" value="#ff0000"><br/><br/>

             关键词：<input type="search" ><br/><br/>

             难易程度：<input type="range" min="1" max="120"><br/><br/>

              <div><input type="button" name="button" value="普通按钮">

             <input type="submit" name="submit" value="提交">

             <input type="reset" value="重置">

         </div>

     </form>

 </body>

 </html>

在上面的示例中，number、color、search和range为HTML新增的type类型。在下面我会分别介绍一下它们的效果，具体如下：

（1）单击“年龄”输入框测试number类型的效果，如下图所示，在这里我们设置的年龄范围是18~100岁。

（2）单击color框时，会弹出颜色选取器，如下图所示：

（3） 输入关键词“搜索关键词”，搜索框右侧会出现一个“×”按钮，页面效果如下图所示。单击该按钮，可以清除已经输入的内容。

（4） 拖动range控件这个数值的大小，这里的数值范围设置为1-120.

HTML5<input>标签的更多相关文章

  1. html5 input 标签

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content ...

  2. [HTML5] input标签 disable属性

    <span>服务器名称:<input type="text" name="server_name" placeholder="服务器 ...

  3. 全面剖析 <input> 标签 ------ HTML\HTML5

    <input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...

  4. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  5. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  6. JavaScript----Js操控-HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  7. [HTML5]label标签使用以及建议

    for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label&g ...

  8. input 标签实现带提示文字的输入框

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...

  9. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

随机推荐

  1. Elasticsearch 节点角色说明

    节点类型 解释 作用 默认配置 专用节点 注意事项 Master-eligible node 主节点 负责轻量级群集范围的操作例如: 创建或删除索引 跟踪集群节点 分片分配 node.master: ...

  2. apache mod_python 安装

    环境:Linux 2.6.32-431.23.3.el6.i686 1.安装python .tgz  ./configure --prefix=/usr/local/services/Python- ...

  3. MyBatis基础入门《三》Select查询集合

    MyBatis基础入门<三>Select查询集合 描述: 代码新增了一个MybatisUtil工具类,查询数据库返回集合的时候,接收数据的三种方式.由于代码会渐渐增多,未涉及改动过的文件不 ...

  4. JS实例5

    做这么一个效果  鼠标单击某个名字后变色,没选中的鼠标移动上去变色 首先布局这个效果,然后给每个表格添加单击事件onclick.鼠标放上事件onmousemove.鼠标移出事件onmouseout 容 ...

  5. （转）Properties Editor为你解除通过native2ascii进行Unicode转码的烦恼

    在Java或J2EE应用程序的设置文件或国际化对应的桌面应用程序的开发中,广泛使用着属性文件.然而,你必须通过J2SDK中的native2ascii工具来将文件中的多字节字符转换成Unicode的字符 ...

  6. ReentrantLock源码（二）

    一.ReentrantLock类中的方法解读. 1.lock方法.实现了接口Lock中的lock方法.这里实际上是调用了sync成员变量的lock方法来实现.所以取决于sync的实现. 2.unloc ...

  7. python pandas模块,nba数据处理（1）

    pandas提供了使我们能够快速便捷地处理结构化数据的大量数据结构和函数.pandas兼具Numpy高性能的数组计算功能以及电子表格和关系型数据(如SQL)灵活的数据处理能力.它提供了复杂精细的索引功 ...

  8. BR(BoomerangRobot)机器人项目

    项目宗旨:推动机器人技术及相关知识的普及,增进广大机器人DIYer们的交流,提高爱好者们自身的专业水平,项目提供以机器人BR(boomerangrobot)为硬件平台,ROS(robot operat ...

  9. Keras 资料

    http://www.360doc.com/content/17/0415/12/1489589_645772879.shtml http://adventuresinmachinelearning. ...

  10. UIView的背景颜色

    一个UIColor代表一种颜色,通过UIColor的类方法,可以获得很多常用的颜色 + (UIColor *)blackColor;      // 0.0 white 黑色 + (UIColor * ...