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:先来看下运行效果;
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNvwVZ2x2bzNXak9CX90TQNNkRrFlQKBTSvwFbslmZvwFMwQzLcVmepNHdu9mZvwFVywUNMZTY18CX052bm9CX1klaNRzZ65UMNpHW4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2LcRHelR3LcJzLctmch1mclRXY39TMxMDM0ITNyEjNxUDM4EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
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,,没什么可说的呢
好了,今天的分享就到这里了!喜欢博主的粉我哦,老铁们,点一波关注!