摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html

了解HTML表单之input元素的23种type类型

随着HTML5的出现,input元素新增了多种类型,用以接受各种类型的用户输入。
其中,button、checkbox、file、hidden、image、password、radio、reset、submit、text这10个是传统的输入控件,
新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13个 传统类型   text-------定义单行的输入字段,用户可在其中输入文本
  password---定义密码字段。该字段中的字符被掩码
  file----定义输入字段和 "浏览"按钮,供文件上传
  radio----定义单选按钮
  checkbox---定义复选框
  hidden---定义隐藏的输入字段
  button---定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)
  image---定义图像形式的提交按钮
  reset---定义重置按钮。重置按钮会清除表单中的所有数据
  submit---定义提交按钮。提交按钮会把表单数据发送到服务器 text
  type="text"表示一个文本输入框,它是默认的输入类型,是一个单行的控件,一般是一个带有内嵌框的矩形 password
  type="password"表示一个密码输入框,它与文本输入框几乎一模一样,功能上唯一的不同的字母输入后会被隐藏,一般是一连串的点****** file
  type="file"定义输入字段和"浏览"按钮,用于文件上传 radio
  type="radio"定义单选按钮,允许用户从给定数目的选择中选一个选项。同一组按钮,name值一定要一致 checkbox
  type="checkbox"定义多选按钮,允许用户在给定数目的选择中选择一个或多个选项。同一组的按钮,name取值一定要一致 hidden
  type="hidden"定义隐藏输入类型用于在表单中增加对用户不可见,但需要提交的额外数据   [注意]disabled属性无法与type="hidden"的input元素一起使用 说明:点击提交按钮后,隐藏域的内容'test=12#'会包含在URL中
<form name="form" action="#">
<input type="hidden" name="test" value="12">
<input type="submit">
</form> button
  type="button"的input输入类型定义可点击的按钮,但没有任何行为,常用于在用户点击时启动javascript程序 image
  type="image"的input输入类型定义图像形式的提交按钮,该类型可以设置width、height、src、alt这四个属性   用图片作为提交按钮会一起发送点击在图片上的x和y坐标,这样可以与服务器端图片地图结合使用,如果图片有name属性,也会随坐标发送 submit
  type="submit"的input输入类型用于创建提交表单的按钮 reset
  type="reset"的input输入类型用于创建重置表单的按钮 新增类型    color----定义调色板
   tel-----定义包含电话号码的输入域
   email---定义包含email地址的输入域
   url-----定义包含URL地址的输入域
   search--定义搜索域
   number--定义包含数值的输入域
   range---定义包含一定范围内数字值的输入域
   date----定义选取日、月、年的输入域
   month---定义选取月、年的输入域
   week----定义选取周、年的输入域
   time----定义选取月、年的输入域
   datetime----定义选取时间、日 月、年的输入域(UTC时间)
   datatime-local--定义选取时间、日 月、年的输入域(本地时间)

HTML表单之input元素的23种type类型的更多相关文章

  1. 了解HTML表单之input元素的23种type类型

    目录 传统类型 text password file radio checkbox hidden button image reset submit 新增类型 color tel email url ...

  2. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  3. html form表单追加input元素后在提交

    form.append(input); //input为对象 (设置name和val有效) $("#form1").submit();//提交事件

  4. html表单中的input元素的两种提交方式比较(get/post)

    Http存在两种最常用的提交方式:Get和Post(电话面试有问到两种提交方式的区别) 什么是HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客 ...

  5. 了解HTML表单之form元素

    前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...

  6. jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  7. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  8. html5-表单和input元素用法

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. JavaWeb后台从input表单获取文本值的两种方式

    JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...

随机推荐

  1. Mac下node.js安装与卸载

    安装: 访问 http://nodejs.org/ 进入官网,下载 Mac 版本的 node.js,双击打开安装即可. 通过终端输入命令 node -v 验证 node 是否安装正确:npm -v 验 ...

  2. JDBC 工具类模板c3p0

    JDBC 工具类模板 package com.itheima.sh.utils; import com.mchange.v2.c3p0.ComboPooledDataSource; import ja ...

  3. DMA是什么意思

    DMA是让硬盘不用通过CPU来控制读写 它的意思是直接存储器存取,是一种快速传送数据的机制,DMA技术的重要性在于,利用它进行数据存取时不需要CPU进行干预,可提高系统执行应用程序的效率.利用DMA传 ...

  4. ubuntu 14.04 lts LAMP配置

    一.目标 创建服务器环境,主要包括:Apache2.4.7 serverPHP 5.5.9Mysql 5.5.49扩展:MemcacheMcrypt 二.准备工作 1.服务器系统版本 Ubuntu s ...

  5. InnoDB锁冲突案例演示

      Preface       As we know,InnoDB is index organized table.InnoDB engine supports row-level lock bas ...

  6. Appium安装教程

    一.适用操作系统Win7 旗舰版Sp1 64位操作系统 或 32位操作系统二.所需软件jdk-7u45-windows-i586.exenode-v0.10.28-x86.msi (32位)下载地址: ...

  7. FU-A方式分包

    当 NALU 的长度超过 MTU 时, 就必须对 NALU 单元进行分片封包. 也称为 Fragmentation Units (FUs).  0 1  2 3 0 1 2 3 4 5 6 7 8 9 ...

  8. Unity编辑器 - 自动排版

    Unity编辑器 - 自动排版 使用花括号提高可读性 //一组横向排列的控件 GUILayout.BeginHorizontal(); { GUILayout.BeginVertical(); { / ...

  9. Java学习 · 初识 异常机制

    异常机制 1.   程序中的异常 a)     b)    面对异常如何解决 i.           由开发者通过if-else来解决 代码臃肿 程序员需要花费很大精力 ii.           ...

  10. ArrayList与LinkedList的普通for循环遍历

    对于大部分Java程序员朋友们来说,可能平时使用得最多的List就是ArrayList,对于ArrayList的遍历,一般用如下写法: public static void main(String[] ...