HTML5/HTML中input标签用法解读

HTML5/HTML中<input>标签用法解读

OK！今天博主为小伙伴们介绍的内容是HTML5/HTML中<input>标签的用法，，，，emmm图文并茂哦！

喜欢博主的粉我哦，老铁们，点一波关注！

下面正式开始内容的介绍：首先，直观上说<input>标签规定了用户可以在其中输入数据的输入字段！<input>元素在<form>元素之中使用的时候，用来声明允许用户输入数据的input控件：输入字段可以通过多种方式改变，取决于type的值。

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

text button submit password checkbox radio file reset

下面来详细解说：

（1）text：先来看下运行效果；

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

（2）button：就像他的名字一样，是一个按钮！我们可以为他赋予value值；

< input type= "button" value= "按钮1" >

运行效果还有代码如上！按钮用的超级多啊，一般与一些动作函数一起使用！比如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：这个就是重置按钮！

呼！这东西可真不少啊，，有点累emmm：

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：会显示出一个日历！嗯H5真的有点神奇了！

右侧鼠标放上出来小箭头点击出来日历！

（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，，没什么可说的呢

好了，今天的分享就到这里了！喜欢博主的粉我哦，老铁们，点一波关注！

HTML5/HTML中input标签用法解读相关推荐

input标签用法解读
HTML5/HTML中标签用法解读 OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中标签的用法,,, ,emmm图文并茂哦! 下面正式开始内容的介绍:首先,直观上说标签规定了用户可以在其中输 ...
JSP中 input type 用法
JSP中 input type 用法 Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=te ...
jsp中用java写标签id_jsp中自定义标签用法实例分析
本文实例讲述了jsp中自定义标签用法.分享给大家供大家参考.具体如下: 这里简单的写了一个自定义标签,自己定义标签的好处就是在jsp页面中可以使用自己定义的功能,完全与Java代码分离 1. tld文 ...
Easyui中input标签设置只读
Easyui中input标签设置只读直接在input标签中设置属性:readonly="readonly". 具体例子: <input class="easyui ...
Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架一.input标签常用属性表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
IOS系统中input标签获取焦点页面会放大的问题
IOS系统中input标签获取焦点页面会放大的问题在iOS系统中打开网页,input框输入时,输入框获取焦点的时候页面会放大,如果没有经过设置,页面放大之后就不会自动还原.使内容撑开浏览器,底部产生 ...
vue中input标签的使用
vue中input标签的使用普通input标签 <input type="text" value="" placeholder="placeh ...
HTML中input标签使用法汇总
HTML input标签的属性: 1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text".具体它有那些值,我们后面再讨论. ...
html中input标签中type属性小总(包含html5新增表单属性)
前言 HTML5新增了许多属性和方法,其中一些就有input标签中 type属性. 有关于input中type的全部可取值如下 1.button 2.text 3.time(会呈现表的形状) 4. ...

HTML5/HTML中input标签用法解读

HTML5/HTML中input标签用法解读相关推荐

最新文章

热门文章