`

HTML <input> 标签的 type 属性

阅读更多

http://www.w3school.com.cn/tags/att_input_type.asp

 

定义和用法

type 属性规定 input 元素的类型。

实例

下面的表单拥有两个输入字段以及一个提交按钮:

<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>
  <input type="submit"
 value="Submit" />
</form>

亲自试一试 (您在页面下面可以找到更多例子)

语法

<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" />

TIY

Button

<input type="button" /> 定义可点击的按钮,但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。

<input type="button" value="Click me" onclick="msg()" />

TIY

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

TIY

File

<input type="file" /> 用于文件上传。

<input type="file" />

TIY

Hidden

<input type="hidden" /> 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,它们的值也可以由 JavaScript 进行修改。

<input type="hidden" name="country" value="Norway" />

TIY

Image

<input type="image" /> 定义图像形式的提交按钮。

必须把 src 属性alt 属性 与 <input type="image"> 结合使用。

<input type="image" src="submit.gif" alt="Submit" />

TIY

Password

<input type="password" /> 定义密码字段。密码字段中的字符会被掩码(显示为星号或原点)。

<input type="password" name="pwd" />

TIY

Radio

<input type="radio" /> 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。

<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female

TIY

Reset Button

<input type="reset" /> 定义重置按钮。重置按钮会清除表单中的所有数据。

<input type="reset" />

TIY

Submit

<input type="submit" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

<form action="form_action.asp" method="get">
Email: <input type="text" name="email" />
<input type="submit" />
</form>
分享到:
评论

相关推荐

    HTML 语法大全!超级精炼<一点通>

    &lt;attribute&gt; 以对象的形式代表了 HTML 元素的标签属性或属性。 &lt;B&gt; 指定文本应以粗体渲染。 &lt;base&gt; 指定一个显示 URL 用于解析对于外部源的链接和引用,如图像和样式表。 &lt;baseFont&gt; 设置渲染文本时作为缺省字体的...

    Web前端高级作业一.txt

    &lt;select&gt;&lt;/select&gt;标签是选项标签,里面加入option可以作为选项 2.1.3框架&lt;frame&gt;和框架集&lt;frameset&gt;` 二.css 1.这个用来设置标签样式有好处 采用外部样式设置页面一来可以减少代码的瘫肿;二来可以时开发页面...

    html总结文档

    html常用标签总结,包含各种表单标签 1.表单:&lt;form&gt;&lt;/form&gt; 主要属性:id name action method ...单选框和复选框:&lt;input type="radio"/&gt; &lt;input type="checkbox"/&gt; checked属性值为 true 或 false

    HTML5基础知识-HTML5表单.pptx

    根据不同的 type 属性,输入字段有多种形态:文本框复选框密码框单选按钮按钮……1表单元素-文本框文本框:允许用户输入单行的文本,这个控件常用来输入姓名、地址和电子邮件等,一般语法如下:&lt;input type= "text" ...

    jQuery完全实例.rar

    创建一个 &lt;input&gt; 元素必须同时设定 type 属性。因为微软规定 &lt;input&gt; 元素的 type 只能写一次。 jQuery 代码: // 在 IE 中无效: $("&lt;input&gt;").attr("type", "checkbox"); // 在 IE 中有效: $("&lt;input type='...

    html登录注册页面,登录和注册页面的实现HTML,CSS,JS

    - 添加`&lt;button&gt;`或`&lt;input type="submit"&gt;`元素作为提交按钮。 - 根据需要添加其他元素,如标签、提示信息等。 2. CSS样式: - 使用CSS设置整体页面布局,包括标头、主体内容、页脚等。 - 设置表单样式,如字体、...

    jquery-1.1.3 效率提高800%

    &lt;br&gt;Safari 2 3575ms 475ms 753% &lt;br&gt;Opera 9.1 3196ms 326ms 980% &lt;br&gt;Average improvement: 867% &lt;br&gt;&lt;br&gt;下表为jQuery1.1.3与常用的一些JS库选择器的对比:&lt;br&gt;Browser Prototype jQuery Mootools Ext Dojo &lt;br&gt;...

    解读html5关于html5的应用与认识

    这些都是新增的标签:&lt;article&gt;、&lt;section&gt;、&lt;aside&gt;、&lt;hgroup&gt;、&lt;header&gt;,&lt;footer&gt;、&lt;nav&gt;、&lt;time&gt;、&lt;mark&gt;、&lt;figure&gt; 和 &lt;figcaption&gt;。 这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari 3.1+、...

    很全面的HTML小结文档

    标签之间没有body体时,可用&lt;名称 属性 /&gt;来结束 2、 标签作用: html 是根标签,所有的代码都在&lt;html&gt; &lt;/html&gt; 之间。 input 文本标签(用type来区分是文本框、密码框、还是按钮) br 换行(是一个单标签,可...

    Javashop开发规范V2.2

    &lt;type&gt;varchar&lt;/type&gt; &lt;size&gt;255&lt;/size&gt; &lt;option&gt;00&lt;/option&gt; &lt;/field&gt; &lt;/action&gt; 3.2.2 删除表 &lt;action&gt; &lt;command&gt;drop&lt;/command&gt; &lt;table&gt;tablename&lt;/table&gt; &lt;/action&gt; 3.2.3 添加、删除列 &lt;action&gt; ...

    jQuery详细教程

    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); &lt;/script&gt; &lt;/head&gt; ...

    Xpage学习笔记

    &lt;xp:inputText id="numSales"&gt;&lt;/xp:inputText&gt; &lt;xp:scriptBlock&gt; &lt;xp:this.value&gt;&lt;![CDATA[ dojo.addOnLoad(function(){ new dijit.form.NumberSpinner({ name:"#{id:numSales}", value:50, smallDelta:1, ...

    html入门到放弃笔记

    标记在使用时,用尖括号 "&lt;&gt;",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法:&lt;标记&gt;内容&lt;/标记&gt; Demo : 1、创建 p 标记 --&lt;p&gt;...&lt;/p&gt; 2、创建 div 标记 -- &lt;div&gt;&lt;/div&gt; 3、创建 ...

    JSP的系统性教材

    &lt;head&gt;……&lt;/head&gt;:HTML文件的头部标记,在其中可以放置页面的标题以及文件信息等内容,习惯将这两个标签之间的内容统称为HTML的头部。 &lt;body&gt;……&lt;/body&gt;:用来指明文档的主体区域,网页所要显示的内容都要放置...

    html&css;&JavaScript;基础笔记

    1. 表格——&lt;table&gt;&lt;tr&gt;&lt;th&gt;&lt;td&gt; 7 2. table的属性 7 3. 表格分列——水平分列和竖直分列 7 Body体里面的标签——表单 8 1. 表单标签——get、post 8 2.表单控件——&lt;input type=“text/password/checkbox/file.....

    vcg(验证码控件)

    &lt;br/&gt;a) 在Source模式下的Default.aspx文件中添加html控件Button,作为刷新促发:&lt;br/&gt;&lt;input type=”button” value=”ReFresh” onclick=”VcgReFresh();” style=”height: 24px;width:90px” /&gt;&lt;br/&gt;然后在Design...

    jQuety1.3中文说明

    创建一个 &lt;input&gt; 元素必须同时设定 type 属性。因为微软规定 &lt;input&gt; 元素的 type 只能写一次。 jQuery 代码: // 在 IE 中无效: $("&lt;input&gt;").attr("type", "checkbox"); // 在 IE 中有效: $("&lt;input type='...

    js使用小技巧

    &lt;input type=text onkeypress="return event.keyCode&gt;=48&&event.keyCode&lt;=57||(this.value.indexOf(".")&lt;0?event.keyCode==46:false)" onpaste="return !clipboardData.getData("text").match(/D/)" ondragenter=...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    看上面的"结构树",其中&lt;myfile&gt;是父元素,&lt;title&gt;,&lt;author&gt;是它的子元素,而&lt;myfile&gt;又是&lt;filelist&gt;的子元素。象&lt;title&gt;这样没有包含任何子元素的最后一级元素我们也称之为"页元素"。 4.Parser(解析软件) Parser...

    css笔记课程笔记2019,5,22

    input type="image" src=""/&gt; * 普通按钮 type="button" 6、div和span * div: 自动换行 * span:在一行显示 CSS 1、css的简介 * css: 层叠样式表 ** 层叠:一层一层的 ** 样式表: 很多的属性和...

Global site tag (gtag.js) - Google Analytics