input标签用法解读

HTML5/HTML中标签用法解读
OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中标签的用法,,, ,emmm图文并茂哦!
下面正式开始内容的介绍:首先,直观上说标签规定了用户可以在其中输入数据的输入字段!元素在元素之中使用的时候,用来声明允许用户输入数据的input控件:输入字段可以通过多种方式改变,取决于type的值。

首先是HTML5之前的HTML中input标签:这个时候type的属性一般有以下几个:

    text button submit password checkbox radio file reset

下面来详细解说:
(1)text:先来看下运行效果;在这里插入图片描述

test这个属性没什么好说的,,就是圈一个文本框,我们可以在其中输入文本;

(2)button:就像他的名字一样,是一个按钮!我们可以为他赋予value值;
在这里插入图片描述
运行效果还有代码如上!按钮用的超级多啊,一般与一些动作函数一起使用!比如onclick onmouseover onmouseout等,这里不说这个,,感兴趣的小伙伴可以自行了解!

(3)submit:submit与button有点像,,不同的就是submit天生就可以点击,可跳转到另外一个页面,而button则需要onclick这个方法来激活!比如,我们时常会遇到酱紫的情况,,网申一份简历的时候,在最后往往都有一个提交的按钮!下面我们使用submit来实现跳转到百度首页!
在这里插入图片描述
在这里插入图片描述
这里呢,我们点击一下提交,,,几秒后就可以跳转到百度首页了!实现代码如下:

 <form action="http://baidu.com"><input type="text" ><input type="submit" value="提交"></form>

(4)password:输入密码,,这个太常见了;

我们来做下输入密码之后提交到百度首页:
在这里插入图片描述
点提交之后,,就到了百度首页哈
在这里插入图片描述
代码:

<form action="http://baidu.com"><input type="password" ><input type="submit" value="提交"></form>

(5)checkbox:单选框复选框用的比较多,我们也来写下:
在这里插入图片描述

   <input type="checkbox" >

(6)radio:在这里插入图片描述

    <input type="radio" >

(7)file:这个点击之后会从本地上传一文件,,我们在熟悉不过了,传百度云的时候啊什么的!
在这里插入图片描述

    <input type="file" >

(8)reset:这个就是重置按钮!
在这里插入图片描述

HTML中input到这里就结束了!下面是强大的HTML5!

与HTML比较HTML新增了其type类型:比如:

新增-date日期!number!在PC端带上下箭头,在移动端是数字键盘!min=“0” max=“40” step=“2”
range:其他与number类似的;min max step ;search;url;tel;

(1)先来看下date:会显示出一个日历!
在这里插入图片描述
右侧鼠标放上出来小箭头点击出来日历!
(2):number:
在这里插入图片描述
点黑色小箭头可改变数字可大可小,代码:

<input type="number"min="0" max="40" step="2">

分别定义了上下限,,step字如其名,定义了每次变化的数量!
(3)range:是一个滑块也很常见:
在这里插入图片描述
除了type不同,其他与number一样!
代码:

<input type="range"min="0" max="40" step="2”">

(4)search:
在这里插入图片描述
类似于搜索的时候,写错了,x掉内容的操作!剩下的URL TEL 就是一个文本框,,字如其名,,输入URL/TEL,,没什么可说的呢

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249936.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件开发文档整理(之)一张示意图 | 清晰明了

在整个软件开发周期&#xff0c;开发文档是必不可少的资料&#xff0c;它们贯穿于整个开发周期&#xff0c;用来评估计划、规划进度、项目管理、软件测试、软件发布&#xff0c;可以说至关重要。   开发文档必须归档&#xff0c;没有归档的文档作用大打折扣&#xff0c;时效性…

《SQL Server 2008从入门到精通》--20180717

目录 1.触发器1.1.DDL触发器1.2.DML触发器1.3.创建触发器1.3.1.创建DML触发器1.3.2.创建DDL触发器1.3.3.嵌套触发器1.3.4.递归触发器1.4.管理触发器1.触发器 触发器是一种特殊的存储过程&#xff0c;与表紧密关联。 1.1.DDL触发器 当服务器或数据库中发生数据定义语言&#xff…

主成分分析原理解释(能力工场小马哥)

主成分分析&#xff08;Principal components analysis&#xff09;-最大方差解释 在这一篇之前的内容是《Factor Analysis》&#xff0c;由于非常理论&#xff0c;打算学完整个课程后再写。在写这篇之前&#xff0c;我阅读了PCA、SVD和LDA。这几个模型相近&#xff0c;却都有自…

vue全面介绍--全家桶、项目实例

简介 “简单却不失优雅&#xff0c;小巧而不乏大匠”。 2016年最火的前端框架当属Vue.js了&#xff0c;很多使用过vue的程序员这样评价它&#xff0c;“vue.js兼具angular.js和react.js的优点&#xff0c;并剔除了它们的缺点”。授予了这么高的评价的vue.js&#xff0c;也是开…

吴恩达机器学习笔记 —— 9 神经网络学习

本章讲述了神经网络的起源与神经元模型&#xff0c;并且描述了前馈型神经网络的构造。 更多内容参考 机器学习&深度学习 在传统的线性回归或者逻辑回归中&#xff0c;如果特征很多&#xff0c;想要手动组合很多有效的特征是不现实的&#xff1b;而且处理这么大的特征数据量…

vue.js开发环境搭建

环境准备 Node.js Javascript的运行时环境npm Node.js下的包管理工具webpack 前端资源模块化管理和打包工具vue-cli 脚手架构建工具cnpm npm的淘宝镜像 Vue.js安装 Node.js的安装非常容易&#xff0c;首先从官网下载你所需操作系统的版本&#xff0c;然后一直下一步就ok&…

正则基础知识

创建正则表达式 1.使用new来创建 var exp new RegExp(box , gi );g 全局匹配 i 忽略大小写 m 多行匹配2.使用字面量 var exp /box/gi; 直接用2个 / ; 在俩个斜杠后加上模式修饰符&#xff1b; 俩种创建方式比较: 1.使用字面量方式创建用的更加广泛; 2.当要匹配的内容是变量时,…

Promise实践

var doSomething function() { return new Promise((resolve, reject) > { resolve(返回值); }); };let doSomethingElse function() { return 新的值; }doSomething().then(function () { return doSomethingElse(); }).then(resp > { console.warn(resp); console.wa…

JsonBuilder初出茅庐

互联网这股东风不久前刮到了甘凉国&#xff0c;国王老甘独具慧眼&#xff0c;想赶紧趁着东风未停大力发展移动互联网&#xff0c;因为他笃信布斯雷的理论&#xff1a;“站在风口上&#xff0c;猪都能飞起来”。无奈地方偏僻落后&#xff0c;国内无可用之才啊。老甘一筹莫展的低…

Nexus介绍

转自&#xff1a;https://www.cnblogs.com/wincai/p/5599282.html 开始在使用Maven时&#xff0c;总是会听到nexus这个词&#xff0c;一会儿maven&#xff0c;一会儿nexus&#xff0c;当时很是困惑&#xff0c;nexus是什么呢&#xff0c;为什么它总是和maven一起被提到呢&#…

vue-cli 打包

一项目打包 1 打包的配置在 build/webpack.base.conf.js文件下 常量config在vue/config/index.js 文件下配置&#xff0c;__dirname是定义在项目的全局变量&#xff0c;是当前文件所在项目的文件夹的绝对路径。 2 需要修改vue/config/index.js 文件下的将build对象下的assets…

乘风破浪:LeetCode真题_010_Regular Expression Matching

乘风破浪&#xff1a;LeetCode真题_010_Regular Expression Matching 一、前言 关于正则表达式我们使用得非常多&#xff0c;但是如果让我们自己写一个&#xff0c;却是有非常大的困难的&#xff0c;我们可能想到状态机&#xff0c;确定&#xff0c;非确定状态机确实是一种解决…

vue项目工程中npm run dev 到底做了什么

npm install 安装了webpack框架中package.json中所需要的依赖 2.安装完成之后&#xff0c;需要启动整个项目运行&#xff0c;npm run 其实执行了package.json中的script脚本&#xff0c;npm run dev的执行如下 3.底层相当执行webpack-dev-server --inline --progress --confi…

bat等大公司常考java多线程面试题

1、说说进程,线程,协程之间的区别 简而言之,进程是程序运行和资源分配的基本单位,一个程序至少有一个进程,一个进程至少有一个线程.进程在执行过程中拥有独立的内存单元,而多个线程共享内存资源,减少切换次数,从而效率更高.线程是进程的一个实体,是cpu调度和分派的基本单位,是比…

offset系列,client系列,scroll系列回顾

一 scroll系列属性 ——滚动1 scrollHeight/scrollWidth 标签内部实际内容的高度/宽度ele.scrollHeight 有两种情况&#xff0c;当内容超出盒子范围后&#xff0c;返回的是内容的高度&#xff0c;包括padding&#xff0c;从顶部内侧到内容的最外部分。当内容不超出盒子范围…

项目开发中的自我总结

最近忙的要死,因为新开发了两个项目.现在已经测试完毕了,准备部署到线上了. 然后不能白忙活吧,忙活完也得写点总结和经验吧,以后也有个记录. 1.一个bootstrapjquerylayuilaravel 5.4开发的一个后台系统 比较朴素 2.一个前后端分离的vuelaravel 5.4 开发的商家系统 我只负责后端…

数组黑科技(偏性能方面)未完待更新...

数组去重最优解&#xff1a;Array.prototype.unique function () {var tmp new Map();return this.filter(item > {return !tmp.has(item) && tmp.set(item,1);})}搭配使用 Array.from(foo); // ["f", "o", "o"]let s new Set([f…

控制台添加log4net

1.添加nuget包 log4net 2.app.config配置 <?xml version"1.0" encoding"utf-8"?> <configuration> <configSections><section name"log4net" type"log4net.Config.Log4NetConfigurationSectionHandler, log4net&quo…

touchWX 自定义组件以及传值

创建如图文件 index.wxc: <template><view class"wx-test" bindtap"handleTap">{{ msg }}{{dataIndex}}</view> </template> <script>export default {properties: {dataIndex: {type: String,value: default value,}},data…

vue 初始框架

VueJs讲解初始框架 一、启动项目 第一步&#xff1a;cmd进入项目文件里&#xff0c;运行npm run dev 启动项目 这里说明启动端口号是8080 第二步&#xff1a;往页面输入&#xff1a;localhost:8080 二、解析渲染步骤 先看整体框架样式和index.html&#xff1a; 从上面我…