认识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. 「ZJOI2019」浙江省选

    在八月来临前补完了zjoi2019 本来是想在八月前做完暑假作业的? 传送门 Description 给\(n\)条斜率为正的直线,询问每条直线是否在某处高度为前\(m\)名,如果是,询问最小排名 S ...

  2. js/java 获取、添加、修改、删除cookie(最全)

      一.cookie介绍 1.cookie的本来面目 HTTP协议本身是无状态的.什么是无状态呢,即服务器无法判断用户身份.Cookie实际上是一小段的文本信息(key-value格式).客户端向服务 ...

  3. WebBrowser中html元素如何触发winform事件 z

    只要注册一下事件就可以了. C#代码如下: using System;using System.ComponentModel;using System.Windows.Forms; namespace ...

  4. 诡异问题:tomcat启动一直卡住,strace跟踪提示apache-tomcat核心文件找不到。

    最近遇到了一个诡异的tomcat问题,被这个问题折磨了2天.是这样的,启动tomcat后一直卡在这个点上: org.apache.catalina.core.StandardEngine.startI ...

  5. 送书『构建Apache Kafka流数据应用』和『小灰的算法之旅』和『Java并发编程的艺术』

    读书好处 1.可以使我们增长见识. 2.可提高我们的阅读能力和写作水平. 3.可以使我们变的有修养. 4.可以使我们找到好工作. 5.可以使我们在竞争激烈的社会立于不败之地. 6.最大的好处是可以让你 ...

  6. java优化细节记录

    此处是为了记录一些优化细节,从网上收集而来,仅供后续代码开发参考使用,如发现更好的,会不断完善 首先确认代码优化的目标是: 减小代码的体积 提高代码运行的效率 代码优化细节 1.尽量指定类.方法的fi ...

  7. SEO-------- 了解

    SEO(Search Engine Optimization) 译为:搜索引擎优化,是一种透过了解搜索引擎的运作规则来调整网站,以及提高目的的网站在有关搜索引擎内的排名方式. 目的:为了让用户更快的搜 ...

  8. 【前端知识体系-JS相关】组件化和React

    1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...

  9. 如何保障MySQL主从复制关系的稳定性?关键词(新特性、crash-safe)

    一 前言 MySQL 主从架构已经被广泛应用,保障主从复制关系的稳定性是大家一直关注的焦点.MySQL 5.6 针对主从复制稳定性提供了新特性: slave 支持 crash-safe.该功能可以解决 ...

  10. 【UOJ#82】【UR #7】水题生成器(贪心)

    [UOJ#82][UR #7]水题生成器(贪心) 题面 UOJ 题解 把\(n!\)的所有约数搜出来,这个个数不会很多. 然后从大往小能选则选就好了. #include<iostream> ...