Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍。
1,type=text
输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等。当然这也是Input的默认类型。
参数name:同样是表示的该文本输入框名称。
参数size:输入框的长度大小。
参数maxlength:输入框中允许输入字符的最大数。
参数value:输入框中的默认值
特殊参数readonly:表示该框中只能显示,不能添加修改。
<form>
your name:
<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20"><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>
1,type=text
输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等。当然这也是Input的默认类型。
参数name:同样是表示的该文本输入框名称。
参数size:输入框的长度大小。
参数maxlength:输入框中允许输入字符的最大数。
参数value:输入框中的默认值
特殊参数readonly:表示该框中只能显示,不能添加修改。
<form>
your name:
<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20"><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>
发表评论
-
初学者学习linux
2012-12-19 17:53 657http://wuhaoshu.blog.51cto.com/ ... -
jquery选择器总结
2012-11-21 11:43 9461.<script type="text/ja ... -
外网的压力测试
2012-11-07 10:32 1136外网的压力测试,可以使用apache的ab或curl-load ... -
试着学学object-c
2012-11-05 15:50 7961.http://www.neatstudio.com/sho ... -
栈的基本原理,实现自己的堆栈
2012-10-23 10:16 1247栈是重要的数据结构,从数据结构角度看,栈也是线性表,其特殊性在 ... -
java双括弧初始化
2012-10-22 17:39 137501. Map map = new HashMap() {{ ... -
学习java单例模式
2012-10-22 16:16 697http://calmness.iteye.com/blog/ ... -
JsonUtil错误总结
2012-09-26 10:10 1055java.lang.Integer cannot be cas ... -
struts2总结错误
2012-09-25 10:40 7241.数据类型的不对应,一般是,后台要求int而前端的zoneI ... -
Jquery总结
2012-09-18 14:08 0$.toJSON(); $.parseJson(unescap ... -
mysql学习总结
2012-08-23 17:19 8381.<![CDATA[ select ifnull(su ... -
学习强者的成长之路
2012-08-09 10:25 836http://xwnet.blog.51cto.com/233 ... -
MD5正规的写法
2012-07-20 10:26 876public static String getMD5(byt ... -
引用:异常处理!
2012-07-20 09:37 705... -
关于网站的设计
2012-07-19 10:08 740网站的性能优化:http://www.cnblogs.com/ ... -
eval用法
2012-07-12 10:12 877在函数中改变全局变量 var X2={} X2.Eval= ... -
错误总结
2012-07-11 10:38 6361.missing ) in parenthetical错误可 ... -
登录验证struts2
2012-07-09 09:40 738类需要继承ActionSupport,重写execute方法, ... -
学习js的好地方
2012-06-28 13:16 792http://www.zhuoda.org/lunzi/dir ... -
登陆页面
2012-06-26 18:42 978http://themeforest.net/item/dre ...
相关推荐
体系文件(学习总结——各个层次及各单位的使用表单).pdf
表单设计器环境介绍是学习表单设计器的基础,包括表单设计器窗口、属性窗口、表单控件工具栏等。表单设计器窗口是创建和管理表单的主要工具,属性窗口是设置控件属性的主要工具,表单控件工具栏是设计交互式用户界面...
微信小程序学习demo:表单练习(源代码+截图)微信小程序学习demo:表单练习(源代码+截图)微信小程序学习demo:表单练习(源代码+截图)微信小程序学习demo:表单练习(源代码+截图)微信小程序学习demo:表单练习(源代码+...
本教程将聚焦于FreeCodeCamp提供的HTML注册表单的学习,旨在帮助初学者掌握创建交互式用户输入界面的核心技术。 首先,我们来看`index.html`文件。这个文件是网页的主要源代码,包含了所有HTML标记。一个基本的HTML...
WEB 表单设计学习总结 在 WEB 应用程序中,表单是必不可少的一部分,例如注册、登录、支付等,它们直接影响着用户体验和网站的整体性能。然而,填写表单通常是件麻烦的事情,人们总是希望快速完成表单,以便继续下...
接着,深入学习表单的组成,包括`<form>`标签的属性、表单域相关元素,如`<input>`的不同类型。HTML5引入了许多新的输入类型,例如`email`、`url`、`number`、`range`、`date`、`search`、`color`和`tel`,这些类型...
在这个项目中,我们跟随Brad Traversy的学习路径来探讨如何使用HTML、CSS和JavaScript构建一个自定义的表单验证器。 首先,HTML是构建表单的基础。我们需要创建一个包含各种输入元素(如文本输入、电子邮件输入、...
在IT行业中,动态表单是一种常见且实用的功能,它...开发者可以通过学习和掌握这些知识点,提升Web应用的用户体验和开发效率。在实际项目中,可以根据需求选择合适的技术栈和工具,打造满足业务需求的动态表单系统。
在“vfp简单表单应用”这个主题中,我们将深入探讨如何利用VFP来创建和操作表单,这对于初学者来说是学习数据库交互的基础。 1. **表单的概念**:在VFP中,表单(Form)是用来组织和展示数据的窗口,用户可以通过...
在IT行业中,表单计时器和自定义表单是构建高效、互动用户界面的关键元素。...以下是对这两个概念的详细解释...通过阅读`说明.htm`文件,用户可以学习如何利用这些功能来优化他们的表单设计流程,提高效率并提升用户体验。
通过这个项目,开发者可以学习如何结合Vue 3、低代码表单和Vite进行高效开发,同时也为自定义扩展和二次开发提供了基础。 总的来说,Vue 3低代码表单与工作流表单是前端开发领域的一项创新技术,它以可视化设计和...
在AngularJS的学习过程中,表单验证是一个至关重要的环节,它能确保用户输入的数据符合预期的格式和规则,从而提高应用程序的稳定性和用户体验。本学习笔记将深入探讨AngularJS中的表单验证机制,主要包括以下几个...
【PHP 万能表单】是一种灵活且功能强大的表单构建工具,专为开发者设计,以便于创建和管理各种类型的在线...通过深入学习,你可以掌握如何利用这样的工具高效地构建和管理各种复杂的在线表单,提升你的Web开发技能。
2. 掌握表单设计器的使用:学习如何创建、编辑和保存表单,以及如何设置组件属性和交互逻辑。 3. 熟悉拖动布局和父子布局:实践操作,掌握如何通过拖放实现元素的布局,以及如何创建和管理嵌套的布局结构。 4. ...
微信小程序源码 易打卡 表单设计(学习版)微信小程序源码 易打卡 表单设计(学习版)微信小程序源码 易打卡 表单设计(学习版)微信小程序源码 易打卡 表单设计(学习版)微信小程序源码 易打卡 表单设计(学习版)微信小程序...
Smart.FormDesigner可能包含了实现上述功能的源代码,开发者可以通过阅读和学习这些代码来加深对C# WinForm自定义表单设计器的理解,并将其应用到自己的项目中。 总结来说,C# WinForm自定义表单设计器是一个强大的...
在网页设计中,表单(Form)是收集用户信息的重要工具。为了提升用户体验,许多现代网页应用中都引入了表单元素的拖拽功能。本文将深入探讨"form表单拖拽功能"这一主题,结合提供的文件"FormbuildV1.0",详细解释其...
【Jsp链接Mysql+Jsp注册表单(学习笔记)】 在Web开发中,JavaServer Pages(JSP)和MySQL数据库的结合是常见的技术栈,用于构建动态、数据驱动的网站。本学习笔记将详细讲解如何使用JSP连接MySQL数据库,并创建一个...
通过深入学习和实践CSS表单技术,开发者不仅能够显著提升网站的功能性和交互性,还能够在视觉设计层面创造出更加吸引人的用户体验。合理运用CSS的各种特性,结合实际应用场景进行定制化设计,可以使表单元素既美观又...
设计师应不断学习和借鉴这些优秀实践,以提升自己在网页表单设计领域的专业水平。而"完美企业网站的101项指标"这个文档,可能是进一步了解网站整体优化的资源,包括表单设计在内的多个方面,都是打造优质网站不可或...