`

HTML-input

 
阅读更多

input type属性
Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,

下面一一介绍。
1,type=text
输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等。当然

这也是Input的默认类型。
参数method:表示表单发送的方法,有两种: get_r(默认方法)和post。
参数action:表示表单要提交的地点。
参数name:同样是表示的该文本输入框名称。
参数size:输入框的长度大小。
参数maxlength:输入框中允许输入字符的最大数。
参数value:输入框中的默认值
特殊参数readonly:表示该框中只能显示,不能添加修改。

1,type=text
<form>
your name:
<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20"

action=login.jsp><br>
<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改">
</form>
2,type=password
不用我说,一看就明白的密码输入框,最大的区别就是当在此输入框输入信息时显示为保密字符。
参数和“type=text”相类似。
<form>
your password:
<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15
</form>
3,type=file
当你在BBS上传图片,在EMAIL中上传附件时一定少不了的东西:)
提供了一个文件目录输入的平台,参数有name,size。
<form>
your file:
<input type="file" name="yourfile" size="30">
</form>
4,type=hidden
非常值得注意的一个,通常称为隐藏域:如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候。
一句话,你在页面中是看不到hidden在哪里。最有用的是hidden的值。

<form name="form1">
your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com">
</form>
<script>
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
</script>


5,type=button
标准的一windows风格的按钮,当然要让按钮跳转到某个页面上还需要加入写JavaScript代码
<form name="form1">
your button:
<input type="button" name="yourhiddeninfo" value="Go,Go,Go!" onclick="window.open('http://www.cnbruce.com')">
</form>


6,type=checkbox
多选框,常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked(表示默认选择)
其实最重要的还是value值,提交到处理页的也就是value。(附:name值可以不一样,但不推荐。)

<form name="form1">
a:<input type="checkbox" name="checkit" value="a" checked><br>
b:<input type="checkbox" name="checkit" value="b"><br>
c:<input type="checkbox" name="checkit" value="c"><br>
</form>
name值可以不一样,但不推荐<br>
<form name="form1">
a:<input type="checkbox" name="checkit1" value="a" checked><br>
b:<input type="checkbox" name="checkit2" value="b"><br>
c:<input type="checkbox" name="checkit3" value="c"><br>
</form>


7,type=radio
即单选框,出现在多选一的页面设定中。参数同样有name,value及特别参数checked.
不同于checkbox的是,name值一定要相同,否则就不能多选一。当然提交到处理页的也还是value值。

<form name="form1">
a:<input type="radio" name="checkit" value="a" checked><br>
b:<input type="radio" name="checkit" value="b"><br>
c:<input type="radio" name="checkit" value="c"><br>
</form>
下面是name值不同的一个例子,就不能实现多选一的效果了<br>
<form name="form1">
a:<input type="radio" name="checkit1" value="a" checked><br>
b:<input type="radio" name="checkit2" value="b"><br>
c:<input type="radio" name="checkit3" value="c"><br>
</form>


8,type=image
比较另类的一个,自己看看效果吧,可以作为提交式图片

<form name="form1" action="xxx.asp">
your Imgsubmit:
<input type="image" src="../blog/images/face4.gif">
</form>


9,type=submit and type=reset
分别是“提交”和“重置”两按钮
submit主要功能是将Form中所有内容进行提交action页处理,reset则起个快速清空所有填写内容的功能。

<form name="form1" action="xxx.asp">
<input type="text" name="yourname">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

分享到:
评论

相关推荐

    input样式-input

    在HTML中,`&lt;input&gt;` 元素通过 `type` 属性来指定不同的输入类型,其中 `type="file"` 表示文件输入类型。基本用法如下: ```html &lt;input type="file" name="file"&gt; ``` 此例中的 `&lt;input type="file"&gt;` 创建了一...

    bootstrap-file-input

    Bootstrap-File-Input是一款流行的前端文件输入插件,它极大地改善了传统的HTML文件输入元素的用户体验。这款插件是基于Twitter的Bootstrap框架构建的,因此它具有Bootstrap的优雅设计和响应式布局,使得在各种设备...

    前端开源库-tag-input

    "tag-input-master"可能是指一个特定的开源实现,如Angular的ngTagsInput,React的react-tags,Vue的vue-tags-input等。每个库都有其特点和优势,开发者可以根据项目的技术栈和需求来选择合适的库。 总结,"tag-...

    前端项目-what-input.zip

    6. **可定制化**:"what-input" 允许开发者自定义样式,通过CSS类名(如 `.what-input-mouse`、`.what-input-keyboard`、`.what-input-touch`)来控制元素在不同输入模式下的视觉反馈。 7. **性能优化**:"what-...

    CSS3复选和单选样式工具Magic-Input.zip

    在线demo源码:https://github.com/dcsite/magic-input使用$ npm install magic-input你需要引入 dist/magic-input.css或者dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用Stylus 你就可以...

    uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un

    在本文中,我们将深入探讨如何在uni-app框架中实现车牌号输入功能,主要基于提供的标题“uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un”以及描述“uniapp中使用的车牌输入控件,弹...

    angular-tags-input:Angular指令,允许输入输入的小标签并将其值存储在ng-model中

    安装运行bower install angular-tags-input --save 或手动将其添加到bower.json依赖项中并运行bower-install 或从github下载ZIP并在不使用Bower的情况下提取文件在index.html文件中包括bower_components/angular-...

    html5-input样式

    HTML5的`input`元素是网页表单中最基础也最重要的组成部分,它允许用户在网页上输入数据。在HTML5中,`input`元素有了许多新的特性和改进,为开发者提供了更多的设计灵活性和用户体验优化的机会。本篇文章将深入探讨...

    watch-input.html

    模拟获取热搜词,防抖动的实现

    react-file-input:React的组件

    React文件输入设置本机HTML文件输入的样式可能会非常麻烦,更糟糕的是,浏览器的默认外观可能与您应用的设计不符。 这个问题是react-file-input旨在解决的问题。 集成后,React文件输入可以Swift消除与需要文件上传...

    tags-input-jquery

    "tags-input-jquery" 提供了一个基于jQuery的解决方案,用于创建可让用户轻松添加、编辑和删除小标签的输入框,这种功能在博客、社交媒体、产品分类等场景下尤为常见。本文将详细介绍如何利用jQuery-Tags-Input库来...

    vue + el-input 中 textarea 实现 placeholder 换行

    然后,在`style`标签中,我们使用`::v-deep`选择器(或`&gt;&gt;&gt;`)定位到`el-input__inner`内部的`textarea`,并通过`::-webkit-input-placeholder`伪元素来改变`placeholder`的样式。`white-space: pre-wrap`允许空白...

    javascript经典特效---INPUT框中的背景图片.rar

    首先,我们要了解HTML的`&lt;input&gt;`标签,它是用于创建表单中各种类型输入元素的标签。在默认情况下,输入框是无样式的,我们通常需要通过CSS来改变其外观,包括设置背景图片。 1. **CSS样式应用**:在HTML中,我们...

    custom-file-input:自定义 html 文件输入。 添加样式。 改变按钮位置

    script src =" dist/custom-html-file-input.min.js " &gt; &lt;/ script &gt; &lt; script &gt; jQuery ( function ( $ ) { $ . customHtmlFileInput ( ) ; // "awesome" } ) ; &lt;/ script &gt; 文档 (即将...

    vue组件系列之TagsInput详解

    TagsInput 是一种可编辑的输入框,通过回车或者分号来分割每个标签,用回退键删除上一个标签。用 vue 来实现还是比较简单的。 先看效果图,下面会一步一步实现他。 注:以下代码需要vue-cli环境才能执行 (一)伪造...

    修改输入框placeholder文字默认颜色-webkit-input-placeholder方法

    总结来说,修改HTML5输入框`placeholder`文本颜色主要通过CSS的特定选择器来实现,如`-moz-placeholder`、`-ms-input-placeholder`和`-webkit-input-placeholder`。通过正确使用这些选择器,可以确保在不同浏览器中...

    react-reactinputautosizeReact的自动调整大小输入框

    `react-input-autosize`就是这样一个库,它专为React设计,能够自动调整输入框的宽度以适应用户输入的内容。这个库使得创建动态输入框变得更加简单,无需手动处理输入框尺寸变化的复杂逻辑。 `react-input-autosize...

    解决layui的input独占一行的问题

    若想让多个input同行显示,则可以将这些input放置在同一个大的div中,然后给这个大的div设置layui-input-item类,并为每个input的div设置layui-inline类。 3. 在有些布局场景下,我们可能希望一组控件显示在同一...

    vue-tags-input组件使用指南(推荐)

    Vue Tags Input组件是一种用于在Vue.js应用程序中实现标签输入功能的第三方组件。它以其小巧的体积、易用性以及丰富的自定义选项而受到推崇。在本文中,我们将深入探讨如何使用这个组件,以便在你的项目中高效地实现...

    el-input 标签中密码的显示和隐藏功能的实例代码

    密码输入的类型在HTML标准中是password,当设置为password类型时,输入的内容会以点号等字符替换,以保护用户隐私。 在Vue.js框架下,我们可以使用组件的数据属性来动态控制el-input标签的类型,从而实现密码的隐藏...

Global site tag (gtag.js) - Google Analytics