认识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讲学习笔记:第三十二讲

    一.本节分析案例 在 MySQL 中有两个 kill 命令:一个是 kill query + 线程 id,表示终止这个线程中正在执行的语句:一个是 kill connection + 线程 id,这里 ...

  2. LeetCode 20:有效的括号 Valid Parentheses

    给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. Given a string containing just the characters '(', ' ...

  3. SQL Server 2014:为什么数据库里的表提示“单元格是只读的”,不能修改?该如何处理?

    出现以上这种情况,首先看一下这个字段的属性“标识规范”是不是选了“是”,自增属性下是不能修改的,属于只读.

  4. 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题

    一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...

  5. Java的POJO和JavaBean的区别

    POJO Plain Ordinary Java Object,即简单的java对象. 特点 需要有一些 private 的参数,以及针对参数的 setter 和 getter 方法来访问这些参数. ...

  6. 分布式Redis深度历险-Cluster

    本文为分布式Redis深度历险系列的第三篇,主要内容为Redis的Cluster,也就是Redis集群功能. Redis集群是Redis官方提供的分布式方案,整个集群通过将所有数据分成16384个槽来 ...

  7. swift(二)swift字符串和字符和逻辑运算

    /* 1.swift字符串和字符 2.构造字符串 3.字符串比较 4.数值运算 5.复制运算 6.关系运算 7.逻辑运算 8.区间运算 */ /* //数据 + 数据的处理 //字符信息+ 字符信息的 ...

  8. du查看某个文件或目录占用磁盘空间的大小

    一.du的功能:`du` reports the amount of disk space used by the specified files and for each subdirectory  ...

  9. Nginx配置实验反向代理

    l  实验要求 浏览器访问 8083.mine.com:8081 地址,(Nginx端口是8081)通过Nginx服务器反向代理监听请求,将请求转发到tomcat服务器上,实现真正内容的访问. l  ...

  10. springboot使用vue打包过的页面资源

    (一)webpack打包 如果在vue基于webpack的,build打包后得到的是如下的资源文件: webstorm中提示如下: 这个大致的意思就是这边的文件需要放在http服务器上访问,如果直接打 ...