认识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. [LOJ 6435][PKUSC 2018]星际穿越

    [LOJ 6435][PKUSC 2018]星际穿越 题意 给定 \(n\) 个点, 每个点与 \([l_i,i-1]\) 之间的点建立有单位距离的双向边. \(q\) 组询问从 \(x\) 走到 \ ...

  2. RocketMQ的顺序消费和事务消费

    一.三种消费 :1.普通消费 2. 顺序消费 3.事务消费 1.1  顺序消费:在网购的时候,我们需要下单,那么下单需要假如有三个顺序,第一.创建订单 ,第二:订单付款,第三:订单完成.也就是这个三个 ...

  3. weblogic 12c 安装与下载

    转   一.WebLogic的介绍     WebLogic是美国bea公司出品的一个application server,确切的说是一个基于Javaee架构的中间件,纯java开发的,最新版本Web ...

  4. 题目：利用Calendar类计算自己的出生日期距今天多少天，再将自己的出生日期利用SimpleDateFormat类设定的格式输出显示

    package cn.exercise; import java.util.Calendar; import java.util.Date; import java.text.SimpleDateFo ...

  5. mysql id 自增实现

    1.在mysql中建表 2.使用: >insert into 表名 values(id,'www',66); 连续运行5次后结果: =============================== ...

  6. JavaScript(这里主要侧重于 JavaScript HTML DOM)杂项

    JavaScript基础 ------学习网站https://www.runoob.com/js/js-tutorial.html Javascript语言的特点: 安全性:2.易用性:3.动态交互性 ...

  7. spring boot入门，看这篇文章就够了

    一.SpringBoot入门 1.基本介绍 简化Spring应用开发的一个框架.整个Spring技术栈的一个大整合: J2EE开发的一站式解决方案: 优点: 快速创建独立运行的Spring项目以及与主 ...

  8. STorM32 BGC三轴增稳云台驱动下载

    STorM32 BGC是一种硬件开源.软件闭源的三轴稳定云台控制项目.云台在我们生活中是越来越常见,我们手机拍照用的手持云台,无人机上挂载摄像机的机载隔振云台.我们在电影<流浪地球>里面那 ...

  9. 纯C语言实现链队

    #include <stdio.h> #include <stdlib.h> typedef int QElemType; typedef struct QNode{ QEle ...

  10. C#中将long浮点数格式化为{H:min:s.ms}格式的字符串的方法

    场景 表示时间的数据格式为浮点数,如下: 需要将其格式化为{H:min:s.ms}格式的字符串,效果如下: 注: 博客主页:https://blog.csdn.net/badao_liumang_qi ...