HTML浅析一input标签

input标签

前言

首先我在前面一篇文章介绍了form标签，而现在要讲的input需要写在form标签里面才能真正发挥作用，没看过的小伙伴可以看一下：
form标签的简单应用

正题

首先先简单介绍下这个标签

input 标签规定了用户可以在其中输入数据的输入字段，输入字段可通过多种方式改变，取决于 type 属性。
注意：input 元素是空的,它只包含标签属性。

属性

1. type属性（这个可以说是最重要的）
   
   例子：
   这个是我看的一个优秀的博主写的，他里面对type属性进行了深刻的解析，如果想要进一步了解的话可以通过下面的链接去了解下

<form action="">

        用户名:
        <input type="text" />
        <br />密&nbsp;&nbsp;&nbsp;码:
        <input type="password" />
        <br />

        <!-- 通过 相同 name 值 绑定成一组,实现单选 -->
        性别:
        <input type="radio" name="sex" checked="checked" />男
        <input type="radio" name="sex" />女
        <br />

        <!-- 复选框,可以同时选中 多项 -->

        爱好:
        <input type="checkbox" name="hobby" checked="checked" />小说
        <input type="checkbox" name="hobby" />动漫
        <input type="checkbox" name="hobby" />音乐
        <input type="checkbox" name="hobby" />运动
        
        <!-- 5种 按钮 -->
        <br />搜索:
        <input type="button" value="搜索" />
        <br />
        <br />

        <input type="submit" value="提交注册信息" />

        <input type="reset" value="清空填写信息" />
        <br />
        <br />

        <input type="image" src="images/注册.png" />

        <br />
        <input type="file" />
    </form>

原文链接：https://blog.csdn.net/VickyTsai/article/details/94839889

2. value属性：
元素的默认值
1）当input type=“text”、“password”、"hidden"时，定义输入字段的初始值；
2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本；
3）当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值；
注意：input type="checkbox"和input type="radio"中必须设置value属性；value属性无法与input type="file"一通使用。

<input type="text" value="123">

如果是text类型的话，效果是这样的，value是框里面的值

3. placeholder属性
placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失
placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password
这个的效果也是跟上面一样的

4. 这里需要讲一下placeholder与value的异同（简单区分）
相同点：
都可以在input框里面显示值，起到一定的交互效果
都可以通过给input标签设置内边距来控制文字的位置
不同：
第一个不同是使用范围不同，有着不同的type限制
第二个呢是value的话你开始输入东西的时候文本是不会去掉的，需要你自己手动删除，而placeholder就只要你点进去之前的默认文字就会自动删除，会有比较好的用户体验！
5. autocomplete属性
可选值：
autocomplete="on"开启自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获得焦点

清除默认样式

这里清除默认样式对自己写网页会有很大的作用！！

input {
	  background: none;
	  outline: none;
	  border: none;
	}

结语

为什么我要在520这一天写这个，人与人的情感并不相同，我只觉得他们吵闹