前端CSS input type属性详解

 input在前端中使我们需要熟悉使用的一个标签，input中type属性值不止text一个。

1.首先是最常用的 text

<input type="text" placeholder="type是text的样子"/>

可定义单行输入字段，用户可以自定义输入文字，默认最多输入20个。placeholder为文本框初始默认的文字

效果图：

2.button 用法类似按钮Button

 <input type="button" value='type是button的样子'/>

value是按钮中的文字。

效果图：

3.submit提交按钮，与上一个button类似

submit和button的区别是可以点击回车就可以触发按钮，提交表单 

<input type="submit" value="提交">

效果图：

 4.radio单选框

定义一个单选的按钮，可以定义checked=“checked”强制勾选，同时也可以使用disabled使按钮不可选

效果图：

    <input type="radio" value="one" checked='checked' disabled="disabled" name='type'/>按钮是type的样子1
    <input type="radio" value="two" checked='checked' disabled="disabled" name='type'/>按钮是tyepe的样子2

 5.checked复选框

定义一个可以勾选的按钮，与上一个radio按钮类似，也可以使用checked和disabled属性改变它的是否勾选和可不可选

<input type="checkbox" value="one" checked='checked' disabled="disabled" name='type'/>按钮是type的样子1
<input type="checkbox" value="two" checked='checked' disabled="disabled" name='type'/>按钮是tyepe的样子2

效果图：

6.定义时间勾选

定义一个事件，根据Type不同有不同样式

    <input type="time" value="提交">
    <br>
    <br>
    <input type="month" value="提交">
    <br>
    <br>
    <input type="date" value="提交">

 效果图：

 其他type属性的Input大家可以自行尝试或者去官方文档查阅。