认识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. MySQL实战45讲学习笔记：第三十七讲

    一.本节概况 今天是大年初二,在开始我们今天的学习之前,我要先和你道一声春节快乐! 在第 16和第 34篇文章中,我分别和你介绍了 sort buffer.内存临时表和 join buffer.这三个 ...

  2. 快速了解Electron：新一代基于Web的跨平台桌面技术

    本文引用了作者“ ConardLi”的<用JS开发跨平台桌面应用,从原理到实践>一文部分内容,原文链接:segmentfault.com/a/1190000019426512,感谢原作者的 ...

  3. jpa复杂查询groupby失败的原因以及替代方法-20190824

    问题 1  jpa specification 复杂查询,拼接group by 时,分页会触发select  count (*),导致指定select * from table group by 字段 ...

  4. TestNg之XMl形式实现多线程测试

    为什么要使用多线程测试? 在实际测试中,为了节省测试时间,提高测试效率,在实际测试场景中经常会采用多线程的方式去执行,比如爬虫爬数据,多浏览器并行测试. 关于多线程并行测试 TestNG中实现多线程并 ...

  5. 十二、深入理解Java内存模型

    深入理解Java内存模型 [1]CPU和缓存的一致性 ​ 我们应该都知道,计算机在执行程序的时候,每条指令都是在CPU中执行的,而执行的时候,又免不了要和数据打交道.而计算机上面的数据,是存放在主存当 ...

  6. StringBuilder.sb.AppendLine();

    StringBuilder sb=new StringBuilder(); sb.AppendLine("The world is fair and wonderful.Everything ...

  7. c# "As" 与 "Is"效率 （原发布csdn 2017-10-07 11:49:18）

    十一长假就要过去了,今年假期没有回家,一个人闲着无聊就在看C#语言规范5.0中文版.昨天看了 is运算符和 as运算符,平时项目中也有用到这两种符号,对于其效率也没有进行比较过,趁着假期有空,先看下效 ...

  8. 使用 vue-cli(脚手架)搭建项目

    一.使用 vue-cli(脚手架)搭建项目 1) Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具 2) 在线文档:https://github.c ...

  9. 前端开发JS——引用类型

    10.流程控制语句      注:var obj = {}:这里的obj转换boolean语句为true   if语句和java是一样的,判断条件也是根据上篇博客提到的假性值 // 弹出一个带输入框的 ...

  10. Seata为什么效率高

    1. Seata为什么效率高 1.1. 应对面试官的解释 Seata的解决方案是两阶段提交的升级版,传统两阶段提交资源管理器(RM)放在数据库端,由数据库管理,需要数据库支持XA协议. 而Seata把 ...