认识input；

在网页中，我们经常都会遇到一些交互页面，比如登录、注册、评论等页面。你知道在html中用的是那些标签吗？今天我们要学习的就是其中最主要的一个标签，即<input>标签。

在html中，<input>标签是使用来定义一个输入字段，用来搜集用户信息；

<input>标签有一个重要的属性，type属性，该属性规定输入字段的方式，比如：文本域、单选框、复选框、按钮等等；

<input>标签通常用在form表单中（即<form>标签中），用来搜集需要提交或验证的信息；

<input>标签可以使用<label>标签来定义标注，点击<label>标签中的内容会自动将焦点转到和标签相联系的表单控件上；

input标签：

在html5中已经废弃了align属性，不建议使用，可以使用css来控制input元素的对齐方式。同时在html5版本中为<input>标签新增了很多属性，如下：

accept：通过文件上传来提交的文件的类型；alt：图像输入的替代文本；autocomplete（html5新增）：是否使用输入字段的自动完成功能，值：on、off；autofocus（html5新增）：输入字段在页面加载时获得焦点，值：autofocus（type="hidden"不适用）；checked：input元素首次加载时被选中，值：checked；disabled：input元素加载时禁用此元素，值：disabled；form（html5新增）：输入字段所属的一个或多个表单，值：表单的name；formaction（html5新增）：覆盖表单的action属性（type="submit" 和 type="image"时可用）；formenctype（html5新增）：覆盖表单的enctype属性（type="submit" 和 type="image"时可用）；formmethod（html5新增）：覆盖表单的method属性，值：get、post（type="submit" 和 type="image"时可用）；formnovalidate（html5新增）：覆盖表单的novalidate属性，如果使用该属性，则提交表单时不进行验证；formtarget（html5新增）：覆盖表单的target属性，值：_blank、_self、_parent、_top、framename（type="submit" 和 type="image"时可用）；height（html5新增）：input 字段的高度（type="image"时可用）；list（html5新增）：引用包含输入字段的预定义选项的datalist；max（html5新增）：输入字段的最大值，一般是和"min" 属性配合使用，来创建合法值的范围；maxlength：输入字段中的字符的最大长度；min（html5新增）：输入字段的最小值；一般是和"max" 属性配合使用，来创建合法值的范围；multiple（html5新增）：如果使用该属性，则允许一个以上的值，值：multiple；name（html5新增）：定义input元素的名称；pattern（html5新增）：输入字段的值的模式或格式（如：pattern="[0-9]"，表示输入值必须是0与9之间的数字）；placeholder（html5新增）：帮助用户填写输入字段的提示；readonly：输入字段为只读，值：readonly；required（html5新增）：输入字段的值是必需的，值：required；size：输入字段的宽度；src：以提交按钮形式显示的图像的 URL；step（html5新增）：输入字的的合法数字间隔；type：input 元素的类型，值：button、checkbox、file、hidden、image、password、radio、reset、submit、text；value：input元素的值。width（html5新增）：input字段的宽度（type="image"时可用）；

input实例；

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html中input标签的详细介绍</title></head><body bgcolor="bisque"><form action="">用户名：<input type="text" name="userName"><br>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pw"><br><input type="checkbox" name="RbPw" id="RbPw"><label for="RbPw">记住密码</label><br><input type="submit" value="登录"></form></body></html>

学习input的更多相关文章

  1. [Unity3D]做个小Demo学习Input.touches

    [Unity3D]做个小Demo学习Input.touches 学不如做,下面用一个简单的Demo展示的Input.touches各项字段,有图有真相. 本项目已发布到Github,地址在(https ...

  2. angular学习input输入框筛选

    学习angular,看到 angular-phonecat测试用例,照着教程运行了一遍,对于初学者有点不是很理解angular 帅选代码的意思,于是找教材,参考资料,明白了input筛选原来这么简单. ...

  3. ElasticSearch7.3学习(三十二)----logstash三大插件（input、filter、output）及其综合示例

    1. Logstash输入插件 1.1 input介绍 logstash支持很多数据源,比如说file,http,jdbc,s3等等 图片上面只是一少部分.详情见网址:https://www.elas ...

  4. 如何从零基础学习VR

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...

  5. JavaWeb学习之环境搭建

    1. HTML(Hyper Text Markup Language) , 超文本标记语言. HTML文件的后缀名一般是: .htm , .html 表单(form): 浏览器内核: WebKit , ...

  6. html学习第一讲（内容html常规控件的的使用）

    <html> <head> <title> 这是网页的标题</title> </head> <body> <h2>& ...

  7. 干货 | Python进阶系列之学习笔记（二）

    目录 对象 字符串 一.对象 (1)什么是对象 在python中一切都是对象,每个对象都有三个属性分别是,(id)身份,就是在内存中的地址,类型(type),是int.字符.字典(dic).列表(li ...

  8. 二、Python基础（input、变量名、条件语句、循环语句、注释）

    一.input用法 input在Python中的含义为永远等待,直到用户输入了值,从而将所输入的值赋值另外的一个东西. n=input('请输入......') 接下来用一个例子学习input的用法 ...

  9. Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

随机推荐

  1. sql server 按照字段分组 重新设置组序号

      SELECT cpr.Id, cpr.CreateTime, cpr.Number FROM CarParkingRegistration cpr SELECT CONCAT(FORMAT(cpr ...

  2. Ansible 如何只输出错误信息？

    有时主机较多时,我们只想关注有问题的主机. Ansible callback 插件中有一个 actionable,官方描述为: actionable - shows only items that n ...

  3. Django常用知识整理

    Django 的认识,面试题 1. 对Django的认识? #1.Django是走大而全的方向,它最出名的是其全自动化的管理后台:只需要使用起ORM,做简单的对象定义,它就能自动生成数据库结构.以及全 ...

  4. 【转】pywinauto教程

    一.环境安装 1.命令行安装方法 pip install pywinauto==0.6.7 2.手动安装方法 安装包下载链接:pyWin32: python调用windows api的库https:/ ...

  5. 自动化API之一 自动生成Mysql数据库的微服务API

        本文演示如何利用Uniconnector平台,自动生成Mysql数据库的API,节约开发人员编写后台API的时间.使用生成API的前提是开发者有 自己的数据库,有数据库的管理权限,并能通过外网 ...

  6. LeetCode 231.2的幂

    LeetCode 231.2的幂 题目: 给定一个整数,编写一个函数来判断它是否是 2 的幂次方. 算法: 若一个数是2的幂次的话定会有n & (n - 1) == 0这个关系成立 所以直接用 ...

  7. Kubernetes service 代理模式

    Kubernetes service 代理模式 底层流量转发与负载均衡实现:• Iptables(默认)• IPVS IPVS 了解代理模式之IPVS工作原理LVS 基于 IPVS内核调度模块实现的负 ...

  8. 机器学习（十）-------- 降维(Dimensionality Reduction)

    降维(Dimensionality Reduction) 降维的目的:1 数据压缩 这个是二维降一维 三维降二维就是落在一个平面上. 2 数据可视化 降维的算法只负责减少维数,新产生的特征的意义就必须 ...

  9. WPF通过不透明蒙板切割显示子控件

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/Backspace110/article/ ...

  10. img error 图片加载失败的最佳方案

    有时候, 当img的src加载失败, 会显示缺省碎片图片,  影响用户体验.  有一个js事件onerror就派上了用场. 它可以在加载失败时, 显示缺省的图片. 它有两种使用方式. 第一种: 使用纯 ...