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大家可以自行尝试或者去官方文档查阅。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐