很多表单元素都是由一个个的 input 元素组成的。它是自闭合标签，根据其 type 属性值的不同分为很多种，例如单行文本框、密码框、单选按钮、复选框、隐藏域、文件上传域、普通按钮、提交按钮以及重置按钮等。

—— input标签的基本格式为：

<input type="表单类型" />
type 常用属性值
常用属性值 说明
text 表示单行文本框
password 表示密码框
hidden 表示隐藏域
radio 表示单选按钮
checkbox 表示复选框
file 表示文件上传域
button 表示普通按钮
submit 表示带提交功能的按钮
reset 表示带重置功能的按钮

—— input的具体用法：

<body>

    <form action="http://vip.biancheng.net/login.php" method="post" name="myForm">

        用户名:<input type="text" name="name"><br/>

        密码:<input type="password" name="password"><br/>

        性别:<input type="radio" name="sex" value="boy">男

        <input type="radio" name="sex" value="girl">女<br/>

        爱好:读书<input type="checkbox" name="read" value="read">

        跑步<input type="checkbox" name="run" value="run">

        逛街<input type="checkbox" name="shopping" value="shopping">

        看电影<input type="checkbox" name="movie" value="movie"><br/>

        隐藏域<input type="hidden"  name="hidden"><br/>

        文件上传域<input type="file" name="file" src="url"><br/>

        <input type="submit" value="提交">

        <input type="button" value="确定">

        <input type="reset" value="重置">

    </form>

</body>

效果：

—— type的属性值说明：

text 表示常规文本框，一般用来输入一些对用户可见的文字。

password 表示密码框，输入的内容对用户不可见。

radio 表示单选按钮。当 type 属性值为 radio 时，必须为其指定相同的 name 属性值，否则实现不了单选的效果。

checkbox 表示复选框，可以选择多条内容。

hidden 表示隐藏域，在页面中对于用户是不可见的。在表单中插入隐藏域可以方便收集或发送信息。当表单提交时，隐藏域的信息也被一起提交。

file 表示上传文件域，src 属性表示文件的路径。

submit 表示提交按钮，默认值为提交，也可以根据需求使用 value 属性进行设置。点击按钮后，表单中的值会提交到预先设定好的 url 中。

button 表示普通按钮，没有提交功能。默认没有 value 值，需要手动设置，如果需要提交，建议使用 submit 按钮。

reset 表示重置按钮，同 submit 一样也有默认 value 值，默认为重置。点击按钮后，表单中填写的所有数据将被清空。

　　

—— input标签的name属性：

当用户向表单输入信息时，服务器需要知道这个数据到底输入到了表单的哪个字段（控件）。例如登录页面，服务器需要知道哪条数据是作为用户名输入的，哪条数据是作为密码输入的。因此，HTML 规定如果表单要想正确地被提交给表单处理器，必须为每个字段都设置 name 属性。如果未设置，默认不提交其数据信息。

—— input标签的disabled属性：

如果为 <input> 标签的某个控件设置了disabled="disabled"，表示将禁用该控件，使其不能再获得焦点或被修改。被禁用后，它的值不会提交到后台。如果是按钮被禁用，它的点击效果就会失效。

例子：

<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">

      用户名:<input type="text" name="name" disabled="disabled" value="username"><br/>

      密码:<input type="password" name="password" disabled="disabled"><br/>

</form>

　　

—— input标签的readonly属性：

readonly 属性表示只读。它有以下特点：

  • 一般用在单行文本框和密码框中；
  • 控件的值可以显示，但不能修改；
  • 控件可以获取焦点；
  • 如果有预先设置好的值，会一起提交到服务器。

HTML——input标签的更多相关文章

  1. 关于input标签和placeholder在IE8，9下的兼容问题

    一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...

  2. angular input标签只能单向传递数据的问题

    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...

  3. 全面剖析 <input> 标签 ------ HTML\HTML5

    <input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...

  4. input标签file的value属性IE兼容性问题

    在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...

  5. 一个input标签搞定含内外描边及阴影的按钮～

    自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服-怎 ...

  6. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  7. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  8. input 标签实现带提示文字的输入框

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...

  9. 如何解决火狐FF里Input标签刷新页面后 仍然保存之前输入的内容的方法。

    直接在input 标签里 增加 autocomplete="off".火狐默认为 on.

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

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

随机推荐

  1. MySQL的下载、安装和配置

    ​ 一.MySQL的下载 下载地址:http://dev.mysql.com/downloads/mysql 进入下载页面,选择所需版本,这里示范MySQL8.0 图一 选择版本,下载MSI(软件安装 ...

  2. windows下配置mask2former(facebook版)

    1.安装Anaconda 2.安装PyCharm 3.创建python3.8环境(最高3.8因为有一个依赖包最高支持python3.8) 4.安装GCC 下载地址:https://sourceforg ...

  3. k8s 深入篇———— k8s 的本质[四]

    前言 简单整理一下k8s的本质. 正文 首先,Kubernetes 项目要解决的问题是什么? 编排?调度?容器云?还是集群管理? 实际上,这个问题到目前为止都没有固定的答案.因为在不同的发展阶段,Ku ...

  4. mysql 重新整理——存储引擎[三]

    前言 要知道存储引擎这个东西,不是存储的意思,而是io操作. MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛 ...

  5. SnakeYaml反序列化分析

    前言 SnakeYaml是Java中解析yaml的库,而yaml是一种人类可读的数据序列化语言,通常用于编写配置文件等.yaml真是到哪都有啊. 环境搭建 <dependency> < ...

  6. ORA-02303: cannot drop or replace a type with type or table dependents，即无法使用类型或表的相关性来删除或取代一个类型

    ORA-02303: cannot drop or replace a type with type or table dependents,即无法使用类型或表的相关性来删除或取代一个类型 在修改一个 ...

  7. 力扣455(java&python)-分发饼干（简单）

    题目: 假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干. 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸:并且每块饼干 j,都有 ...

  8. 力扣67(java)-二进制求和（简单）

    题目: 给你两个二进制字符串,返回它们的和(用二进制表示). 输入为 非空 字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1&quo ...

  9. DataWorks 如何撑起阿里99%的数据开发？

    阿里妹导读: DataWorks是阿里巴巴自主研发,支撑阿里巴巴经济体99%数据业务建设和治理,每天数万名数据开发和算法开发工程师在使用.从2010年起步到目前的版本,经历了多次技术变革和架构升级,也 ...

  10. 万物有灵，萌物Luka机器人如何让故事点缀童年

    ​简介:未来的十年将会是AI影响教育的十年.物灵科技正是基于在AI+教育未来趋势前瞻性的把握,不断将人格化属性和关系式交互体验赋予更多人工智能产品,启发儿童语言培养阶段的学习兴趣.依托阿里云技术,物灵 ...