认识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. 01 学习数据分析的python库

    网页爬取 1.requests 2.BeautifulSoup 3.Scrapy 科学计算与数据分析 1.scipy 2.numpy 3.pandas 机器学习和深度学习 1.Scikit-learn ...

  2. 无聊系列 - C#中一些常用类型与java的类型对应关系

    昨天在那个.NET转java群里,看到一位朋友在问C#的int 对应java的哪个对象,就心血来潮,打算写一下C#中一些基础性的东西,在java中怎么找. 1. 基础值类型 如:int,long,do ...

  3. 大话设计模式Python实现-适配器模式

    适配器模式(Adapter Pattern):将一个类的接口转换成为客户希望的另外一个接口. 下面是一个适配器模式的demo: #!/usr/bin/env python # -*- coding:u ...

  4. LeetCode 430：扁平化多级双向链表 Flatten a Multilevel Doubly Linked List

    您将获得一个双向链表,除了下一个和前一个指针之外,它还有一个子指针,可能指向单独的双向链表.这些子列表可能有一个或多个自己的子项,依此类推,生成多级数据结构,如下面的示例所示. 扁平化列表,使所有结点 ...

  5. C# 刷遍 Leetcode 面试题系列连载（3）: No.728 - 自除数

    前文传送门: C#刷遍Leetcode面试题系列连载(1) - 入门与工具简介 C#刷遍Leetcode面试题系列连载(2): No.38 - 报数 系列教程索引 传送门:https://enjoy2 ...

  6. 基于kafka_2.11-2.1.0实现的生产者和消费者代码样例

    1.搭建部署好zookeeper集群和kafka集群,这里省略. 启动zk: bin/zkServer.sh start conf/zoo.cfg. 验证zk是否启动成功: bin/zkServer. ...

  7. 【java提高】---patchca生成验证码

    Java使用patchca生成验证码        Patchca是Piotr Piastucki写的一个java验证码开源库,打包成jar文件发布,patchca使用简单但功能强大. 本例实现了自定 ...

  8. jetty9部署

    https://blog.51cto.com/5404542/1751702     Jetty 9部署web应用 Jetty相关的文章比较少,不过官方文档挺齐全的.做下记录也是好事. jetty9跟 ...

  9. Asp.Net或WebAPI获取表单数据流(批量文件上传)

    //Web或WebAPI获取表单数据流(批量文件上传)        public JsonResult UploadFile()        {            //HttpPostedFi ...

  10. //某父元素（.class）底下相同class的第二的取值

    //某父元素(.class)底下相同class的第二的取值 var v = $('.cell-right').find(".startime").eq(1).val();