form表单中的input有哪些类型及其用途

Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框、密码输入框、单选/复选框、提交/重置按钮等等,下面一一介绍。

操作方法

  • 01

    type=text 输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,住址等等。当然这也是Input的默认类型。 参数name:同样是表示的该文本输入框名称。 参数size:输入框的长度大小。 参数maxlength:输入框中允许输入字符的最大数。 参数value:输入框中的默认值。 特殊参数readonly:表示该框中只能显示,不能添加修改。

  • 02

    type=password 输入类型是password,一看就明白的密码输入框,最大的区别就是当在此输入框输入信息时显示为保密字符。参数和“type=text”相类似。

  • 03

    type=file 当你在BBS上传图片,在Email中上传附件时一定少不了的东西,提供了一个文件目录输入的平台,选择上传文件,参数有name,size。

  • 04

    type=hidden 非常值得注意的一个,通常称为隐藏域。如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候。一句话,你在页面中是看不到hidden在哪里。最有用的是hidden的值。

  • 05

    type=button 标准的windows风格的按钮,当然要让按钮跳转到某个页面上还需要加入写JavaScript代码。

  • 06

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

  • 07

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

  • 08

    type=image 比较另类的一个,可以作为提交式图片按钮,通常采用这种按钮效果更美观。

  • 09

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

(0)

相关推荐

  • django 一个表单中多个按钮实现不同功能的方法

    django 一个表单中多个按钮实现不同功能的方法 操作方法 01 每个按钮提交实现不同的功能 在模块中有2个提交按钮,兄弟连如下: form action="" method=& ...

  • 不要在表单中迷失了方向

    表单是什么?是用户和app之间的对话.作为人机交互的一种重要入口,一个好的数据输入方式是很有必要去考虑的.但现实中,我们大多设计师和产品经理前期设计的时候就没有太多的考虑,到最后开发的时候就会发现问题 ...

  • 用JavaScript来获取用户在表单中输入的值

    JavaScript来获取用户在表单中输入的值,用document.getElementById,我们只要给html元素分配一个ID即可. 操作方法 01 新建一个html文档,书写两个input,代 ...

  • dreamweaver表单中插入表格的简单操作步骤

    一、在Dreamweaver在表单中插入表格 1. 点击鼠标,将光标定位在表单框线内部,然后插入表格,和在普通文档中的方法一样。如下图所示: 在“代码”视图中可以查看源代码: 2. 插入表格以后,在表 ...

  • word2007怎样向表单中添加说明性文本

    有时,通过添加说明来指示如何填写已添加到联机表单中的特定内容控件是非常有用的。当有人使用该表单时,这些说明将替换为实际内容。 1.在“开发工具”选项卡上的“控件”组中,单击“设计模式”。 图1 2.如 ...

  • word2007向表单中添加说明性文本

    有时,通过添加说明来指示如何填写已添加到联机表单中的特定内容控件是非常有用的。当有人使用该表单时,这些说明将替换为实际内容。 1.在“开发工具”选项卡上的“控件”组中,单击“设计模式”。 图1 2.如 ...

  • HTML button标签在form表单内,点击重新加载

    本篇主要是测试form内的button按钮问题 form内的button按钮点击后,网页重新加载了. 本人新手,用于学习记录,有错误请指出,只有这样才能共同进步,谢谢! 操作方法 01 form标签的 ...

  • 防止form表单重复提交(java后端解决重复提交问题)

    在javaweb方向做开发的小伙伴们,肯定都会遇到表单重复提交的问题.这种问题出现的原因或者说应用场景大致如下:网络延迟,服务器未能及时做出响应,导致用户不断重复点击提交按钮用户双击有意识的双击或者多 ...

  • Linux以form表单形式上传文件讲解

    先cd到要上传文件的目录下: root@iZ2zee1przeygbuu4rkwvxZ:/usr/local/test# ls 1.png DSC_0192.JPG test.apk 使用curl - ...