认识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. Linux下启动SpringBoot打包的jar

    前言 这两天把视力档案后台部署的方式改了一下,由原来打包成war包,部署到一个tomcat里面,转变成直接打包成jar包,然后使用 java -jar命令进行启动 下面讲讲遇到的问题 1)java - ...

  2. ubuntu python 版本管理

    ubuntu 命令行查看 python 目录 $ whereis python # 显示所有得到 python 目录 $ which python  # 显示默认的 python 解释器目录 $ wh ...

  3. http状态码大全（404、505、502，500）

    HTTP 400 – 请求无效HTTP 401.1 – 未授权:登录失败HTTP 401.2 – 未授权:服务器配置问题导致登录失败HTTP 401.3 – ACL 禁止访问资源HTTP 401.4 ...

  4. Elasticsearch搜索调优权威指南 （1/3）

    本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/qwkZKLb_ghmlwrqMkqlb7Q英文原文:https://qbox.io/blog/ela ...

  5. asp.net core系列 63 领域模型架构 eShopOnWeb项目分析 上

    一.概述 本篇继续探讨web应用架构,讲基于DDD风格下最初的领域模型架构,不同于DDD风格下CQRS架构,二者架构主要区别是领域层的变化. 架构的演变是从领域模型到CQRS,  一开始DDD是用领域 ...

  6. K8S集群集成harbor(1.9.3)服务并配置HTTPS

    一.简介 简介请参考:https://www.cnblogs.com/panwenbin-logs/p/10218099.html 二.安装Harbor主机环境及安装要求 主机环境: OS: Cent ...

  7. JSTL+EL表达式+JSP自定义框架案例

    不会框架不要紧,我带你自定义框架 前言:这标题说的有点大了,当一回标题党,之前在学JSP的时候提到了JSTL和EL表达式,由于一直钟情于Servlet,迟迟没有更新别的,这回算是跳出来了.这回放个大招 ...

  8. go 1.11 模块和版本管理

    自2007年“三巨头(Robert Griesemer, Rob Pike, Ken Thompson)”提出设计和实现Go语言以来,Go语言已经发展和演化了十余年了.这十余年来,Go取得了巨大的成就 ...

  9. java如何实现webservice中wsdlLocation访问地址的可配置化

    背景:项目中调用了别的系统的webservice接口,调用成功之后发现wsdlLocation的地址是写死的,不方便修改,所以需要实现地址,包括用户名密码的可配置.项目的框架是Spring,调用web ...

  10. Gson+GsonFormat+Postman简单粗暴解析json

    现在有时候之前的项目需要返回来修改bug看到以下这段代码 if (test != null) { JSONTokener jsonParser = new JSONTokener(test); JSO ...