前端CSS input type属性详解
input在前端中使我们需要熟悉使用的一个标签,input中type属性值不止text一个。可定义单行输入字段,用户可以自定义输入文字,默认最多输入20个。placeholder为文本框初始默认的文字效果图:value是按钮中的文字。效果图:submit和button的区别是可以点击回车就可以触发按钮,提交表单效果图:定义一个单选的按钮,可以定义checked=“checked”强制勾选,同时也可
·
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大家可以自行尝试或者去官方文档查阅。
更多推荐
已为社区贡献1条内容
所有评论(0)