html input元素的所有type属性

 1 <input />
 2 属性
 3 type="text"      输入框的类型为文本
 4 type="password"  输入框的类型为密码
 5 type="radio"     输入框的类型为单选
 6 type="checkbox"  输入框的类型为多选
 7 type="file"      输入框的类型为上传文件
 8 type="submit"    输入框的类型为提交页面
 9 type="button"    输入框的类型为普通按钮
10 type="reset"     输入框的类型为重置
11
12
13 type="color"    颜色选择器
14 type="number"：数字字段
15 type="email"：该控件用来输入"email"地址  若非email格式提交该表单时会提示为不合法
16 type="url"：输入URL字段
17 type="image" src="" 图像按钮
18
19 type="hidden"：隐藏域
20 隐藏域在页面上不显示，用来存储与传递表单的值，当用户提交表单时，隐藏域的内容会一起提交给处理程序；语法为：input type="hidden" name="hidden" value="提交的值"/
21
22 <input type="text" maxlength="10" />最多输入10个字符

原文地址：https://www.cnblogs.com/weihexinCode/p/12318242.html

时间： 2024-10-10 00:30:02

html input元素的所有type属性的相关文章

为什么 input 元素能用 width 属性

前几天在是写网页的时候发现input可以设置宽高,很疑惑,上网查了之后发现: 简单的认为 input 就是 inline 元素是片面的.元素默认以何种 display 属性值显示出来,这个其实更多的时候是由浏览器决定的(不同浏览器的差异性,导致我们需要 reset CSS),下面是部分浏览器 input 元素默认 CSS: IE6.IE7.IE8.IE9(部分) background-color: #FFF; border-width: 2px; font-family: sans-serif;

为什么要在<button>元素中添加type属性

在HTML中<button> 标签定义一个按钮. <button type="button">Click Me!</button> 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮之间的不同之处. <input type="button" value="Click Me!"> button既然定义了一个按钮,那么为什么还要为其添加type属性呢

HTML5-定制input元素

下述内容主要讲述了<HTML5权威指南>第13章关于"定制input元素". input元素可以生成一个供用户输入数据的简单文本框.其缺点在于用户在其中输入什么值都可以,可以配置type类型来获取额外的属性.其中type属性有23个不同的值,而input元素共有30个属性,其中许多属性只能与特定的type属性值搭配使用. 一.用input元素输入文字 type属性设置为text的input元素在浏览器中显示为一个单行文本框. 1. 设定元素大小 maxlength属性设定用

HTML5 改良的 input 元素的种类

在HTML5中,增加与改良的input元素中的type属性,包括url.email.date.time.datetime.datetime-local.month.week.number.range.search.tel.color类型. <!DOCTYPE html> <html> <head lang="en"> <title>增加与改良的input元素中的type属性</title> <meta charset=&

css如何实现只设置type为text的input元素的样式

css如何实现只设置type为text的input元素的样式:在实际应用中,可能会遇到这样的情况,那就是有很多input元素,但是type类型各不相同.可能只需要为某种type类型指定相关的样式.当然实现此效果的方式很多,比如单独为指定类型的input设置class.下面介绍一下如何利用属性选择器实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <me

Jquery 实现input回车时跳转到下一个input元素

/** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INPUT 元素列表] * @return {[type]} [description] */ function keydown_to_tab($input){ if(!$input) $input = $('input:text:not(:disabled)'); $input.bind("keydown&

jQuery如何获取指定type属性值的input元素

jQuery遍历input文本框并获取input的name属性值:因为input标签的type属性是多种多样的,例如text.radio.checkbox等,但是实际应用中往往需要获取某一类属性值的input元素,下面就通过实例简单介绍一下.代码实例如下: $("input:text", document.forms[0]).each(function(){alert(this.name)}); 以上代码可以获取type属性值为text的input元素,并且遍历弹出它们的name属性值

HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能够自动到达. 例子:Facebook/Twitter 更新.估价更新.新的博文.赛事结果等. 浏览器支持所有主流浏览器均支持服务器发送事件,除了 Internet Explorer. 接收 Server

选中多文件同时上传(利用input元素的multiple属性)

网页: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form action="upload.do" method="post" enctype="multipart/form-d