HTML <input> 标签的 type 属性
HTML <input> 标签的 type 属性
实例
下面的表单拥有两个输入字段以及一个提交按钮:
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<inputtype="submit"
value="Submit" />
</form>
定义和用法
type 属性规定 input 元素的类型。
语法
<input type="value">
属性值
值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 |
Text
<input type="text" /> 定义用户可输入文本的单行输入字段。
Email: <input type="text" name="email" />
Pin: <input type="text" name="pin" />
Button
<input type="button" /> 定义可点击的按钮,但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
<input type="button" value="Click me" onclick="msg()" />
Checkbox
<input type="checkbox" /> 定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike
<input type="checkbox" name="vehicle" value="Car" /> I have a car
Hidden
<input type="hidden" /> 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,它们的值也可以由 JavaScript 进行修改。
<input type="hidden" name="country" value="Norway" />
Image
<input type="image" /> 定义图像形式的提交按钮。
必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。
<input type="image" src="submit.gif" alt="Submit" />
Password
<input type="password" /> 定义密码字段。密码字段中的字符会被掩码(显示为星号或原点)。
<input type="password" name="pwd" />
Radio
<input type="radio" /> 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
Submit
<input type="submit" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。
<form action="form_action.asp" method="get">
Email: <input type="text" name="email" />
<input type="submit" />
</form>
HTML <input> 标签的 type 属性的更多相关文章
- input标签的accept属性、JQuery绑定keyDown事件
一. input标签的accept属性 当我们上传文件或者注册上传头像时,我们可以一般都是使用: <input type="file" id="my_file&qu ...
- input标签的hidden属性,四大常用JSTL标签库
input标签的hidden属性的应用及作用 定义:传输关于客户端/服务器交互的状态信息. Transmits state information about client/server intera ...
- HTML input标签的checked属性与Razor解析
在HTML中,input标签可以通过type属性设置为checkbox.同时,也就包含了一个checked属性.对于这个checked属性,有一个特别的地方就是,它可以不需要属性值就可以表示是否选择了 ...
- 关于input标签不同type下的盒模型
刚才发现,在Chrome下input标签的不同type类型所取的盒模型是不一样的.浪费了我很多时间去调试,唉. type="text"时,给它设置宽度width:300px,此时的 ...
- 根据input 标签取value属性的值
jrhmpt01:/root/lwp/0526# cat a1.pl use LWP::UserAgent; use DBI; use POSIX; use Data::Dumper; use HTM ...
- jquery给input标签添加data-options属性
//原生JS实现document.getElementById('startPrice').setAttribute("data-options", "required: ...
- HTML label标签的for属性--input标签的accesskey属性
本次示例是在firefox演示(如果其他浏览器对accesskey操作不成功的,请参考文章最后各浏览器下的快捷键)label的for属性是和input的id绑定,当我们点击input前面的文本标识会自 ...
- HTML中input标签的alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- 【HTML】input标签中alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
随机推荐
- 通过在shell脚本中用scp或rsync实现远程同步文件
通过在shell脚本中用expect实现远程scp文件 shell expect的简单用法 http://myunix.blog.51cto.com/191254/1095074 http://ji ...
- JSON.parse: expected property name or '}'
早上被这问题坑了一个小时有了.后台返回的json如下,一切正常,但是手动把下面的json复制到js代码中,一直提示“ JSON.parse: expected property name or '}' ...
- python 面向对象高级编程
数据封装.继承和多态只是面向对象程序设计中最基础的3个概念.在Python中,面向对象还有很多高级特性,允许我们写出非常强大的功能. 我们会讨论多重继承.定制类.元类等概念.
- PT100运算放大器电路
运放输出电压<=运放电源电压,电源电压能决定它的最大输出能力即动态范围,若是电源为0-5v,则输出就只能在这之间. 其次要是放大电路,反馈必须接成负反馈 由于我这次使用的电源是5V,要是采用两 ...
- [Objective-c 基础 - 2.6] @property和@synthesize
Xcode编译器的特性,自动生成getter和setter A.@property 自动生成某个成员变量的getter和setter的声明 变量的命名要求:以下划线开头 Student.h @in ...
- Mac窗口管理管理软件SizeUp
一.SizeUp 是一款 Mac窗口管理管理软件.借助SizeUp,可以快速变化窗口大小(最大化.最小化),可以快速切换窗口的不同位置. 尤其在双显示器,更是扮演者方便.高效.好用的角色,提供了快速切 ...
- Android大图片裁剪终极解决方案 原理分析
约几个月前,我正为公司的APP在Android手机上实现拍照截图而烦恼不已. 上网搜索,确实有不少的例子,大多都是抄来抄去,而且水平多半处于demo的样子,可以用来讲解知识点,但是一碰到实际项目,就漏 ...
- plsql developer的一些使用
.PL/SQL Developer记住登陆密码 在使用PL/SQL Developer时,为了工作方便希望PL/SQL Developer记住登录Oracle的用户名和密码: 设置方法:PL -> ...
- Android Error
[2016-03-27 13:00:51 - XWeChat] Dx warning: Ignoring InnerClasses attribute for an anonymous inner c ...
- 【Android 应用开发】Activity 状态保存 OnSaveInstanceState參数解析
作者 : 韩曙亮 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/38297083 一. 相关方法简单介绍 1. 状态保存方法演示 ...