扩展阅读
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html定义及介绍
  • 基于HTML5的幻灯片 html5slides
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html.tag定义及介绍
  • 基于 KBEngine 的 HTML5 插件 kbengine_html5
  • java命名空间javax.swing.text.html类html.unknowntag的类成员方法: html.unknowntag定义及介绍
  • 让 IE 支持 HTML5 html5shim
  • java命名空间javax.swing.text.html类htmleditorkit.inserthtmltextaction的类成员方法: html定义及介绍
  • HTML文档格式化工具 HTML Tidy
  • java命名空间javax.swing.text.html类html的类成员方法: getallattributekeys定义及介绍
  • HTML5 在线工具 html5demos
  • java命名空间javax.swing.text.html.parser类dtd的类成员方法: html定义及介绍
  • 框架网页中如何使用sendredirect(a.html),使得a.html不显示在框架中,是整页显示!
  • java命名空间javax.swing.text.html类html.tag的类成员方法: comment定义及介绍
  • Sar数据转HTML Sar2html
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: color定义及介绍
  • 关于editplus的使用,编译完生成.class后,我又编写了html来执行applet,将其保存,如何经ie解释打开(直接在editplus上操作)不是显示html语言呀
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: vlink定义及介绍
  • python实现html转ubb代码(html2ubb)
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: rel定义及介绍
  • 在html运行的applet中需要访问oracle,在jb里可以连接,但直接点击html时就出现找不到类“sun.jdbc.odbd.JdbcOdbcDriver"?
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: src定义及介绍
  • 把 CDATA 中的内容(有可能是不规范的Html代码)以Html方式展现出来。
  •  
    当前位置:  Web服务器/前端>html/css

    html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

     
    分享到:
        发布时间:2015-1-15  


        本文导语: html <input>标签类型属性type(file、text、radio、hidden等)简介 html <input>标签搜集用户信息,是 html Form表单中的一种输入对象。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、...


        html <input>标签搜集用户信息,是 html Form表单中的一种输入对象。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

    html <input>标签类型属性type定义和用法

    type 属性规定要显示的 <input> 元素的类型。默认类型是:text该属性不是必需的,但是我们认为您应该始终使用它。

    html <input>标签类型属性type详解

    html input标签type属性值(包括html 5新增的type值)

    值         描述
    button     定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
    checkbox   定义复选框。
    color      定义拾色器。
    date      定义日期字段(带有 calendar 控件)
    datetime   定义日期字段(带有 calendar 和 time 控件)
    datetime-local  定义日期字段(带有 calendar 和 time 控件)
    month     定义日期字段的月(带有 calendar 控件)
    week        定义日期字段的周(带有 calendar 控件)
    time       定义日期字段的时、分、秒(带有 time 控件)
    email      定义用于 e-mail 地址的文本字段
    file       定义输入字段和 "浏览..." 按钮,供文件上传
    hidden    定义隐藏输入字段
    image   定义图像作为提交按钮
    number   定义带有 spinner 控件的数字字段
    password   定义密码字段。字段中的字符会被遮蔽。
    radio   定义单选按钮。
    range   定义带有 slider 控件的数字字段。
    reset   定义重置按钮。重置按钮会将所有表单字段重置为初始值。
    search  定义用于搜索的文本字段。
    submit  定义提交按钮。提交按钮向服务器发送数据。
    tel    定义用于电话号码的文本字段。
    text   默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。
    url    定义用于 URL 的文本字段。

    以下 input 类型是 HTML5 中的新类型:

    colordatedatetime、datetime-local、month、week、time、emailnumberrangesearchtelurl

    html<input>标签类型属性type(file、text、radio、hidden等)简介-html5新增属性

    html<input>标签类型属性type(file、text、radio、hidden等)简介-input type email

    html 常用input type值介绍 

    1,input标签属性type值为text举例说明

    输入类型是text,这是使用最多的input类型,比如登陆输入用户名注册输入电话号码,电子邮件,家庭住址等等。这也是Input的默认类型。 

    参数name:同样是表示的该文本输入框名称。 

    参数size:输入框的长度大小。 

    参数maxlength:输入框中允许输入字符的最大数。 

    参数value:输入框中的默认值 

    特殊参数readonly:表示该框中只能显示,不能添加修改。 

    html<input>标签类型属性type(file、text、radio、hidden等)简介-input type text

    input标签属性type值为text代码实例

    <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,input标签属性type值为password 举例说明

    不用我说,一看就明白的密码输入框,最大的区别就是当在此输入框输入信息时显示为保密字符。

    参数和“type=text”相类似。

    html<input>标签类型属性type(file、text、radio、hidden等)简介-input type password

    input标签属性type值为password代码举例

    <form> 
    your password: 
    <input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15 
    </form>

    3,input标签属性type值为file举例说明

    当你在论坛上传图片,在EMAIL中上传附件时就使用当前属性,input type为file时提供了一个文件上传的平台,参数有name,size。

     html<input>标签类型属性type(file、text、radio、hidden等)简介-input type file

    input标签属性type值为file的html代码如下:

    <form> 
    your file: 
    <input type="file" name="yourfile" size="30"> 
    </form>

    4,input标签属性type值为hidden详细介绍及举例

    input标签type值为hidden时,通常称为隐藏域,如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候,可以使用hidden。

    input标签属性type值为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,input标签属性type值为button详细介绍及举例

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

     input标签属性type值为button示例代码:

    <form name="form1"> 
    your button: 
    <input type="button" name="yourhiddeninfo" value="打开www.169it.com" onclick="window.open('http://www.169it.com')"> 
    </form>

    6,input标签属性type值为checkbox详细介绍及举例

    多选框,常见于注册时选择爱好性格、等信息。参数有name,value及特别参数checked(表示默认选择) 

    其实最重要的还是value值,提交到处理页的也就是value。(附:name值可以不一样,但不推荐。) 

    html<input>标签类型属性type(file、text、radio、hidden等)简介-input type checkbox

    input标签属性type值为checkbox示例代码:

    <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,input标签属性type值为radio详细介绍及举例

    即单选框,出现在多选一的页面设定中。参数同样有name,value及特别参数checked. 

    不同于checkbox的是,name值一定要相同,否则就不能多选一。当然提交到处理页的也还是value值。

     html<input>标签类型属性type(file、text、radio、hidden等)简介-input type radio

    input标签属性type值为radio示例代码:

    <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,input标签属性type值为image 详细介绍及举例

    比较另类的一个input type,可以作为提交式图片

    input标签属性type值为image示例代码: 

    <form name="form1" action="http://www.169it.com/test.php"> 
    your Imgsubmit: 
    <input type="image" src="../blog/images/face4.gif"> 
    </form>

    9,input标签属性type值为submitreset详细介绍及举例

    分别是“提交”和“重置”两按钮 

    submit主要功能是将Form中所有内容进行提交action页处理,reset则起个快速清空所有填写内容的功能。

    input标签属性type值为submit和reset代码举例:

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


    相关文章推荐:
  • Web前端设计:html上标<sup>标签与下标<sub>标签详解
  • 留言板问题,如何过滤掉html标签 防止别人引用html的标签呢??如<font color=red>测试</font>
  • html<pre>标签自动换行实现方法
  • C#实现过滤html标签并保留a标签的方法
  • HTML 5 <!DOCTYPE> HTML文档规范声明标签
  • jquery删除指定的html标签并保留标签内文本内容的方法
  • PHP去除html标签,php标记及css样式代码参考
  • 删除html标签得到纯文本可处理嵌套的标签
  • html中<radio>单选按钮控件标签用法解析及如何设置默认选中
  • php转换html标签小例子
  • Web前端设计:Html强制不换行<nobr>标签用法代码示例
  • 移除HTML标签的正则表达式
  • HTML5 <audio> 标签-在html中定义声音的标签
  • html小技巧之td,div标签里内容不换行
  • Html checkbox标签如何设置默认选中以及用js操作checkbox代码示例
  • PHP删除HTMl标签的代码
  • html form标签用法(js操作form)介绍及代码示例
  • PHP中HTML标签过滤技巧
  • HTML 5 <body> 标签-定义文档的主体
  • php 判断字符串是否包含html标签
  • HTML5 <bdo> 标签:覆盖默认的文本方向
  • 多媒体HTML标签生成类 AutoEmbed


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号