`

表单中input的type属性介绍

 
阅读更多
表单中input的type属性介绍
2013-03-15

form 表单中 input 的类型有以下几种

<input type="text" />是标准的文本框。它可以有一个值属性value,用来设置文本框里的默认文本。
<input type="password" /> 像文本框一样,但是会以星号代替用户所输入的实际字符。
<input type="checkbox" />是复选框,用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked,像这样的格式: <input type="checkbox" checked="checked" />.
<input type="radio" /> 与复选框相似,但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked,使用方法跟复选框一样。
<input type="file" /> 是展示你电脑上的文件的一个区域,就像你在一个软件中打开或者保存一个文档一样。
<input type="submit" /> 是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本(下面的button和reset类型也可以这样,稍后介绍)。
<input type="image" />以图像代替按钮文本,src属性是必须的,像img标签一样。
<input type="button" />是一个如果没有其他代码的话什么都不做的按钮。
<input type="reset" /> 是一个点击后会重置表单内容的按钮。
<input type="hidden" /> 不会显示任何东西,它用来传输诸如用户正在用的页面的名字或者Email地址等表单必须传输的东西。 注意输入标签input也是用“/>”自关闭的。


分享到:
评论

相关推荐

    HTML input type=file文件选择表单元素.docx

    在使用 input type=file 文件选择表单元素时,需要注意 enctype 属性的作用。enctype 属性规定了在发送到服务器之前应当如何对表单数据进行编码,默认的编码是 application/x-www-form-urlencoded。但是,对于文件...

    HTML5&CSS3网页制作:Input元素的type属性.pptx

    在HTML5中,`&lt;input&gt;`元素的`type`属性是一个非常重要的特性,它决定了输入框的功能和样式。通过设置不同的`type`属性值,我们可以创建各种类型的输入控件,以满足网页表单设计的需求。 1. **普通文本框(text)** ...

    jquery获取form表单input元素值的简单实例

    总的来说,通过本篇内容的介绍,我们可以了解到jQuery的val()方法和attr()方法在获取和设置表单input元素值时的使用方法和不同场景下的适用性。此外,还了解到了原生JavaScript在操作表单元素值时的方法。这些知识在...

    input type=file 显示的浏览 改成英文

    首先,我们需要理解`&lt;input type="file"&gt;`的基本结构和属性。这个标签创建了一个可以点击的区域,用户可以通过点击打开本地文件选择对话框。默认情况下,这个标签的外观和行为由浏览器控制,但我们可以使用CSS和...

    HTML5&CSS3网页制作:Input元素的其他属性.pptx

    multiple属性适用于type="email"和type="file"的Input元素,使得用户可以在同一输入框中选择多个电子邮件地址或文件。例如,`&lt;input type="file" name="img" multiple&gt;`允许用户一次选择多张图片进行上传。 5. min...

    js动态修改input输入框的type属性及验证Email

    本文将深入探讨如何使用JavaScript动态修改`input`输入框的`type`属性,并介绍如何进行Email验证。 `type`属性是`input`标签的一个关键属性,它决定了输入框的行为和外观。默认情况下,`input`元素的`type`可能是`...

    HTML5表单中新增的input属性1.pdf

    form属性是HTML5中一个重要的新特性,它允许input元素关联到一个或多个表单,即使input元素不在form标签内部。通过指定form属性的值为相关表单的id,可以实现跨元素的关联。这增强了表单结构的灵活性。例如: ```...

    HTML5表单中新增的input属性2.pdf

    - `formaction`: 此属性允许为`&lt;input type="submit"&gt;`或`&lt;input type="image"&gt;`元素指定一个不同的处理表单动作的URL,覆盖了`&lt;form&gt;`标签的`action`属性,这意味着同一个表单的不同提交按钮可以有不同的目标地址...

    HTML5表单中新增的input属性3.pdf

    `pattern`属性允许开发者定义一个正则表达式,以验证用户在`input`元素中输入的数据是否符合特定格式。这提高了数据验证的灵活性,确保用户输入的数据符合预期。例如,如果需要用户输入有效的电子邮件地址,可以...

    input type=file 调取手机照相机和选择照片上传

    首先,`&lt;input type="file"&gt;` 是HTML中的一个表单元素,它的主要作用是让用户选择本地文件。在默认情况下,点击这个元素会打开一个文件浏览器对话框,让用户从他们的计算机中选取文件。但在移动设备上,特别是安装了...

    HTML5表单中新增的input属性1案例.pdf

    在案例3中,`&lt;input type="text" name="address1" form="form1"&gt;`,虽然这个输入框位于`&lt;form&gt;`标签外部,但由于指定了`form`属性,其值与`&lt;form id="form1"&gt;`相匹配,因此这个输入框依然属于该表单,并且可以随表单...

    HTML5表单中input元素及属性.pdf

    1. **输入类型(type属性)**: - `text`: 创建单行文本输入框,适用于用户名、账号等简短信息输入。 - `password`: 创建密码输入框,内容以星号或圆点隐藏,保护用户隐私。 - `radio`: 定义单选按钮,用于单一...

    HTML5表单中新增的input属性2案例.pdf

    HTML5在表单元素中引入了多个新的input属性,这些属性极大地增强了表单的功能和用户体验。以下是基于案例的三个关键属性的详细说明: 1. **image类型input的height和width属性** 在HTML5中,`&lt;input type="image"&gt;...

    Android编程开发之EditText中inputType属性小结

    20. `android:inputType="textWebEditText"`:用于网页表单的文本输入。 21. `android:inputType="textFilter"`:文本筛选过滤,常用于搜索框。 22. `android:inputType="textPhonetic"`:拼音输入,适用于中文输入...

    JavaScript获取网页表单action属性的方法

    本文将详细介绍JavaScript是如何操作表单的action属性的。 首先,我们需要了解HTML中的表单元素是如何定义的。在HTML代码中,表单是一个包含多个输入字段的容器,如下所示: ```html Firstname:&lt;input type=...

    HTMLFORM表单,input标签的说明.pdf

    在表单中,`&lt;input&gt;` 标签是最常用的控件之一,它可以以多种类型 (`type`) 出现,以满足不同需求。以下是一些常见的 `input` 类型: 1. **单行文本输入框 (input type="text")**:允许用户输入一行文本。例如: ``...

    一个增加表单input的例子/表单框按需求点击增加

    这里的`id`属性用于JavaScript中选中特定的元素,`name`属性以数组形式(`names[]`)设置,方便在后端处理多个姓名数据。 接下来,我们需要用JavaScript来实现动态添加功能。这里可以使用事件监听器来响应用户点击...

    H5 label 绑定表单元素增强 input 的响应区

    综上所述,`H5 label 绑定表单元素增强 input 的响应区`这一主题旨在强调`label`元素在构建高效、易用的HTML5表单中的关键作用。通过合理使用`label`,我们可以提高表单的可点击性,优化用户体验,尤其是对移动设备...

    INPUT的TYPE用法

    在探讨HTML中`&lt;input&gt;`元素的`type`属性用法时,我们深入解析了不同类型的输入字段如何在网页表单设计中发挥关键作用。HTML(超文本标记语言)是构成网页的基础,而`&lt;input&gt;`元素是创建交互式表单的关键组件之一,...

    使用HTML开发商业网站-表单控件-input课件.pptx

    3. **单选按钮 (radio)**: `&lt;input type="radio"&gt;` 允许用户在一组选项中选择一个。它们通常使用相同的 `name` 属性来分组,以便一次只能选中一个。`checked` 属性用于设置默认选中的选项。 示例: ```html ...

Global site tag (gtag.js) - Google Analytics