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,一经查实,立即删除!

相关文章

SpringBoot项目遇到的一些问题

SpringBoot项目整合JPA报错转载于:https://www.cnblogs.com/xb1223/p/10195054.html

关于SpringBoot中的多数据源集成

引言 其实对于分库分表这块的场景&#xff0c;目前市场上有很多成熟的开源中间件&#xff0c;eg&#xff1a;MyCAT&#xff0c;Cobar&#xff0c;sharding-JDBC等。 本文主要是介绍基于springboot的多数据源切换&#xff0c;轻量级的一种集成方案&#xff0c;对于小型的应用可…

实现vue2.0响应式的基本思路

注意&#xff0c;这里只是实现思路的还原&#xff0c;对于里面各种细节的实现&#xff0c;比如说数组里面数据的操作的监听&#xff0c;以及对象嵌套这些细节本实例都不会涉及到&#xff0c;如果想了解更加细节的实现&#xff0c;可以通过阅读源码 observer文件夹以及instance文…

HTML标签类型及特点

一、 概述 HTML&#xff08;Hyper Text Markup Language &#xff09;作为一种标记语言&#xff0c;网页所有的内容均书写在标签内部&#xff0c;标签是组成Html页面的基本元素&#xff0c;因此对标签特性的理解在HTML的学习过程中比较重要。 二、基本分类 HTML中的标签从闭…

打开页面

*<a href"javascript:void(0)" title"google" οnclick"window.parent.addTab(, 测试, Admin/UserRole, 100000)">测试444</a>*转载于:https://www.cnblogs.com/niyl/p/10196528.html

python 大量使用json 存储数据时,格式化输出的方式

import json, pprintdic {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好这是键: 檐下听雨}print(dic)pprint.pprint(dic)print(json.dumps(dic))print(json.dumps(dic, indent2))# {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好这是键…

vue computed 源码分析

我们来看看computed的实现。最简单的一个demo如下&#xff1a; <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> </head> <body> <div id"app"><div name"test&…

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

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

java大数BinInteger

当我们遇到long不行的时候就要考虑这个BinInteger了&#xff0c;因为这是只要你内存够大&#xff0c;就能输入很大的数&#xff0c;用这个处理高精度问题&#xff0c;是很容易的一件事&#xff0c;对于我这刚学java的萌新来说&#xff0c;长见识了&#xff0c;确实比C方便 BigI…

HTML页面提交TABLE

在HTML页面里&#xff0c;提交一个TABLE需要把TABLE的值传入变量或json格式&#xff0c;然后submit到服务端的。 思路描述&#xff1a;将table里的值取出&#xff0c;放在json中&#xff0c;赋给一个input&#xff0c;通过一个input来实现table表数据提交到服务器&#xff0c;就…

生成条形码

https://packagist.org/packages/picqer/php-barcode-generator转载于:https://www.cnblogs.com/pansidong/p/9334224.html

3.GDScript(1)概览

GDScript 是上面提到的用于Godot的主要语言。和其他语言相比&#xff0c;它与Godot高度整合&#xff0c;有许多优点&#xff1a; 简单&#xff0c;优雅&#xff0c;设计上为Lua、Python、Squirrel等语言用户所熟悉。加载和编译速度飞快。编辑器集成非常令人愉快&#xff0c;有节…

Web 前端框架分类解读

Web前端框架可以分为两类&#xff1a; JS的类库框架 JQuery.JS Angular.JS&#xff08;模型&#xff0c; scope作用域&#xff0c;controller&#xff0c;依赖注入&#xff0c;MVVM&#xff09;&#xff1a;前端MVC Vue.JS&#xff08;MVVM&#xff09;***** Reat.JS &…

async / await对异步的处理

虽然co是社区里面的优秀异步解决方案&#xff0c;但是并不是语言标准&#xff0c;只是一个过渡方案。ES7语言层面提供async / await去解决语言层面的难题。目前async / await 在 IE edge中已经可以直接使用了&#xff0c;但是chrome和Node.js还没有支持。幸运的是&#xff0c;b…

《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;却都有自…

div/div作用

<div></div>主要是用来设置涵盖一个区块为主&#xff0c;所谓的区块是包含一行以上的数据&#xff0c;所以在<div></div>的开始之前与结束后&#xff0c;浏览都会自动换行&#xff0c;所以夹在<div></div>间的数据&#xff0c;自然会与其前…

路由懒加载优化

首先得需要插件支持&#xff1a;syntax-dynamic-import import Vue from vue import VueRouter from vue-router /*import First from /components/First import Second from /components/Second*/Vue.use(VueRouter) //方案1 const first ()>import(/* webpackChunkName: &…

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

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

关于Keychain

1、Keychain 浅析 2、iOS的密码管理系统 Keychain的介绍和使用 3.iOS开发中&#xff0c;唯一标识的解决方案之keyChainUUID 转载于:https://www.cnblogs.com/KiVen2015/p/9341224.html