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!" οnclick="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>

转载于:https://www.cnblogs.com/jokerjason/p/5724496.html

html基础之 input:type相关推荐

  1. salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

    在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的 ...

  2. input[type=file]属性

    title: input[type=file]属性 date: 2017年8月11日 21:04:48 tags: html categories: 教程 author: "JiaWei&q ...

  3. input type右对齐与只读的

    右对齐的 <input type="text" style="background:'#efefef'; text-align:right" readon ...

  4. 给input type=color设置默认值

    参考:https://stackoverflow.com/questions/14943074/html5-input-colors-default-color?utm_medium=organic& ...

  5. input type=hidden /在IE中占空间(转)

    input 的 type 设为 hidden 的话,就是隐藏域(废话).隐藏域在页面中不显示,但可以有值.既然是"隐藏"的,怎么还说会占空间呢.这是 IE 的 bug,不过这个 b ...

  6. jquery对所有input type=text的控件赋值

    function resetData() {       $("input[type=text]").each(       function() {      $(this).a ...

  7. 自定义input type=file 样式的方法

    为什么80%的码农都做不了架构师?>>>    为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了. 原始的file控件是这样的: &l ...

  8. html input type=quot;filequot;,科技常识:关于type=quot;filequot;的input框样式修改小结...

    今天小编跟大家讲解下有关关于type="file"的input框样式修改小结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于type="file" ...

  9. java注解接收上传文件,前台:Input type=file 后台获取文件内容用的是spring注解,当地环境上传图片是好的,发布到服务器上图片读取不到,求大神指点...

    当前位置:我的异常网» Java Web开发 » 前台:Input type="file" 后台获取文件内 前台:Input type="file" 后台获取文 ...

  10. 利用css对input[type=file] 样式进行美化,input上传按钮美化

    2019独角兽企业重金招聘Python工程师标准>>> <input type="file" name="fileUpload"/> ...

最新文章

  1. 机器学习常用激活函数
  2. 认识登录控件(Login、CreateUserWizard、LoginStatus和LoginName)
  3. 强势的老板--项目管理
  4. 关闭Android/iPhone浏览器自动识别数字为电话号码
  5. 基础知识:元组、字典、集合
  6. 【Linux系统编程】进程间通信概述
  7. 记录一下所了解的一些第三开源框架
  8. 一名南京985AI硕士,CSDN博客专家
  9. dfs序七个经典问题[转]
  10. C#基础温习(10):C#实现托盘功能
  11. 如何在短时间内快速提升网站响应速度
  12. 20个必不可少的Python第三方库(存干货分享)!
  13. js 获取ip和浏览器信息
  14. poj2096(概率dp)
  15. Android WebView加载网页进度监听
  16. 计算机视觉城市排名,计算机视觉技术量化城市变迁
  17. PS马卡龙渐变海报制作教程
  18. 智能创新引导工具软件——项目总结报告
  19. 26、BDS B1I电文处理实现
  20. 连就连,你我相约定百年。谁若97岁死,奈何桥上等三年!

热门文章

  1. PHP获取照片exif信息
  2. 客户关系管理式的电子商务
  3. Python把多行文本合并
  4. python学习-(__new__方法和单例模式)
  5. UPX3.03+UpolyX.5 Shell v1.0 汉化绿色版
  6. MFC 简单输出EXCEL - (OLE)
  7. 【编程题目】寻找丑数
  8. SpyEye on Android
  9. Microsoft Sharepoint server 2.0 (wss) 服务器升级为额外的主域控制器
  10. R语言自然语言处理:关键词提取(TF-IDF)